import{LitElement as t,html as e,css as i}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{createRef as c,ref as o}from"lit/directives/ref.js";import{iconRemixInformationFill as n,iconRemixCodeSSlashLine as s,iconRemixCalendar_2Fill as r,iconRemixInformationLine as d,iconRemixArrowRightLine as p,iconRemixCloseLine as l,iconRemixDeleteBinLine as m}from"./assets/cc-remix.icons.js";import{LostFocusController as k}from"./controllers/lost-focus-controller.js";import{ResizeController as _}from"./controllers/resize-controller.js";import{getDevHubUrl as g}from"./lib/dev-hub-url.js";import{isExpirationClose as f}from"./lib/tokens.js";import{isStringEmpty as u}from"./lib/utils.js";import{cliCommandsStyles as b}from"./styles/cli-commands.js";import{i18n as h}from"./translation.js";import"./cc-badge.js";import"./cc-block-details.js";import"./cc-block.js";import"./cc-button.js";import"./cc-code.js";import"./cc-icon.js";import"./cc-link.js";import"./cc-loader.js";import"./cc-notice.js";import{CcTokenRevokeEvent as v,CcPasswordResetEvent as w}from"./components/common.events.js";class $ extends t{static get properties(){return{apiTokenCreationHref:{type:String,attribute:"api-token-creation-href"},apiTokenUpdateHref:{type:String,attribute:"api-token-update-href"},state:{type:Object}}}constructor(){super(),this.apiTokenCreationHref=null,this.apiTokenUpdateHref=null,this.state={type:"loading"},this._createApiTokenLinkWhenEmptyRef=c(),new _(this,{widthBreakpoints:[730]}),new k(this,".api-token-card__actions__rev",(({suggestedElement:t})=>{t instanceof HTMLElement?t.focus():this._createApiTokenLinkWhenEmptyRef.value?.focus()}))}_onRevokeToken(t){this.dispatchEvent(new v(t))}_onRequestPassword(){this.dispatchEvent(new w)}_sortTokens(t,e){return t.isExpired&&!e.isExpired?1:!t.isExpired&&e.isExpired?-1:e.creationDate.getTime()-t.creationDate.getTime()}render(){if("error"===this.state.type)return e`<cc-notice intent="warning" message="${h("cc-token-api-list.error")}"></cc-notice>`;const t="loaded"===this.state.type&&0===this.state.apiTokens.length,i="loaded"===this.state.type?[...this.state.apiTokens].sort(this._sortTokens):[],a=i.some((t=>"revoking"===t.type)),c="resetting-password"===this.state.type,s="no-password"===this.state.type,r=!t&&!s&&!c;return e`
      <cc-block>
        <div slot="header-title">${h("cc-token-api-list.main-heading")}</div>
        ${r?e`
              <div slot="header-right">
                <cc-link mode="button" class="create-token-cta" href="${this.apiTokenCreationHref}">
                  <span>${h("cc-token-api-list.create-token")}</span>
                </cc-link>
              </div>
            `:""}
        <div slot="content">
          <p>${h("cc-token-api-list.intro")}</p>
          <div class="api-tokens-wrapper">
            ${"loading"===this.state.type?e`<cc-loader></cc-loader>`:""}
            ${s||c?e`
                  <div class="empty">
                    ${h("cc-token-api-list.empty")}
                    <cc-notice>
                      <div slot="message" class="empty__no-password">
                        <p class="empty__no-password__message">${h("cc-token-api-list.no-password.message")}</p>
                        <cc-button
                          primary
                          class="empty__no-password__btn"
                          @cc-click="${this._onRequestPassword}"
                          ?waiting="${c}"
                        >
                          ${h("cc-token-api-list.no-password.create-password-btn")}
                        </cc-button>
                      </div>
                    </cc-notice>
                  </div>
                `:""}
            ${t?e`
                  <div class="empty">
                    ${h("cc-token-api-list.empty")}
                    <cc-link
                      mode="button"
                      class="create-token-cta"
                      href="${this.apiTokenCreationHref}"
                      ${o(this._createApiTokenLinkWhenEmptyRef)}
                    >
                      <span>${h("cc-token-api-list.create-token")}</span>
                    </cc-link>
                  </div>
                `:""}
            ${i.length>0?e`
                  <div class="api-tokens-wrapper__list">
                    ${i.map((t=>this._renderTokenCard(t,a)))}
                  </div>
                `:""}
          </div>
        </div>
        <cc-block-details slot="footer-left">
          <div slot="button-text">${h("cc-block-details.cli.text")}</div>
          <cc-link slot="link" href="${g("/api/howto/#api-tokens")}" .icon="${n}">
            <span>${h("cc-token-api-list.link.doc")}</span>
          </cc-link>
          <div slot="content">
            <p>${h("cc-token-api-list.cli.content.intro")} ${h("cc-token-api-list.cli.content.instruction")}</p>
            <dl>
              <dt>${h("cc-token-api-list.cli.content.create-token")}</dt>
              <dd>
                <cc-code>clever tokens create "&lt;your token name&gt;"</cc-code>
              </dd>
              <dt>${h("cc-token-api-list.cli.content.revoke-token")}</dt>
              <dd>
                <cc-code>clever tokens revoke &lt;API_TOKEN_ID&gt;</cc-code>
              </dd>
              <dt>${h("cc-token-api-list.cli.content.list-token")}</dt>
              <dd>
                <cc-code>clever tokens list</cc-code>
              </dd>
              <dt>${h("cc-token-api-list.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>
    `}_renderTokenCard({type:t,id:i,name:c,description:o,creationDate:n,expirationDate:k,isExpired:_},g){const b=!_&&f({creationDate:n,expirationDate:k}),v="revoking"===t,w=h(_?"cc-token-api-list.delete-token":"cc-token-api-list.revoke-token",{name:c}),$=_?l:m;return e`
      <div
        class="api-token-card ${a({"api-token-card--is-revoking":v,"api-token-card--is-expired":_})}"
      >
        <div class="api-token-card__header">
          <div class="api-token-card__header__name">${c}</div>
          ${b?e`<cc-badge intent="warning">${h("cc-token-api-list.card.expires-soon")}</cc-badge>`:""}
          ${_?e`<cc-badge>${h("cc-token-api-list.card.expired")}</cc-badge>`:""}
        </div>
        ${u(o)?"":e` <p class="api-token-card__description">${o}</p> `}
        <div class="api-token-card__id">
          <cc-icon .icon="${s}" a11y-name=${h("cc-token-api-list.card.token-id-icon.a11y-name")}></cc-icon>
          <span class="api-token-card__id__text">${i}</span>
        </div>
        <dl class="api-token-card__info-list">
          <div class="api-token-card__info-list__item">
            <dt>
              <cc-icon .icon=${r}></cc-icon>
              <span>${h("cc-token-api-list.card.label.creation")}</span>
            </dt>
            <dd>${h("cc-token-api-list.card.human-friendly-date",{date:n})}</dd>
          </div>
          <div class="api-token-card__info-list__item api-token-card__info-list__item--bold">
            <dt>
              <cc-icon .icon=${d}></cc-icon>
              <span>${h("cc-token-api-list.card.label.expiration")}</span>
            </dt>
            <dd>
              <span>${h("cc-token-api-list.card.human-friendly-date",{date:k})}</span>
            </dd>
          </div>
        </dl>
        <cc-button
          class="api-token-card__action-revoke"
          ?danger="${!_}"
          outlined
          hide-text
          .icon=${$}
          circle
          ?waiting=${v}
          @cc-click=${()=>this._onRevokeToken(i)}
        >
          ${w}
        </cc-button>
        ${g||_?"":e`
              <cc-link
                mode="subtle"
                class="api-token-card__actions__update"
                href="${this.apiTokenUpdateHref}/${i}"
                a11y-desc="${h("cc-token-api-list.update-token-with-name",{name:c})}"
              >
                <span class="api-token-card__actions__update__span">
                  ${h("cc-token-api-list.update-token")}
                  <cc-icon .icon="${p}"></cc-icon>
                </span>
              </cc-link>
            `}
        ${g&&!_?e`
              <span class="api-token-card__actions__update api-token-card__actions__update--disabled">
                ${h("cc-token-api-list.update-token")}
                <cc-icon .icon="${p}"></cc-icon>
              </span>
            `:""}
      </div>
    `}static get styles(){return[b,i`
        :host {
          --list-item-icon-size: 1.2em;

          display: block;
        }

        /* Reset default margins and paddings */
        ul,
        li,
        dl,
        dd,
        dt {
          margin: 0;
          padding: 0;
        }

        li {
          list-style: none;
        }

        p {
          margin: 0;
        }

        .empty {
          border: 1px solid var(--cc-color-border-neutral-weak);
          display: grid;
          font-weight: bold;
          gap: 1.5em;
          justify-items: center;
          padding: 1em;
        }

        .empty__no-password {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          font-weight: normal;
          gap: 1em;
        }

        .empty__no-password__message {
          flex: 1 1 15em;
          margin: 0;
        }

        .empty__no-password__btn {
          flex: 0 0 auto;
        }

        .create-token-cta {
          align-items: center;
          display: flex;
        }

        .api-tokens-wrapper {
          margin-top: 2.5em;
        }

        .api-tokens-wrapper__list {
          display: grid;
          gap: 1.5em;
        }

        @supports (grid-template-columns: subgrid) {
          .api-tokens-wrapper__list {
            grid-template-columns: [card-start info-start] max-content 1fr [info-end actions-start] auto [actions-end card-end];
          }

          :host([w-lt-730]) .api-tokens-wrapper__list {
            grid-template-columns: [card-start info-start] 1fr [info-end actions-start] auto [actions-end card-end];
          }
        }

        .api-token-card {
          align-items: center;
          border: solid 1px var(--cc-color-border-neutral-weak, #e6e6e6);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: grid;
          gap: 0.5em;
          grid-template-columns: [card-start info-start] 1fr [info-end actions-start] max-content [actions-end card-end];
          padding: 1em;
        }

        .api-token-card--is-revoking > :not(cc-button),
        .api-token-card--is-expired > :not(cc-button) {
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }

        .api-token-card--is-expired {
          background-color: var(--cc-color-bg-neutral, #eee);
        }

        @supports (grid-template-columns: subgrid) {
          .api-token-card {
            grid-column: card-start / card-end;
            grid-template-columns: subgrid;
          }

          :host([w-lt-730]) .api-token-card {
            grid-template-columns: subgrid;
          }
        }

        .api-token-card__header {
          align-items: center;
          column-gap: 1em;
          display: flex;
          flex-wrap: wrap;
          grid-column: info-start / info-end;
          row-gap: 0.5em;
        }

        .api-token-card__header__name {
          font-weight: bold;
        }

        .api-token-card__id {
          align-items: flex-start;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
          grid-column: info-start / info-end;
        }

        .api-token-card__id__text {
          flex: 1 1 0;
          word-break: break-word;
        }

        .api-token-card__description {
          grid-column: info-start / info-end;
          margin: 0;
        }

        .api-token-card__id cc-icon {
          --cc-icon-size: var(--list-item-icon-size);

          flex: 0 0 auto;
        }

        .api-token-card__info-list {
          column-gap: 1em;
          display: flex;
          flex-wrap: wrap;
          grid-column: info-start / info-end;
          row-gap: 0.5em;
        }

        @supports (grid-template-columns: subgrid) {
          .api-token-card__info-list {
            display: grid;
            grid-column: info-start / info-end;
            grid-template-columns: subgrid;
          }
        }

        .api-token-card__info-list__item {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        :host([w-lt-730]) .api-token-card__info-list__item {
          display: grid;
          row-gap: 0.5em;
        }

        @supports (grid-template-columns: subgrid) {
          :host([w-lt-730]) .api-token-card__info-list__item {
            display: flex;
          }
        }

        .api-token-card__info-list__item--bold {
          font-weight: bold;
        }

        .api-token-card__info-list__item dt {
          --cc-icon-size: var(--list-item-icon-size);

          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .api-token-card__info-list__item dd {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .api-token-card cc-button {
          align-self: start;
          grid-column: actions-start / actions-end;
          grid-row: 1 / 2;
          justify-self: end;
        }

        .api-token-card__actions__update {
          grid-column: actions-start / actions-end;
          padding: 0.2em;
        }

        .api-token-card__actions__update__span {
          align-items: center;
          align-self: flex-end;
          border-radius: var(--cc-border-radius-default, 0.25em);
          color: var(--cc-color-text-weak, #404040);
          display: flex;
          gap: 0.5em;
        }

        .api-token-card__actions__update--disabled {
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }
      `]}}customElements.define("cc-token-api-list",$);export{$ as CcTokenApiList};
//# sourceMappingURL=cc-token-api-list.js.map
