<div class="container">
  <div class="row">
    <div class="col">
      <form class="align-items-center d-flex" [formGroup]="filterForm">
        <mat-form-field appearance="outline" class="w-100 without-hint">
          <mat-select formControlName="status">
            <mat-option></mat-option>
            <mat-option
              *ngFor="let statusFilterOption of statusFilterOptions"
              [value]="statusFilterOption"
              >{{ statusFilterOption }}</mat-option
            >
          </mat-select>
        </mat-form-field>
      </form>
      <table class="gf-table w-100">
        <thead>
          <tr class="mat-header-row">
            <th class="mat-header-cell px-1 py-2 text-right">#</th>
            <th class="mat-header-cell px-1 py-2" i18n>Type</th>
            <th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
            <th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
            <th class="mat-header-cell px-1 py-2 text-right" i18n>Attempts</th>
            <th class="mat-header-cell px-1 py-2" i18n>Created</th>
            <th class="mat-header-cell px-1 py-2" i18n>Finished</th>
            <th class="mat-header-cell px-1 py-2" i18n>Status</th>
            <th class="mat-header-cell px-1 py-2">
              <button
                class="mx-1 no-min-width px-2"
                mat-button
                [matMenuTriggerFor]="jobsActionsMenu"
                (click)="$event.stopPropagation()"
              >
                <ion-icon name="ellipsis-vertical"></ion-icon>
              </button>
              <mat-menu #jobsActionsMenu="matMenu" xPosition="before">
                <button mat-menu-item (click)="onDeleteJobs()">
                  <ng-container i18n>Delete Jobs</ng-container>
                </button>
              </mat-menu>
            </th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let job of jobs">
            <tr class="mat-row">
              <td class="mat-cell px-1 py-2 text-right">{{ job.id }}</td>
              <td class="mat-cell px-1 py-2">
                <span class="align-items-center d-flex">
                  <ion-icon
                    class="mr-1"
                    name="arrow-down-circle-outline"
                  ></ion-icon>
                  <ng-container *ngIf="job.name === 'GATHER_ASSET_PROFILE'">
                    <span i18n>Asset Profile</span>
                  </ng-container>
                  <ng-container
                    *ngIf="job.name === 'GATHER_HISTORICAL_MARKET_DATA'"
                  >
                    <span i18n>Historical Market Data</span>
                  </ng-container>
                </span>
              </td>
              <td class="mat-cell px-1 py-2">{{ job.data?.symbol }}</td>
              <td class="mat-cell px-1 py-2">{{ job.data?.dataSource }}</td>
              <td class="mat-cell px-1 py-2 text-right">
                {{ job.attemptsMade }}
              </td>
              <td class="mat-cell px-1 py-2">
                {{ job.timestamp | date: defaultDateTimeFormat }}
              </td>
              <td class="mat-cell px-1 py-2">
                {{ job.finishedOn | date: defaultDateTimeFormat }}
              </td>
              <td class="mat-cell px-1 py-2">
                <ion-icon
                  *ngIf="job.state === 'active'"
                  name="play-outline"
                ></ion-icon>
                <ion-icon
                  *ngIf="job.state === 'completed'"
                  class="text-success"
                  name="checkmark-circle-outline"
                ></ion-icon>
                <ion-icon
                  *ngIf="job.state === 'delayed'"
                  name="time-outline"
                  [ngClass]="{ 'text-danger': job.stacktrace?.length > 0 }"
                ></ion-icon>
                <ion-icon
                  *ngIf="job.state === 'failed'"
                  class="text-danger"
                  name="alert-circle-outline"
                ></ion-icon>
                <ion-icon
                  *ngIf="job.state === 'paused'"
                  name="pause-outline"
                ></ion-icon>
                <ion-icon
                  *ngIf="job.state === 'waiting'"
                  name="cafe-outline"
                ></ion-icon>
              </td>
              <td class="mat-cell px-1 py-2">
                <button
                  class="mx-1 no-min-width px-2"
                  mat-button
                  [matMenuTriggerFor]="jobActionsMenu"
                  (click)="$event.stopPropagation()"
                >
                  <ion-icon name="ellipsis-horizontal"></ion-icon>
                </button>
                <mat-menu #jobActionsMenu="matMenu" xPosition="before">
                  <button mat-menu-item (click)="onViewData(job.data)">
                    <ng-container i18n>View Data</ng-container>
                  </button>
                  <button
                    mat-menu-item
                    [disabled]="job.stacktrace?.length <= 0"
                    (click)="onViewStacktrace(job.stacktrace)"
                  >
                    <ng-container i18n>View Stacktrace</ng-container>
                  </button>
                  <button mat-menu-item (click)="onDeleteJob(job.id)">
                    <ng-container i18n>Delete Job</ng-container>
                  </button>
                </mat-menu>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </div>
  </div>
</div>
