<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-menu-button menu="left-menu"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{'lang.search' | translate}}</ion-title>
        <ion-title slot="end" color="secondary">{{count}} {{'lang.results' | translate}}</ion-title>
        <ion-buttons slot="end">
            <ion-menu-button menu="right-menu">
                <ion-icon name="funnel-outline"></ion-icon>
            </ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
    <ion-toolbar *ngIf="this.currentFilters.length > 0" color="primary" style="padding-left: 1px;padding-right: 1px;">
        <div style="display: flex;">
            <ion-button class="clearFilter" shape="round" size="small" fill="clear" slot="start" color="primary"
                (click)="clearFilters()" [title]="'lang.clearFilters' | translate">
                <ion-icon slot="icon-only" name="trash-bin-outline" color="light"></ion-icon>
            </ion-button>
            <div class="scrollfilters" slot="start">
                <div *ngFor="let currentFilter of currentFilters">
                    <ion-chip outline *ngIf="(currentFilter.id === 'title' || currentFilter.id === 'reference' || currentFilter.id === 'documentId') && currentFilter.val !== ''" color="primary"
                        style="background: white;" [title]="'lang.' + currentFilter.id + 'Search' | translate"
                        (click)="removeFilter(currentFilter)">
                        <ion-icon *ngIf="currentFilter.id === 'title'" name="document-text-outline"></ion-icon>
                        <ion-icon *ngIf="currentFilter.id === 'reference'" name="compass-outline"></ion-icon>
                        <ion-icon *ngIf="currentFilter.id === 'documentId'" name="bookmark-outline"></ion-icon>
                        <ion-label>{{ currentFilter.val }}</ion-label>
                        <ion-icon name="close-circle"></ion-icon>
                    </ion-chip>
                    <div *ngIf="currentFilter.id === 'workflowStates' && currentFilter.val.length > 0">
                        <ion-chip outline *ngFor="let item of currentFilter.val" color="primary"
                            style="background: white;" [title]="'lang.workflowStatesSearch' | translate"
                            (click)="removeFilter(currentFilter, item.id)">
                            <ion-icon name="swap-horizontal-outline"></ion-icon>
                            <ion-label>{{ item.label | translate}}</ion-label>
                            <ion-icon name="close-circle"></ion-icon>
                            
                        </ion-chip>
                    </div>
                    <div *ngIf="currentFilter.id === 'workflowUsers' && currentFilter.val.length > 0">
                        <ion-chip outline *ngFor="let item of currentFilter.val" color="primary"
                            style="background: white;" [title]="'lang.workflowUsersSearch' | translate"
                            (click)="removeFilter(currentFilter, item)">
                            <ion-icon name="person-outline"></ion-icon>
                            <ion-label>{{ item.firstname}} {{ item.lastname }}</ion-label>
                            <ion-icon name="close-circle"></ion-icon>
                        </ion-chip>
                    </div>
                    <div *ngIf="currentFilter.id === 'documentState' && currentFilter.val.length > 0">
                        <ion-chip outline color="primary" *ngFor="let item of currentFilter.val"
                            style="background: white;" [title]="'lang.documentStateSearch' | translate"
                            (click)="removeFilter(currentFilter, item)">
                            <ion-icon name="document-outline"></ion-icon>
                            <ion-label>{{ 'lang.' + item | translate }}</ion-label>
                            <ion-icon name="close-circle"></ion-icon>
                        </ion-chip>
                    </div>
                </div>
            </div>
        </div>

    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list class="no-result" *ngIf="ressources.length === 0">
        <ion-item lines="none">
            <ion-label class="no-result-label" color="medium">{{'lang.noResult' | translate}}</ion-label>
        </ion-item>
    </ion-list>
    <ion-list *ngIf="ressources.length > 0">
        <ion-virtual-scroll [items]="ressources" approxItemHeight="165px">
            <ion-item *virtualItem="let element">
                <ion-label>
                    <ion-toolbar color="light">
                        <ion-title size="small">
                            <p
                                style="display: flex;align-items: center;white-space: pre;overflow-x: auto;overflow-y: hidden;">
                                <ng-container *ngFor="let itemW of element.workflow;let i=index;">
                                    <ion-icon *ngIf="i>0" name="chevron-forward-outline"></ion-icon>
                                    <span class="workflow-item success"
                                        [class.success]="itemW.processDate!==null && itemW.status!=='STOP'"
                                        [class.typist-interrupt]="itemW.status==='REF'"
                                        [class.interrupt]="(itemW.processDate===null && itemW.status === 'END') || itemW.status === 'STOP'"
                                        [class.current]="itemW.current"
                                        [class.no-visa]="itemW.processDate===null && itemW.status===null && !itemW.current">{{!this.functionsService.empty(itemW.userDisplay) ? itemW.userDisplay : ('lang.userDeleted' | translate)}}&nbsp;
                                        <ion-icon
                                            *ngIf="itemW.processDate!==null && itemW.status!=='REF' && itemW.status!=='STOP'"
                                            name="thumbs-up-outline"></ion-icon>
                                        <ion-icon *ngIf="itemW.processDate!==null && itemW.status==='REF'"
                                            name="thumbs-down-outline"></ion-icon>
                                        <ion-badge
                                            *ngIf="itemW.processDate===null && (itemW.status===null || ['END','STOP'].indexOf(itemW.status) > -1)"
                                            color="medium">{{'lang.' + itemW.mode + 'User' | translate}}</ion-badge>
                                    </span>
                                </ng-container>
                            </p>
                        </ion-title>
                    </ion-toolbar>
                    <ion-item-sliding #slidingItem (ionDrag)="onSliding($event, element.id)">
                        <ion-item lines="none" style="margin-bottom: -10px;">
                            <ion-icon *ngIf="element.state == 'PROG'" color="primary" slot="start"
                                name="hourglass-outline">
                            </ion-icon>
                            <ion-icon *ngIf="element.state == 'STOP'" color="danger" slot="start"
                                name="hand-left-outline">
                            </ion-icon>
                            <ion-icon *ngIf="element.state == 'VAL'" color="success" slot="start"
                                name="thumbs-up-outline">
                            </ion-icon>
                            <ion-icon *ngIf="element.state == 'REF'" color="danger" slot="start"
                                name="thumbs-down-outline">
                            </ion-icon>
                            <ion-label (click)="goTo(element)" [title]="(element.status !== 'HARD_DEL' ? 'lang.accessDocument': 'lang.cannotAccess') | translate"
                                [ngStyle]="{'cursor': element.status !== 'HARD_DEL' ? 'pointer' : 'not-allowed'}">
                                <p [class.unavailableDoc]="element.state === 'DEL'">
                                    {{element.reference}}
                                </p>
                                <h2 [class.unavailableDoc]="element.state === 'DEL'"
                                    [ngStyle]="{'margin-top': ['HARD_DEL', 'SOFT_DEL'].indexOf(element.status) > -1 ? '-10px' : '', 'margin-bottom': ['HARD_DEL', 'SOFT_DEL'].indexOf(element.status) > -1 ? '-11px' : 'auto'}">{{element.title}} &nbsp;
                                    <button mat-icon-button
                                        [class.deleted]="['HARD_DEL', 'SOFT_DEL'].indexOf(element.status) > -1"
                                        [title]="getTitle(element)">
                                        <ion-icon *ngIf="element?.status === 'SOFT_DEL'" name="remove-circle-outline"></ion-icon>
                                        <ion-icon *ngIf="element?.status === 'HARD_DEL'" name="close-circle-outline"></ion-icon>
                                    </button>
                                </h2>
                                <p *ngIf="element.reason.length > 0" class="primary">
                                    <ng-container *ngFor="let note of element.reason">
                                        <ion-icon name="chatbox-outline"></ion-icon> {{note}}
                                    </ng-container>
                                </p>
                            </ion-label>
                            <ion-buttons slot="end">
                                <ion-button *ngIf="openedLine===element.id" slot="icon-only" fill="clear" shape="round"
                                    (click)="$event.stopPropagation();toggleSlide(slidingItem, element.id)">
                                    <ion-icon color="medium" slot="icon-only" name="arrow-forward-outline"></ion-icon>
                                </ion-button>
                                <ion-button *ngIf="openedLine!==element.id" slot="icon-only" fill="clear" shape="round"
                                    (click)="$event.stopPropagation();toggleSlide(slidingItem, element.id)">
                                    <ion-icon color="medium" slot="icon-only" name="arrow-back-outline"></ion-icon>
                                </ion-button>
                            </ion-buttons>
                        </ion-item>
                        <ion-item-options>
                            <ion-item-option *ngIf="element.state !== 'PROG'" color="primary"
                                (click)="openPromptProof(element)">
                                <ion-icon slot="bottom" name="ribbon-sharp"></ion-icon>
                                {{'lang.download' | translate}}
                            </ion-item-option>
                            <ion-item-option *ngIf="element.status !== 'HARD_DEL'" color="primary"
                                [disabled]="!isValidPrivilege()" (click)="openActions(element)">
                                <ion-icon slot="bottom" name="settings-sharp"></ion-icon>
                                {{'lang.actions' | translate}}
                            </ion-item-option>
                        </ion-item-options>
                    </ion-item-sliding>

                </ion-label>
            </ion-item>
        </ion-virtual-scroll>
    </ion-list>
    <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" [loadingText]="'lang.loadingMoreData' | translate">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>
<ng-template #rightContent>
    <ion-header [translucent]="true">
        <ion-toolbar color="primary">
            <ion-buttons slot="start">
                <ion-back-button></ion-back-button>
            </ion-buttons>
            <ion-title class="ion-text-center">{{ 'lang.filters' | translate }}</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list *ngFor="let filter of filters">
            <ng-container *ngIf="filter.type === 'text'">
                <ion-item>
                    <ion-label color="secondary" position="floating">{{'lang.' + filter.id + 'Search' | translate}}
                    </ion-label>
                    <ion-input [(ngModel)]="filter.val" [value]="filter.val" (keyup.enter)="launchSearch()"
                        (ionChange)="checkInput()"></ion-input>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="filter.type === 'checkbox'">
                <ion-list-header>
                    <ion-label color="secondary">{{'lang.' + filter.id + 'Search' | translate}}</ion-label>
                </ion-list-header>
                <ion-item *ngFor="let val of filter.values;let i=index;">
                    <ion-label>{{val.label | translate}}</ion-label>
                    <ion-checkbox (ngModelChange)="toggleItem(filter, val, !val.selected)" [(ngModel)]="val.selected" [checked]="val.selected"
                        slot="end" [value]="val.id" class="workflowStates">
                    </ion-checkbox>
                </ion-item>
            </ng-container>
            <ng-container *ngIf="filter.type === 'autocompleteUsers'">
                <ion-list-header>
                    <ion-label color="secondary">{{'lang.' + filter.id + 'Search' | translate}}</ion-label>
                </ion-list-header>
                <plugin-autocomplete [currentItems]="filter.val"></plugin-autocomplete>
            </ng-container>
        </ion-list>
    </ion-content>
    <ion-footer class="ion-no-border">
        <div class="ion-text-center" style="background: white;">
            <ion-button color="primary" shape="round" size="large" fill="outline" (click)="onSubmit()">
                <ion-label style="font-size: 13px;">{{'lang.search' | translate}}</ion-label>
            </ion-button>
        </div>
    </ion-footer>
</ng-template>