<div
  class="api-version-notice {{if this.mismatched "mismatch"}}"
  hidden={{not this.mismatched}}
  role={{if this.mismatched "alert" false}}
  {{did-insert (perform this.check)}}
  data-test-load-finished={{this.check.lastSuccessful.value}}
  data-test-api-version-notice
>
  <h2>
    <FaIcon @icon="circle-exclamation" />
    {{t "general.apiVersionMismatch"}}
  </h2>
  <div class="details">
    <p>
      {{t "general.apiVersionMismatchDetails"}}
    </p>
    {{#if this.updateAvailable}}
      <p>
        {{t "general.autoUpdatingSeconds" count=this.countdownToUpdate}}
        <button type="button" {{on "click" (perform this.update)}}>
          {{t "general.updateNow"}}
        </button>
      </p>
    {{/if}}
    {{#if this.update.isRunning}}
      <p>
        {{t "general.updatePending"}}
      </p>
    {{/if}}
    {{#if this.showReloadButton}}
      <p>
        <button type="button" {{on "click" this.reload}}>
          {{t "general.updateNow"}}
        </button>
      </p>
    {{/if}}
  </div>
</div>
