import{LitElement as o,html as t,css as i}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{iconRemixInformationFill as e}from"./assets/cc-remix.icons.js";import{skeletonStyles as s}from"./styles/skeleton.js";import{ccLink as n,linkStyles as l}from"./templates/cc-link/cc-link.js";import{i18n as m}from"./translation.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-notice.js";const r={matomoUrl:null,phpUrl:null,mysqlUrl:null,redisUrl:null};class a extends o{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){const o="loading"===this.state.type,{matomoUrl:i,phpUrl:c,mysqlUrl:s,redisUrl:l}="loaded"===this.state.type?this.state:r;return"error"===this.state.type?t`<cc-notice intent=warning message=${m("cc-matomo-info.error")}></cc-notice>`:t`<cc-block><div slot=ribbon>${m("cc-matomo-info.info")}</div><div slot=header class=info-text>${m("cc-matomo-info.heading")}</div><cc-block-section slot=content-body><div slot=title>${m("cc-matomo-info.open-matomo.title")}</div><div slot=info>${m("cc-matomo-info.open-matomo.text")}</div><div>${this._renderImageLink("https://assets.clever-cloud.com/logos/matomo.svg",i,m("cc-matomo-info.open-matomo.link"),o)}</div></cc-block-section><cc-block-section slot=content-body><div slot=title>${m("cc-matomo-info.about.title")}</div><div slot=info>${m("cc-matomo-info.about.text")}</div><div class=application-list>${this._renderImageLink("https://assets.clever-cloud.com/logos/php.svg",c,m("cc-matomo-info.link.php"),o)} ${this._renderImageLink("https://assets.clever-cloud.com/logos/mysql.svg",s,m("cc-matomo-info.link.mysql"),o)} ${this._renderImageLink("https://assets.clever-cloud.com/logos/redis.svg",l,m("cc-matomo-info.link.redis"),o)}</div></cc-block-section><div slot=footer-right>${n("https://www.clever-cloud.com/doc/deploy/addon/matomo/",t`<cc-icon .icon=${e}></cc-icon>${m("cc-matomo-info.documentation.text")}`)}</div></cc-block>`}_renderImageLink(o,i,e,s){return t`<div>${n(i,t`<cc-img src=${o}></cc-img><span class=${c({skeleton:s})}>${e}</span>`)}</div>`}static get styles(){return[s,l,i`:host{--cc-gap:1em;display:block}[slot=info] p:first-child{margin-top:0}[slot=info] p:last-child{margin-bottom:0}.cc-link{align-items:center;display:inline-flex}cc-img{border-radius:var(--cc-border-radius-default,.25em);flex:0 0 auto;height:1.5em;margin-right:.5em;width:1.5em}cc-icon{flex:0 0 auto;margin-right:.5em}.application-list>*{margin-bottom:.5em}`]}}window.customElements.define("cc-matomo-info",a);export{a as CcMatomoInfo};
//# sourceMappingURL=cc-matomo-info.js.map
