sLoading
          ? html`
              <div class="optin-progress-bar-wrapper">
                <progress
                  class="optin-progress-bar"
                  value=${this.progressStatus}
                  max="100"
                ></progress>
              </div>
            `
          : ""}

        <div class="optin-header-wrapper">
          <div class="optin-header">
            ${this.headingIcon
              ? html`<img
                  src=${this.headingIcon}
                  alt=${this.headingL10nId}
                  class="optin-heading-icon ${this.iconAtEnd
                    ? "icon-at-end"
                    : ""}"
                />`
              : ""}
            <h3 class="optin-heading" data-l10n-id=${this.headingL10nId}></h3>
          </div>
        </div>

        <p
          class="optin-message"
          data-l10n-id=${this.messageL10nId}
          @click=${this.handleMessageLinkClick}
        >
          <a id="optin-message-link" data-l10n-name="support" href="#"></a>
        </p>
        <slot></slot>

        ${this.isLoading
          ? html`
              <div class="optin-actions">
                <moz-button
                  size="small"
                  data-l10n-id=${this.cancelDownloadButtonL10nId}
                  @click=${this.handleCancelDownloadClick}
                >
                </moz-button>
              </div>
            `
          : html`
              <div class="optin-actions">
                <moz-button-group>
                  <moz-button
                    size="small"
                    id="optin-confirm-button"
                    type="primary"
                    data-l10n-id=${this.optinButtonL10nId}
                    @click=${this.handleConfirmClick}
                  >
                  </moz-button>
                  <moz-button
                    size="small"
                    id="optin-deny-button"
                    data-l10n-id=${this.optoutButtonL10nId}
                    @click=${this.handleDenyClick}
                  >
                  </moz-button>
                </moz-button-group>
              </div>
            `}
        ${!this.isLoading && this.footerMessageL10nId !== ""
          ? html`
              <p
                class="optin-footer-message"
                data-l10n-id=${this.footerMessageL10nId}
                @click=${this.handleFooterLinkClick}
              >
                <a
                  id="optin-footer-link"
                  data-l10n-name="settings"
                  href="#"
                ></a>
              </p>
            `
          : ""}
      </section>
    `;
  }
}
customElements.define("model-optin", ModelOptin);
PK