{% comment %} Shared progress panel for the three issuance pages.

   The controller drives `job` (see static/sslManager/sslManager.js): cpPoll
   feeds `job.text`, `job.percent` and `job.log`. On failure `job.log` carries
   the acme.sh output verbatim — that text is the whole point of this panel, so
   it is shown rather than summarised. {% endcomment %}

<div class="cp-card" ng-show="job.started" ng-cloak>
  <div class="cp-card__head">
    <h2 class="cp-card__title">
      <i class="fa-solid fa-spinner fa-spin" ng-show="job.active"></i>
      <i class="fa-solid fa-circle-check" ng-show="!job.active && job.ok"></i>
      <i class="fa-solid fa-circle-xmark" ng-show="!job.active && job.failed"></i>
      Issuance progress
    </h2>
    <p class="cp-card__sub" ng-bind="job.domain"></p>
  </div>

  <div class="cp-card__body">
    <div class="cp-joblog is-active">
      <div class="cp-joblog__head">
        <strong ng-bind="job.text || 'Working…'"></strong>
        <span class="cp-joblog__pct" ng-bind="job.percent + '%'"></span>
      </div>

      <div class="cp-progress cp-progress--lg">
        <div class="cp-progress__bar"
             ng-class="{'is-striped': job.active, 'is-success': job.ok, 'is-danger': job.failed}"
             ng-style="{width: job.percent + '%'}"></div>
      </div>

      <pre class="cp-joblog__out" ng-show="job.log" ng-bind="job.log"></pre>
    </div>

    <div class="cp-alert cp-alert--danger" ng-show="job.failed" ng-cloak style="margin-top:14px">
      <i class="fa-solid fa-triangle-exclamation"></i>
      <p>
        <span ng-bind="job.text"></span>
        <br>
        The full output from the certificate authority is above &mdash; it names
        the exact reason (DNS, port 80, CAA or a rate limit) far better than any
        message this panel could invent.
      </p>
    </div>
  </div>
</div>