<div *ngIf="contentData">
  <ng-container *ngTemplateOutlet="logFiltersTpl"></ng-container>

  <tabset>
    <tab i18n-heading
         heading="Cluster Logs">
      <div class="card bg-light mb-3"
           *ngIf="clog">
        <div class="card-body">
          <p *ngFor="let line of clog">
            <span class="timestamp">{{ line.stamp | cdDate }}</span>
            <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
            <span class="message">{{ line.message }}</span>
          </p>

          <span *ngIf="contentData.clog.length === 0"
                i18n>No entries found</span>
        </div>
      </div>
    </tab>

    <tab i18n-heading
         heading="Audit Logs">
      <div class="card bg-light mb-3"
           *ngIf="audit_log">
        <div class="card-body">
          <p *ngFor="let line of audit_log">
            <span class="timestamp">{{ line.stamp | cdDate }}</span>
            <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
            <span class="message">{{ line.message }}</span>
          </p>

          <span *ngIf="contentData.audit_log.length === 0"
                i18n>No entries found</span>
        </div>
      </div>
    </tab>
  </tabset>
</div>

<ng-template #logFiltersTpl>
  <div class="form-inline">
    <div class="form-group">
      <label class="col-form-label"
             i18n>Priority:</label>
      <select class="form-control custom-select"
              [(ngModel)]="priority"
              (ngModelChange)="filterLogs()">
        <option *ngFor="let prio of prioritys"
                [value]="prio.value">{{ prio.name }}</option>
      </select>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Keyword:</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <i [ngClass]="[icons.search]"></i>
          </span>
        </div>

        <input class="form-control"
               type="text"
               [(ngModel)]="search"
               (keyup)="filterLogs()">

        <div class="input-group-append">
          <button type="button"
                  class="btn btn-light"
                  (click)="clearSearchKey()">
            <i class="icon-prepend {{ icons.destroy }}"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Date:</label>
      <div class="input-group">
        <input type="text"
               class="form-control"
               i18n-placeholder
               placeholder="Datepicker"
               [bsConfig]="bsConfig"
               bsDatepicker
               [(ngModel)]="selectedDate"
               (ngModelChange)="filterLogs()">
        <span class="input-group-append">
          <button type="button"
                  class="btn btn-light"
                  (click)="clearDate()">
            <i class="icon-prepend {{ icons.destroy }}"></i>
          </button>
        </span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Time range:</label>
      <div class="d-inline-flex">
        <timepicker [showMeridian]="false"
                    [showSpinners]="false"
                    [minuteStep]="1"
                    [(ngModel)]="startTime"
                    (ngModelChange)="filterLogs()">
        </timepicker>
        <span class="middle">&nbsp;&mdash;&nbsp;</span>
        <timepicker [showMeridian]="false"
                    [showSpinners]="false"
                    [minuteStep]="1"
                    [(ngModel)]="endTime"
                    (ngModelChange)="filterLogs()">
        </timepicker>
      </div>
    </div>
  </div>
</ng-template>
