<div class="content">
  <div
    class="list is-hoverable"
    [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
  >
    <a
      *ngFor="let task of analysis.tasks"
      class="list-item box small-box"
      [class.is-active]="task.token === token"
    >
      <div *ngIf="!task.info.startedAt">
        <div class="columns mb-0">
          <div class="column is-8">
            <span class="is-capitalized"
              ><i
                class="fa"
                [class.fa-capsules]="task.info.target === 'drug'"
                [class.fa-crosshairs]="task.info.target === 'drug-target'"
              ></i>
              {{ algorithmNames[task.info.algorithm] }}</span
            >
          </div>
          <div class="column">
            <app-fa-solid-icon
              classString="is-pulled-right has-text-warning"
              icon="pause"
            ></app-fa-solid-icon>
          </div>
        </div>
        <div class="columns mb-0">
          <div class="column is-8 pt-0 pb-0">
            <small
              *ngIf="
                task.stats.queueLength > 0 && task.stats.queuePosition === 1
              "
            >
              Queued: 1 other task to finish
            </small>
            <small
              *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition > 1"
            >
              Queued: {{ task.stats.queuePosition }} other tasks to finish
            </small>
            <small
              *ngIf="
                task.stats.queueLength === 0 || task.stats.queuePosition === 0
              "
            >
              Execution imminent...
            </small>
          </div>
          <div class="column pt-0 pb-0">
            <a
              (click)="analysis.removeTask(task.token)"
              class="has-text-danger is-pulled-right"
            >
              <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
            </a>
          </div>
        </div>
      </div>
      <div *ngIf="!task.info.done && !task.info.failed && task.info.startedAt">
        <div class="columns mb-0">
          <div class="column is-8">
            <span class="is-capitalized"
              ><i
                class="fa"
                [class.fa-capsules]="task.info.target === 'drug'"
                [class.fa-crosshairs]="task.info.target === 'drug-target'"
              ></i>
              {{ algorithmNames[task.info.algorithm] }}</span
            >
          </div>
          <div class="column">
            <app-fa-solid-icon
              classString="is-pulled-right"
              icon="spinner"
            ></app-fa-solid-icon>
          </div>
        </div>
        <div class="columns mb-0">
          <div class="column is-8 pt-0 pb-0">
            <small>Started {{ task.info.startedAt | date: "short" }}</small>
          </div>
          <div class="column pt-0 pb-0">
            <a
              (click)="analysis.removeTask(task.token)"
              class="has-text-danger is-pulled-right"
            >
              <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
            </a>
          </div>
        </div>
        <progress
          class="progress is-success"
          [value]="task.info.progress * 100"
          max="100"
        ></progress>
      </div>
      <div
        *ngIf="task.info.done"
        (click)="open(task.token)"
        pTooltip="Show analysis results"
        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
        tooltipPosition="top"
      >
        <div class="columns mb-0">
          <div class="column is-8">
            <span class="is-capitalized"
              ><i
                class="fa"
                [class.fa-capsules]="task.info.target === 'drug'"
                [class.fa-crosshairs]="task.info.target === 'drug-target'"
              ></i>
              {{ algorithmNames[task.info.algorithm] }}</span
            >
          </div>
          <div class="column">
            <app-fa-solid-icon
              classString="is-pulled-right has-text-success"
              icon="check"
            ></app-fa-solid-icon>
          </div>
        </div>
        <div class="columns mb-0">
          <div class="column is-8 pt-0 pb-0">
            <small>Finished {{ task.info.finishedAt | date: "short" }}</small>
          </div>
          <div class="column pt-0 pb-0">
            <a
              (click)="analysis.removeTask(task.token)"
              class="has-text-danger is-pulled-right"
            >
              <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
            </a>
          </div>
        </div>
      </div>
      <div *ngIf="task.info.failed">
        <div class="columns mb-0">
          <div class="column is-8">
            <span class="is-capitalized"
              ><i
                class="fa"
                [class.fa-capsules]="task.info.target === 'drug'"
                [class.fa-crosshairs]="task.info.target === 'drug-target'"
              ></i>
              {{ algorithmNames[task.info.algorithm] }}</span
            >
          </div>
          <div class="column">
            <app-fa-solid-icon
              classString="is-pulled-right"
              icon="exclamation-triangle"
            ></app-fa-solid-icon>
          </div>
        </div>
        <div class="columns mb-0">
          <div class="column is-8 pt-0 pb-0 has-text-danger">
            <small class="status-field">{{ task.info.status }}</small>
          </div>
          <div class="column pt-0 pb-0">
            <a
              (click)="analysis.removeTask(task.token)"
              class="has-text-danger is-pulled-right"
            >
              <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
            </a>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>