import{LitElement as i,html as n,css as t}from"lit";import{iconRemixInformationFill as e}from"./assets/cc-remix.icons.js";import{getAssetUrl as c}from"./lib/assets-url.js";import{getDocUrl as o}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 r=c("/logos/jenkins.svg"),a=o("/deploy/addon/jenkins");class d extends i{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){if("error"===this.state.type)return n`<cc-notice intent="warning" message="${l("cc-jenkins-info.error")}"></cc-notice>`;const i="loading"===this.state.type,t="loaded"===this.state.type?this.state.jenkinsLink:null,c="loaded"===this.state.type?this.state.jenkinsManageLink:null,o="loaded"===this.state.type?this.state.versions:{current:null,available:null},s=o.current!==o.available;return n`
      <cc-block>
        <div slot="ribbon">${l("cc-jenkins-info.info")}</div>
        <div slot="header" class="info-text">${l("cc-jenkins-info.text")}</div>

        <cc-block-section slot="content-body">
          <div slot="title">${l("cc-jenkins-info.open-jenkins.title")}</div>
          <div slot="info">${l("cc-jenkins-info.open-jenkins.text")}</div>
          <div class="one-line-form">
            <cc-link href="${t}" image="${r}" ?skeleton=${i}>
              <span>${l("cc-jenkins-info.open-jenkins.link")}</span>
            </cc-link>
          </div>
        </cc-block-section>

        <cc-block-section slot="content-body">
          <div slot="title">${l("cc-jenkins-info.update.title")}</div>
          <div slot="info">${l("cc-jenkins-info.update.text")}</div>
          <div class="one-line-form">
            <cc-link class="cc-link__manage-link" href="${c}" .icon=${e} ?skeleton="${i}">
              <span>
                ${s?l("cc-jenkins-info.update.new-version",{version:o.available}):l("cc-jenkins-info.update.up-to-date")}
              </span>
            </cc-link>
          </div>
        </cc-block-section>

        <div slot="footer-right">
          <cc-link href="${a}" .icon="${e}">
            ${l("cc-jenkins-info.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}static get styles(){return[s,t`
        :host {
          --cc-gap: 1em;

          display: block;
        }

        cc-link::part(img),
        .cc-link__manage-link::part(icon) {
          height: 1.5em;
          width: 1.5em;
        }

        cc-link::part(img) {
          border-radius: var(--cc-border-radius-default, 0.25em);
        }

        /* SKELETON */

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