<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
    <div class="row flex-items-xs-right option-right">
      <div class="flex-xs-middle">
        <button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>
        <grid-filter filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchAuditLogs($event)"></grid-filter>
        <a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
      </div>
    </div>
    <div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
      <clr-dropdown [clrMenuPosition]="'bottom-left'" >
        <button class="btn btn-link" clrDropdownToggle>
          {{'AUDIT_LOG.OPERATIONS' | translate}}
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <div class="dropdown-menu">
          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
            <clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
            <ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
            {{f.description | translate}}
          </a> 
        </div>
      </clr-dropdown>
      <div class="flex-xs-middle">
          <clr-icon shape="date"></clr-icon>
          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(fromTime.value)">
            <span *ngIf="fromTimeInvalid" class="tooltip-content">
               {{'AUDIT_LOG.INVALID_DATE' | translate }}
            </span>
          </label>
          <clr-icon shape="date"></clr-icon>
          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(toTime.value)">
            <span *ngIf="toTimeInvalid" class="tooltip-content">
               {{'AUDIT_LOG.INVALID_DATE' | translate }}
            </span>
          </label>
      </div>
    </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 datagrid-margin-top ">  
    <clr-datagrid (clrDgRefresh)="retrieve($event)">
      <clr-dg-column>{{'AUDIT_LOG.USERNAME' | translate}}</clr-dg-column>
      <clr-dg-column>{{'AUDIT_LOG.REPOSITORY_NAME' | translate}}</clr-dg-column>
      <clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
      <clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
      <clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
      <clr-dg-row *ngFor="let l of auditLogs">
        <clr-dg-cell>{{l.username}}</clr-dg-cell>
        <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
        <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
        <clr-dg-cell>{{l.operation}}</clr-dg-cell>
        <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
      </clr-dg-row>
      <clr-dg-footer>
        {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}
        <clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
      </clr-dg-footer>
    </clr-datagrid>
  </div>
</div>