<div class="container page">
  <div class="row">
    <h1>Download jobs</h1>
    <ul class="p-0 m-0 w-100">
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-repeat="job in downloadJobs as filteredDownloadJobs"
      >
        <div class="w-100">
          <div class="">
            <h3>
              <a target="__blank" ng-href="/r/{{job.id}}" ng-bind="job.id"></a>
              <span class="badge" ng-bind="job.progress.status | title"></span>
            </h3>
          </div>
          <div class="color-text-secondary mb-1">
            <span ng-if="job.timestamp">
              Created on:
              <span ng-bind="job.timestamp | humanTime"></span>
            </span>
            <span ng-if="job.finishedOn">
              Finished on:
              <span ng-bind="job.finishedOn | humanTime"></span>
            </span>
            <span ng-if="job.processedOn">
              Processed on:
              <span ng-bind="job.processedOn | humanTime"></span>
            </span>
          </div>
          <div>
            <pre
              ng-repeat="stack in job.stacktrace track by $index"
            ><code ng-bind="stack"></code></pre>
          </div>
        </div>
        <div class="d-flex">
          <div class="dropdown">
            <button
              class="btn black_border dropdown-toggle btn-sm"
              type="button"
              id="dropdownMenuButton"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Actions
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a
                class="dropdown-item"
                href="#"
                ng-click="removeJob('download', job)"
              >
                <i class="fas fa-trash-alt"></i> Remove
              </a>
              <a
                class="dropdown-item"
                href="#"
                ng-click="retryJob('download', job)"
              >
                <i class="fas fa-sync"></i> Retry
              </a>
            </div>
          </div>
        </div>
      </li>
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-if="filteredDownloadJobs.length == 0"
      >
        There is no job to display.
      </li>
    </ul>
    <h1>Remove jobs</h1>
    <ul class="p-0 m-0 w-100">
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-repeat="job in removeJobs as filteredRemoveJobs"
      >
        <div class="w-100">
          <div class="">
            <h3>
              <a target="__blank" ng-href="/r/{{job.id}}" ng-bind="job.id"></a>
              <span class="badge" ng-bind="job.progress.status | title"></span>
            </h3>
          </div>
          <div class="color-text-secondary mb-1">
            <span ng-if="job.timestamp">
              Created on:
              <span ng-bind="job.timestamp | humanTime"></span>
            </span>
            <span ng-if="job.finishedOn">
              Finished on:
              <span ng-bind="job.finishedOn | humanTime"></span>
            </span>
            <span ng-if="job.processedOn">
              Processed on:
              <span ng-bind="job.processedOn | humanTime"></span>
            </span>
          </div>
          <div>
            <pre
              ng-repeat="stack in job.stacktrace track by $index"
            ><code ng-bind="stack"></code></pre>
          </div>
        </div>
        <div class="d-flex">
          <div class="dropdown">
            <button
              class="btn black_border dropdown-toggle btn-sm"
              type="button"
              id="dropdownMenuButton"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Actions
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a
                class="dropdown-item"
                href="#"
                ng-click="removeJob('remove', job)"
              >
                <i class="fas fa-trash-alt"></i> Remove
              </a>
              <a
                class="dropdown-item"
                href="#"
                ng-click="retryJob('remove', job)"
              >
                <i class="fas fa-sync"></i> Retry
              </a>
            </div>
          </div>
        </div>
      </li>
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-if="filteredRemoveJobs.length == 0"
      >
        There is no job to display.
      </li>
    </ul>
  </div>
</div>
