<mat-card class="flex flex-1 max-h-100">
  <mat-card-header class="pb-16">
    <mat-card-subtitle><b>JOB LOGS</b></mat-card-subtitle>
  </mat-card-header>
  <mat-card-content class="flex flex-1 overflow-y-auto">
    <div class="flex-1">
      @if (!selectedTriggerName && (!logs || logs.length == 0)) {
      <div class="h-100 w-100" style="text-align: center">
        <img
          src="assets/image/logs.svg"
          alt="no logs"
          width="320"
          style="margin-top: 6em" />
      </div>
      } @if (isWaitingForLogs()) {
      <div
        class="waitingLogs flex flex-column align-items-center justify-center gap-12">
        <mat-spinner diameter="36"></mat-spinner>
        <div>Waiting for logs from {{ selectedTriggerName }}...</div>
      </div>
      }

      <div id="logs" class="w-100" style="height: 100%">
        @for (log of logs; track log; let first = $first) {
        <div
          class="log-row flex flex-row gap-10">
          <div style="flex: 1; max-width: 300px">
            <span
              [ngClass]="{
                'animate__animated animate__zoomIn zoomIn firstLog': first
              }">
              [{{ log.time | date : 'medium' }}]</span
            >
          </div>
          <div style="flex: 1; max-width: 16px">
            <span [ngClass]="{ 'animated zoomIn firstLog': first }">
              <i
                class="fas"
                [ngClass]="{
                  'fa-check-circle green': log.type == 'INFO',
                  'fa-exclamation-triangle yellow': log.type == 'WARN',
                  'fa-times-circle red': log.type == 'ERROR'
                }"></i>
            </span>
          </div>
          <div style="flex: 1; max-width: 250px">
            <span
              [ngClass]="{
                'animate__animated animate__zoomIn zoomIn firstLog': first
              }">
              {{ log.threadName }}
            </span>
          </div>
          <div style="flex: 1">
            <span
              [ngClass]="{
                'animate__animated animate__zoomIn zoomIn firstLog': first
              }">
              {{ log.msg }}</span
            >
          </div>
        </div>
        }
      </div>
    </div>
  </mat-card-content>
</mat-card>
