import{LitElement as e,html as t,css as i}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{fakeString as o}from"./lib/fake-strings.js";import{skeletonStyles as d}from"./styles/skeleton.js";import{i18n as l}from"./translation.js";import"./cc-block.js";import"./cc-img.js";import"./cc-input-text.js";import"./cc-notice.js";import"./cc-zone.js";const n={id:null,realId:null,name:o(20),provider:{name:null,logoUrl:null},plan:{name:o(10)},creationDate:(new Date).toString()},c=o(5);class r extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading",hasVersion:!0}}render(){const e="loaded"===this.state.type?this.state:n,i="loading"===this.state.type,o=l("cc-header-addon.creation-date.short",{date:e.creationDate}),d="loaded"===this.state.type?l("cc-header-addon.creation-date.full",{date:e.creationDate}):null,r="loaded"===this.state.type&&this.state.hasVersion?this.state.version:c,p="loaded"===this.state.type?{type:"loaded",...this.state.zone}:{type:"loading"};return"error"===this.state.type?t` <cc-notice intent="warning" message="${l("cc-header-addon.error")}"></cc-notice> `:t`
      <cc-block>
        <div slot="content" class="main">
          <cc-img
            class="logo"
            src="${s(e.provider.logoUrl)}"
            a11y-name="${e.provider.name}"
            title="${s(e.provider.name)}"
            skeleton
          ></cc-img>
          <div class="details">
            <div class="name"><span class="${a({skeleton:i})}">${e.name}</span></div>
            <div class="addon-id-inputs">
              <cc-input-text
                label=${l("cc-header-addon.id-label")}
                hidden-label
                readonly
                clipboard
                value="${s(e.id)}"
                ?skeleton=${i}
              ></cc-input-text>
              <cc-input-text
                .label=${l("cc-header-addon.id-label-alternative")}
                hidden-label
                readonly
                clipboard
                value="${s(e.realId)}"
                ?skeleton=${i}
              ></cc-input-text>
            </div>
          </div>

          <div class="description">
            <div class="description-item">
              <div class="description-label">${l("cc-header-addon.plan")}</div>
              <div class="${a({skeleton:i})}">${e.plan.name}</div>
            </div>
            ${this.state.hasVersion?t`
                  <div class="description-item">
                    <div class="description-label">${l("cc-header-addon.version")}</div>
                    <div class="${a({skeleton:i})}">${r}</div>
                  </div>
                `:""}
            <div class="description-item">
              <div class="description-label">${l("cc-header-addon.creation-date")}</div>
              <div class="${a({skeleton:i})}" title="${s(d)}">${o}</div>
            </div>
          </div>
        </div>

        <div slot="footer-right" class="messages">
          <cc-zone .state=${p} mode="small-infra"></cc-zone>
        </div>
      </cc-block>
    `}static get styles(){return[d,i`
        :host {
          --cc-gap: 1em;

          display: block;
        }

        .main {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .logo {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 3.25em;
          width: 3.25em;
        }

        .details {
          flex: 1 1 11em;
        }

        .name,
        .description-label {
          margin-bottom: 0.35em;
        }

        .name {
          font-size: 1.1em;
          font-weight: bold;
        }

        .addon-id-inputs {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .description {
          align-self: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .description-item {
          flex: 1 1 auto;
        }

        .description-label {
          font-weight: bold;
        }

        .messages {
          font-size: 0.9em;
          padding-block: 0.2em;
        }

        cc-zone {
          /* FIXME: remove align-items once #1225 is merged */

          align-items: center;
          font-style: normal;
          white-space: nowrap;
        }

        [title] {
          cursor: help;
        }

        cc-input-text {
          --cc-input-font-family: var(--cc-ff-monospace, monospace);
        }

        /* SKELETON */

        .skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-header-addon",r);export{r as CcHeaderAddon};
//# sourceMappingURL=cc-header-addon.js.map
