import{LitElement as t,html as c,css as e}from"lit";import{iconRemixInformationFill as i}from"./assets/cc-remix.icons.js";import{getDocUrl as o}from"./lib/dev-hub-url.js";import{cliCommandsStyles as r}from"./styles/cli-commands.js";import{i18n as d}from"./translation.js";import"./cc-badge.js";import"./cc-block-details.js";import"./cc-block.js";import"./cc-code.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-tcp-redirection.js";const n=o("/administrate/tcp-redirections"),s=[{type:"loading"},{type:"loading"}];class a extends t{static get properties(){return{applicationId:{type:String,attribute:"resource-id"},context:{type:String},state:{type:Object}}}constructor(){super(),this.applicationId="<APPLICATION_ID>",this.context="user",this.state={type:"loading"}}render(){const t="admin"===this.context?"close":"off";return c`
      <cc-block toggle="${t}">
        <div slot="header-title">${d("cc-tcp-redirection-form.title")} ${this._renderRedirectionCountBadge()}</div>
        <div slot="content" class="content">
          ${"user"===this.context?c` <div class="description">${d("cc-tcp-redirection-form.description")}</div> `:""}
          ${"error"===this.state.type?c` <cc-notice intent="warning" message="${d("cc-tcp-redirection-form.error")}"></cc-notice> `:""}
          ${"loading"===this.state.type?c`
                ${s.map((t=>c`
                    <cc-tcp-redirection .state=${t}></cc-tcp-redirection>
                  `))}
              `:""}
          ${"loaded"===this.state.type?c`
                ${this.state.redirections.map((t=>c` <cc-tcp-redirection .state=${t}></cc-tcp-redirection> `))}
                ${0===this.state.redirections.length?c` <div class="empty-msg">${d("cc-tcp-redirection-form.empty")}</div> `:""}
              `:""}
        </div>

        <cc-block-details slot="footer-left">
          <div slot="button-text">${d("cc-block-details.cli.text")}</div>
          <div slot="link">
            <cc-link href="${n}" .icon="${i}">
              ${d("cc-tcp-redirection-form.documentation.text")}
            </cc-link>
          </div>
          <div slot="content">
            <p>
              ${d("cc-tcp-redirection-form.cli.content.intro")}
              ${d("cc-tcp-redirection-form.cli.content.instruction")}
            </p>
            <dl>
              <dt>${d("cc-tcp-redirection-form.cli.content.list-tcp-redirection-command")}</dt>
              <dd>
                <cc-code>clever tcp-redirs --app ${this.applicationId}</cc-code>
              </dd>
              <dt>${d("cc-tcp-redirection-form.cli.content.add-tcp-redirection-command-default")}</dt>
              <dd>
                <cc-code>clever tcp-redirs add --namespace default --app ${this.applicationId}</cc-code>
              </dd>
              <dt>${d("cc-tcp-redirection-form.cli.content.add-tcp-redirection-command")}</dt>
              <dd>
                <cc-code>clever tcp-redirs add --namespace &lt;NAMESPACE&gt; --app ${this.applicationId}</cc-code>
              </dd>
              <dt>${d("cc-tcp-redirection-form.cli.content.remove-tcp-redirection-command")}</dt>
              <dd>
                <cc-code
                  >clever tcp-redirs remove --namespace &lt;NAMESPACE&gt; &lt;PORT_NUMBER&gt; --app
                  ${this.applicationId}</cc-code
                >
              </dd>
            </dl>
          </div>
        </cc-block-details>
      </cc-block>
    `}_renderRedirectionCountBadge(){if("admin"===this.context&&"loaded"===this.state.type){const t=this.state.redirections.filter((({sourcePort:t})=>null!=t)).length;if(t>=1)return c` <cc-badge circle weight="strong">${t}</cc-badge> `}return""}static get styles(){return[r,e`
        :host {
          display: block;
        }

        cc-badge {
          /* cc-block title changes the font-size to 1.2em, which makes our badge way too big */
          font-size: 0.8em;
          margin-left: 0.5em;
          vertical-align: middle;
        }

        .content {
          display: grid;
          gap: 1em;
        }

        .description {
          line-height: 1.6;
        }

        .description p {
          margin: 0;
          margin-bottom: 1em;
        }

        .description code {
          background-color: var(--cc-color-bg-neutral);
          border-radius: var(--cc-border-radius-default, 0.25em);
          font-family: var(--cc-ff-monospace);
          padding: 0.15em 0.3em;
        }

        .empty-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }
      `]}}window.customElements.define("cc-tcp-redirection-form",a);export{a as CcTcpRedirectionForm};
//# sourceMappingURL=cc-tcp-redirection-form.js.map
