import{LitElement as t,html as e,css as i}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{iconRemixInformationFill as s}from"./assets/cc-remix.icons.js";import{skeletonStyles as o}from"./styles/skeleton.js";import{ccLink as r,linkStyles as a}from"./templates/cc-link/cc-link.js";import{i18n as n}from"./translation.js";import"./cc-block.js";import"./cc-notice.js";const p={privateActiveUsers:15,publicActiveUsers:120,storage:698980762,price:17.5};class d extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){return e`<cc-block><div slot=header-title>Heptapod</div><div slot=content class=header><img class=header-logo src=${"https://assets.clever-cloud.com/logos/heptapod.svg"} alt="heptapod logo" title="heptapod logo"><div class=header-content><div>Heptapod</div><div>${r("https://heptapod.host","https://heptapod.host")}</div></div></div><div slot=content class=description>${n("cc-heptapod-info.description")}</div>${"error"===this.state.type?e`<cc-notice slot=content intent=warning message=${n("cc-heptapod-info.error-loading")}></cc-notice>`:""} ${"not-used"===this.state.type?e`<div slot=content class=no-statistics>${n("cc-heptapod-info.not-in-use")}</div>`:""} ${"loading"===this.state.type?this._renderStatistics(p,!0):""} ${"loaded"===this.state.type?this._renderStatistics(this.state.statistics,!1):""}<div slot=footer-right>${r("https://developers.clever-cloud.com/doc/addons/heptapod/",e`<cc-icon .icon=${s}></cc-icon>${n("cc-heptapod-info.documentation.text")}`)}</div></cc-block>`}_renderStatistics(t,i){return e`<div slot=content class=pricing><div class=pricing-item><div class="${c({skeleton:i})} pricing-item-value">${t.privateActiveUsers}</div><div>${n("cc-heptapod-info.private-active-users-description")}</div></div><div class=pricing-item><div class="${c({skeleton:i})} pricing-item-value">${t.publicActiveUsers}</div><div>${n("cc-heptapod-info.public-active-users-description")}</div></div><div class=pricing-item><div class="${c({skeleton:i})} pricing-item-value">${n("cc-heptapod-info.storage-bytes",t)}</div><div>${n("cc-heptapod-info.storage-description")}</div></div><div class=pricing-item><div class="${c({skeleton:i})} pricing-item-value">${n("cc-heptapod-info.price-value",t)}</div><div>${n("cc-heptapod-info.price-description")}</div></div></div>`}static get styles(){return[o,a,i`:host{display:block}.description,.header,.pricing{line-height:1.5}.header{display:flex;flex-wrap:wrap;gap:.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:700}.no-statistics{color:var(--cc-color-text-weak);font-style:italic;margin:.2em}.skeleton{background-color:#bbb;color:transparent}[slot=footer-right] .cc-link{align-items:center;display:flex;gap:.5em}`]}}window.customElements.define("cc-heptapod-info",d);export{d as CcHeptapodInfo};
//# sourceMappingURL=cc-heptapod-info.js.map
