<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-button disabled>
                <ion-icon slot="icon-only" name="list-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title class="ion-text-center">{{'lang.circuit' | translate}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content (click)="resetVisaUsersList();">
    <ng-container *ngIf="editMode">
        <ion-item lines="none">
            <ion-searchbar #searchInput [(ngModel)]="visaUsersSearchVal" [placeholder]="'lang.searchUser' | translate"
                (ionChange)="getVisaUsers($event)" (ionFocus)="visaUsersSearchVal=''"></ion-searchbar>
            <ion-buttons slot="end">
                <ion-button fill="clear" slot="icon-only" shape="round" color="primary"
                    (click)="openVisaWorkflowModels($event)" [title]="'Modèles de circuit'">
                    <ion-icon slot="icon-only" name="albums-outline"></ion-icon>
                </ion-button>
            </ion-buttons>
        </ion-item>
        <ion-list *ngIf="visaUsersList.length > 0"
            style="position: absolute;z-index: 2;width: 100%;box-shadow: 0 4px 2px -2px gray;">
            <ion-item *ngFor="let user of visaUsersList">
                <ion-checkbox color="primary" slot="start" [value]="user"
                    (ionChange)="addUser($event.detail.value, searchInput)"></ion-checkbox>
                <ion-label>{{ user.firstname }} {{ user.lastname }}</ion-label>
                <ion-note slot="end">{{ user.email }}</ion-note>
            </ion-item>
        </ion-list>
    </ng-container>
    <ion-list *ngIf="visaWorkflow.length === 0">
        <ion-item lines="none">
            <ion-label class="ion-text-center" color="medium">{{'lang.noUserInWorkflow' | translate}}</ion-label>
        </ion-item>
    </ion-list>
    <ion-reorder-group (ionItemReorder)="doReorder($event)" [disabled]="!editMode">
        <ion-item class="no-ripple" *ngFor="let diffusion of visaWorkflow;let i=index"
            [class.current]="diffusion.current">
            <ion-reorder slot="start"></ion-reorder>
            <ion-avatar slot="start" class="avatar-user" style="cursor: grab;"
                (click)="$event.stopPropagation();">
                <img [src]="diffusion.userPicture">
            </ion-avatar>
            <ion-label>
                <p class="secondary" *ngIf="diffusion.current && diffusion.userId !== authService.user.id">
                    {{'lang.substituteMsg' | translate}}</p>
                <h2 [title]="diffusion.userDisplay" *ngIf="diffusion.userDisplay !== ''">{{diffusion.userDisplay}}</h2>
                <h2 [title]="diffusion.userDisplay" class="danger" *ngIf="diffusion.userDisplay === ''">
                    {{'lang.userDeleted' | translate}}</h2>
                <p *ngIf="diffusion.processDate === null" style="display: flex;justify-content: start;">
                    <ion-select [(ngModel)]="diffusion.role" [title]="'lang.' + diffusion.role + 'User' | translate"
                        interface="popover" [interfaceOptions]="customPopoverOptions"
                        [style.color]="getRole(diffusion.role)?.color" [disabled]="!editMode"
                        style="width: auto;max-width: 100%;padding-left:0px;">
                        <ion-select-option [value]="mode" *ngFor="let mode of diffusion.modes">
                            {{'lang.' + mode + 'User' | translate}}
                        </ion-select-option>
                    </ion-select>
                </p>
                <p *ngIf="diffusion.processDate !== null" [title]="diffusion.processDate" class="processDate">
                    {{'lang.'+diffusion.mode+'ProcessInfo' | translate}}
                    {{diffusion.processDate}}
                </p>
            </ion-label>
            <ion-icon *ngIf="!editMode && diffusion.current" color="success" slot="end" name="caret-back-outline">
            </ion-icon>
            <ion-buttons slot="end">
                <ion-button style="z-index: 9999" *ngIf="editMode" fill="clear" slot="icon-only" shape="round"
                    color="danger" (click)="$event.stopPropagation();removeUser(i)">
                    <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                </ion-button>
            </ion-buttons>
        </ion-item>
    </ion-reorder-group>
</ion-content>