import{LitElement as t,html as i,css as e}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{iconRemixInformationFill as c}from"./assets/cc-remix.icons.js";import{getAssetUrl as o}from"./lib/assets-url.js";import{getDocUrl as r}from"./lib/dev-hub-url.js";import{skeletonStyles as a}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-block.js";import"./cc-link.js";import"./cc-notice.js";const d={privateActiveUsers:15,publicActiveUsers:120,storage:698980762,price:17.5},p=r("/addons/heptapod"),l=o("/logos/heptapod.svg");class v extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){return i`
      <cc-block>
        <div slot="header-title">Heptapod</div>
        <div slot="content" class="header">
          <img class="header-logo" src=${l} alt="heptapod logo" title="heptapod logo" />
          <div class="header-content">
            <div>Heptapod</div>
            <div><cc-link href="https://heptapod.host">https://heptapod.host</cc-link></div>
          </div>
        </div>
        <div slot="content" class="description">${n("cc-heptapod-info.description")}</div>

        ${"error"===this.state.type?i`
              <cc-notice
                slot="content"
                intent="warning"
                message="${n("cc-heptapod-info.error-loading")}"
              ></cc-notice>
            `:""}
        ${"not-used"===this.state.type?i` <div slot="content" class="no-statistics">${n("cc-heptapod-info.not-in-use")}</div> `:""}
        ${"loading"===this.state.type?this._renderStatistics(d,!0):""}
        ${"loaded"===this.state.type?this._renderStatistics(this.state.statistics,!1):""}

        <div slot="footer-right">
          <cc-link href="${p}" .icon="${c}">
            ${n("cc-heptapod-info.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}_renderStatistics(t,e){return i`
      <div slot="content" class="pricing">
        <div class="pricing-item">
          <div class="pricing-item-value ${s({skeleton:e})}">${t.privateActiveUsers}</div>
          <div>${n("cc-heptapod-info.private-active-users-description")}</div>
        </div>
        <div class="pricing-item">
          <div class="pricing-item-value ${s({skeleton:e})}">${t.publicActiveUsers}</div>
          <div>${n("cc-heptapod-info.public-active-users-description")}</div>
        </div>
        <div class="pricing-item">
          <div class="pricing-item-value ${s({skeleton:e})}">
            ${n("cc-heptapod-info.storage-bytes",t)}
          </div>
          <div>${n("cc-heptapod-info.storage-description")}</div>
        </div>
        <div class="pricing-item">
          <div class="pricing-item-value ${s({skeleton:e})}">
            ${n("cc-heptapod-info.price-value",t)}
          </div>
          <div>${n("cc-heptapod-info.price-description")}</div>
        </div>
      </div>
    `}static get styles(){return[a,e`
        :host {
          display: block;
        }

        .header,
        .description,
        .pricing {
          line-height: 1.5;
        }

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

        .header-logo {
          height: 3.25em;
          width: 3.25em;
        }

        .header-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

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

        .pricing-item {
          color: var(--cc-color-text-weak);
          flex: 1 1 auto;
          text-align: center;
        }

        .pricing-item-value {
          color: var(--cc-color-text-primary-highlight);
          display: inline-block;
          font-weight: bold;
        }

        .no-statistics {
          color: var(--cc-color-text-weak);
          font-style: italic;
          margin: 0.2em;
        }

        /* SKELETON */

        .skeleton {
          background-color: #bbb;
          color: transparent;
        }
      `]}}window.customElements.define("cc-heptapod-info",v);export{v as CcHeptapodInfo};
//# sourceMappingURL=cc-heptapod-info.js.map
