<div>
    <h2 class="custom-h2" sub-header-title>
        {{ 'SIDE_NAV.LOGS' | translate }}
    </h2>
    <div class="row flex-items-xs-between flex-items-xs-bottom">
        <div></div>
        <div class="action-head-pos">
            <div
                class="select filter-tag clr-select-wrapper"
                [hidden]="!isOpenFilterTag">
                <select id="selectKey" (change)="selectFilterKey($event)">
                    <option value="username">
                        {{ 'AUDIT_LOG.USERNAME' | translate | lowercase }}
                    </option>
                    <option value="resource">
                        {{ 'AUDIT_LOG.RESOURCE' | translate | lowercase }}
                    </option>
                    <option value="resource_type">
                        {{ 'AUDIT_LOG.RESOURCE_TYPE' | translate | lowercase }}
                    </option>
                    <option value="operation">
                        {{ 'AUDIT_LOG.OPERATION' | translate | lowercase }}
                    </option>
                </select>
            </div>
            <hbr-filter
                [withDivider]="true"
                filterPlaceholder="{{
                    'AUDIT_LOG.FILTER_PLACEHOLDER' | translate
                }}"
                (filterEvt)="doFilter($event)"
                (openFlag)="openFilter($event)"
                [currentValue]="currentTerm"></hbr-filter>
            <span (click)="refresh()" class="refresh-btn">
                <clr-icon
                    shape="refresh"
                    [hidden]="inProgress"
                    ng-disabled="inProgress"></clr-icon>
                <span
                    class="spinner spinner-inline"
                    [hidden]="!inProgress"></span>
            </span>
        </div>
    </div>
    <div>
        <clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="loading">
            <clr-dg-column>{{
                'AUDIT_LOG.USERNAME' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'AUDIT_LOG.RESOURCE' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'AUDIT_LOG.RESOURCE_TYPE' | 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-placeholder>{{
                'AUDIT_LOG.NOT_FOUND' | translate
            }}</clr-dg-placeholder>
            <clr-dg-row *ngFor="let l of recentLogs">
                <clr-dg-cell>{{ l.username }}</clr-dg-cell>
                <clr-dg-cell>{{ l.resource }}</clr-dg-cell>
                <clr-dg-cell>{{ l.resource_type }}</clr-dg-cell>
                <clr-dg-cell>{{ l.operation }}</clr-dg-cell>
                <clr-dg-cell>{{
                    l.op_time | harborDatetime: 'short'
                }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination
                    #pagination
                    [(clrDgPage)]="currentPage"
                    [clrDgPageSize]="pageSize"
                    [clrDgTotalItems]="totalCount">
                    <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                        'PAGINATION.PAGE_SIZE' | translate
                    }}</clr-dg-page-size>
                    <span *ngIf="totalCount"
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'AUDIT_LOG.OF' | translate }} {{ totalCount }}
                        {{ 'AUDIT_LOG.ITEMS' | translate }}</span
                    >
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
