<div class="tw-mb-4">
  <h1>{{ "eventLogs" | i18n }}</h1>
  <div class="tw-mt-4 tw-flex tw-items-center">
    <bit-form-field>
      <bit-label>{{ "from" | i18n }}</bit-label>
      <input
        bitInput
        type="datetime-local"
        placeholder="{{ 'startDate' | i18n }}"
        [(ngModel)]="start"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
    <span class="tw-mx-2">-</span>
    <bit-form-field>
      <bit-label>{{ "to" | i18n }}</bit-label>
      <input
        bitInput
        type="datetime-local"
        placeholder="{{ 'endDate' | i18n }}"
        [(ngModel)]="end"
        (change)="dirtyDates = true"
      />
    </bit-form-field>
    <form #refreshForm [appApiAction]="refreshPromise">
      <button
        class="tw-mx-3 tw-mt-1"
        type="button"
        bitButton
        buttonType="primary"
        (click)="loadEvents(true)"
        [disabled]="loaded && refreshForm.loading"
      >
        {{ "update" | i18n }}
      </button>
    </form>
    <form #exportForm [appApiAction]="exportPromise">
      <button
        type="button"
        class="tw-mt-1"
        bitButton
        [ngClass]="{ loading: exportForm.loading }"
        (click)="exportEvents()"
        [disabled]="(loaded && exportForm.loading) || dirtyDates"
      >
        <span>{{ "export" | i18n }}</span>
        <i
          class="bwi bwi-fw"
          aria-hidden="true"
          [ngClass]="{
            'bwi-sign-in': !exportForm.loading,
            'bwi-spinner bwi-spin': exportForm.loading
          }"
        ></i>
      </button>
    </form>
  </div>
</div>
<ng-container *ngIf="!loaded">
  <i
    class="bwi bwi-spinner bwi-spin text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container *ngIf="loaded">
  <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
  <bit-table *ngIf="events && events.length">
    <ng-container header>
      <tr>
        <th bitCell>{{ "timestamp" | i18n }}</th>
        <th bitCell>{{ "client" | i18n }}</th>
        <th bitCell>{{ "event" | i18n }}</th>
      </tr>
    </ng-container>
    <ng-template body>
      <tr bitRow *ngFor="let e of events" alignContent="top">
        <td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
        <td bitCell>
          <span title="{{ e.appName }}, {{ e.ip }}">{{ e.appName }}</span>
        </td>
        <td bitCell [innerHTML]="e.message"></td>
      </tr>
    </ng-template>
  </bit-table>
  <button
    #moreBtn
    [appApiAction]="morePromise"
    type="button"
    bitButton
    buttonType="primary"
    (click)="loadEvents(false)"
    [disabled]="loaded && $any(moreBtn).loading"
    *ngIf="continuationToken"
  >
    <i
      class="bwi bwi-spinner bwi-spin"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
      *ngIf="moreBtn.loading"
    ></i>
    <span>{{ "loadMore" | i18n }}</span>
  </button>
</ng-container>
