<div class="row no-gutters mx-1 py-2">
  <div class="col-1">
    <ng-container *ngIf="isHomePath(); else notHomeTabId">
      <button class="btn btn-link p-0" (click)="toggleDetails()">{{ job.jobspec_id }}</button>
    </ng-container>
    <ng-template #notHomeTabId>
      {{ job.jobspec_id }}
    </ng-template>
  </div>
  <div class="col">
    <ng-container *ngIf="isHomePath(); else notHomeTabName">
      <button class="btn btn-link p-0" (click)="toggleDetails()">{{ job.jobspec_name }}</button>
    </ng-container>
    <ng-template #notHomeTabName>
      <a [routerLink]="['/jobs']" [queryParams]="{pattern: job.jobspec_name}">{{job.jobspec_name}}</a>
      <button class="btn btn-xs btn-outline-primary border-0 ml-2" (click)="toggleDetails()">
        <fa-icon [icon]="faCaretDown" *ngIf="!detailsExposed"></fa-icon>
        <fa-icon [icon]="faCaretUp" *ngIf="detailsExposed"></fa-icon>
      </button>
    </ng-template>
    <br/>
    {{ job.jobspec_sdm_id }}
  </div>
  <div class="col">{{ job.jobspec_creation_date_formatted }}</div>
  <div class="col-1">
    <h6>
      <span class="badge" [ngClass]="getJobStatusClass(job.jobspec_status)">{{ job.jobspec_status }}</span>
    </h6>
  </div>
</div>

<div class="p-3 mx-1 shadow mb-2" [ngClass]="isHomePath() ? 'bg-white' : 'bg-light'" *ngIf="detailsExposed" @vslider>
  <app-jobspec-detail [jobspec]="jobspec" *ngIf="jobspec; else loading"></app-jobspec-detail>

  <ng-template #loading>
    <app-loading></app-loading>
  </ng-template>

</div>

<div class="border-bottom mx-1"></div>