import{LitElement as o,html as t,css as i}from"lit";import{iconRemixInformationFill as c}from"./assets/cc-remix.icons.js";import{getAssetUrl as e}from"./lib/assets-url.js";import{getDocUrl as n}from"./lib/dev-hub-url.js";import{skeletonStyles as s}from"./styles/skeleton.js";import{i18n as l}from"./translation.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-link.js";import"./cc-notice.js";const m={matomoUrl:null,phpUrl:null,mysqlUrl:null,redisUrl:null},r=e("/logos/matomo.svg"),a=e("/logos/php.svg"),d=e("/logos/mysql.svg"),p=e("/logos/redis.svg"),f=n("/deploy/addon/matomo");class g 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:e,mysqlUrl:n,redisUrl:s}="loaded"===this.state.type?this.state:m;return"error"===this.state.type?t`<cc-notice intent="warning" message="${l("cc-matomo-info.error")}"></cc-notice>`:t`
      <cc-block>
        <div slot="ribbon">${l("cc-matomo-info.info")}</div>
        <div slot="header" class="info-text">${l("cc-matomo-info.heading")}</div>

        <cc-block-section slot="content-body">
          <div slot="title">${l("cc-matomo-info.open-matomo.title")}</div>
          <div slot="info">${l("cc-matomo-info.open-matomo.text")}</div>
          <div>
            ${this._renderImageLink(r,i,l("cc-matomo-info.open-matomo.link"),o)}
          </div>
        </cc-block-section>

        <cc-block-section slot="content-body">
          <div slot="title">${l("cc-matomo-info.about.title")}</div>
          <div slot="info">${l("cc-matomo-info.about.text")}</div>
          <div class="application-list">
            ${this._renderImageLink(a,e,l("cc-matomo-info.link.php"),o)}
            ${this._renderImageLink(d,n,l("cc-matomo-info.link.mysql"),o)}
            ${this._renderImageLink(p,s,l("cc-matomo-info.link.redis"),o)}
          </div>
        </cc-block-section>

        <div slot="footer-right">
          <cc-link href="${f}" .icon="${c}">
            ${l("cc-matomo-info.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}_renderImageLink(o,i,c,e){return t`
      <div>
        <cc-link href="${i}" .image=${o} ?skeleton=${e}>
          <span> ${c}</span>
        </cc-link>
      </div>
    `}static get styles(){return[s,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-link::part(img) {
          border-radius: var(--cc-border-radius-default, 0.25em);
          flex: 0 0 auto;
          height: 1.5em;
          width: 1.5em;
        }

        cc-icon {
          flex: 0 0 auto;
          margin-right: 0.5em;
        }

        .application-list > * {
          margin-bottom: 0.5em;
        }
      `]}}window.customElements.define("cc-matomo-info",g);export{g as CcMatomoInfo};
//# sourceMappingURL=cc-matomo-info.js.map
