import{LitElement as t,html as e,css as o}from"lit";import{iconRemixInformationFill as c,iconRemixArrowLeftLine as i}from"./assets/cc-remix.icons.js";import{getDevHubUrl as n}from"./lib/dev-hub-url.js";import{formSubmit as r}from"./lib/form/form-submit-directive.js";import{cliCommandsStyles as a}from"./styles/cli-commands.js";import{i18n as s}from"./translation.js";import"./cc-block-details.js";import"./cc-block.js";import"./cc-code.js";import"./cc-input-text.js";import"./cc-link.js";import"./cc-notice.js";import{CcTokenChangeEvent as d}from"./components/cc-token-api-update-form/cc-token-api-update-form.events.js";const l={name:"",description:""};class p extends t{static get properties(){return{apiTokenListHref:{type:String,attribute:"api-token-list-href"},state:{type:Object}}}constructor(){super(),this.apiTokenListHref=null,this.state={type:"loading"}}_onFormSubmit({name:t,description:e}){this.dispatchEvent(new d({name:t,description:e}))}render(){const{name:t,description:o}="loaded"===this.state.type||"updating"===this.state.type?this.state.values:l,i="loading"===this.state.type,r="updating"===this.state.type;return e`
      <cc-block>
        <div slot="header-title">${s("cc-token-api-update-form.main-heading")}</div>
        <div slot="content">
          <div class="content-wrapper">
            ${"error"===this.state.type?e`<cc-notice intent="warning" message="${s("cc-token-api-update-form.error")}"></cc-notice>`:""}
            ${"error"!==this.state.type?this._renderForm(t,o,i,r):""}
          </div>
        </div>
        <cc-block-details slot="footer-left">
          <div slot="button-text">${s("cc-block-details.cli.text")}</div>
          <cc-link slot="link" href="${n("/api/howto/#request-the-api")}" .icon="${c}">
            <span>${s("cc-token-api-update-form.link.doc")}</span>
          </cc-link>
          <div slot="content">
            <p>
              ${s("cc-token-api-update-form.cli.content.intro")}
              ${s("cc-token-api-update-form.cli.content.instruction")}
            </p>
            <dl>
              <dt>${s("cc-token-api-update-form.cli.content.create-token")}</dt>
              <dd>
                <cc-code>clever tokens create "&lt;your token name&gt;"</cc-code>
              </dd>
              <dt>${s("cc-token-api-update-form.cli.content.revoke-token")}</dt>
              <dd>
                <cc-code>clever tokens revoke &lt;API_TOKEN_ID&gt;</cc-code>
              </dd>
              <dt>${s("cc-token-api-update-form.cli.content.list-token")}</dt>
              <dd>
                <cc-code>clever tokens list</cc-code>
              </dd>
              <dt>${s("cc-token-api-update-form.cli.content.use-token")}</dt>
              <dd>
                <cc-code>
                  curl -H "Authorization: Bearer &lt;TOKEN&gt;" https://api-bridge.clever-cloud.com/v2/self
                </cc-code>
              </dd>
            </dl>
          </div>
        </cc-block-details>
      </cc-block>
    `}_renderForm(t,o,c,n){return e`
      <form class="form" ${r(this._onFormSubmit.bind(this))}>
        <cc-input-text
          label="${s("cc-token-api-update-form.name.label")}"
          name="name"
          required
          .value="${t}"
          ?skeleton="${c}"
          ?readonly="${n}"
        ></cc-input-text>
        <cc-input-text
          label="${s("cc-token-api-update-form.description.label")}"
          name="description"
          .value="${o}"
          ?skeleton="${c}"
          ?readonly="${n}"
        ></cc-input-text>
        <div class="form__actions">
          <div class="form__actions__link-container">
            <cc-link
              href="${this.apiTokenListHref}"
              class="form__actions__link-container__link"
              .icon="${i}"
              mode="subtle"
            >
              <span>${s("cc-token-api-update-form.back-to-list")}</span>
            </cc-link>
          </div>
          <cc-button
            class="form__actions__submit-button"
            type="submit"
            primary
            ?disabled="${c}"
            ?waiting="${n}"
          >
            ${s("cc-token-api-update-form.submit-button")}
          </cc-button>
        </div>
      </form>
    `}static get styles(){return[a,o`
        :host {
          display: block;
        }

        /* FIXME: not great when viewport is reduced + should be handled by the cc-block component itself */
        cc-block {
          padding-top: 2em;
        }

        /* FIXME: not great when viewport is reduced + should be handled by the cc-block component itself */
        cc-block > [slot='content'] {
          padding-bottom: 2em;
          padding-inline: 3em;
        }

        /* FIXME: not great when viewport is reduced + should be handled by the cc-block component itself */
        [slot='header-title'] {
          padding-inline: 1.5em;
        }

        .intro {
          margin: 0;
        }

        .content-wrapper {
          margin-top: 1em;
        }

        .form {
          display: grid;
          gap: 1.5em;
        }

        .form__actions {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1.5em;
          justify-content: flex-end;
          margin-top: 1em;
        }

        .form__actions__submit-button {
          flex: 1 0 min(100%, 12.5em);
        }

        .form__actions__link-container {
          display: grid;
          flex: 100 1 auto;
          justify-content: flex-end;
        }

        .form__actions__link-container__link {
          align-items: center;
          color: var(--cc-color-text-weak);
          cursor: pointer;
          display: flex;
          gap: 0.5em;
          padding: 0.25em 0.5em;
          text-decoration: none;
        }

        .form__actions__link-container__link:focus-visible {
          border-radius: var(--cc-border-radius-default, 0.25em);
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .form__actions__link-container__link cc-icon {
          flex: 0 0 auto;
        }
      `]}}window.customElements.define("cc-token-api-update-form",p);export{p as CcTokenApiUpdateForm};
//# sourceMappingURL=cc-token-api-update-form.js.map
