import{LitElement as i,html as t,css as e}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{skeletonStyles as c}from"./styles/skeleton.js";import{ccLink as o,linkStyles as r}from"./templates/cc-link/cc-link.js";import{i18n as a}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 i{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){return t`<cc-block><div slot=title>Heptapod</div><div 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>${o("https://heptapod.host","https://heptapod.host")}</div></div></div><div class=description>${a("cc-heptapod-info.description")}</div>${"error"===this.state.type?t`<cc-notice intent=warning message=${a("cc-heptapod-info.error-loading")}></cc-notice>`:""} ${"not-used"===this.state.type?t`<div class=no-statistics>${a("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):""}</cc-block>`}_renderStatistics(i,e){return t`<div class=pricing><div class=pricing-item><div class="${s({skeleton:e})} pricing-item-value">${i.privateActiveUsers}</div><div>${a("cc-heptapod-info.private-active-users-description")}</div></div><div class=pricing-item><div class="${s({skeleton:e})} pricing-item-value">${i.publicActiveUsers}</div><div>${a("cc-heptapod-info.public-active-users-description")}</div></div><div class=pricing-item><div class="${s({skeleton:e})} pricing-item-value">${a("cc-heptapod-info.storage-bytes",i)}</div><div>${a("cc-heptapod-info.storage-description")}</div></div><div class=pricing-item><div class="${s({skeleton:e})} pricing-item-value">${a("cc-heptapod-info.price-value",i)}</div><div>${a("cc-heptapod-info.price-description")}</div></div></div>`}static get styles(){return[c,r,e`: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}`]}}window.customElements.define("cc-heptapod-info",d);export{d as CcHeptapodInfo};
//# sourceMappingURL=cc-heptapod-info.js.map
