<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
    [style.background]="task.supplementaryRole ?
    'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
    : 'var(--piece-background-color)'"
    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
    <div class="piece-attach piece-attach-left"></div>
    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>

    <div class="piece-menu" [class]="displayMenu">
        <div>
            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
            matTooltip="Changer le type de cette tuile."
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            <mat-menu #menuChange="matMenu">
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer en Tâche annexe</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
            </mat-menu>
        </div>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
        matTooltip="Effacer le contenu de cette tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
        matTooltip="Supprimer la tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <div class="piece-menu-directioncross">
            <div class="piece-menu-directioncross-left">
                <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left'); editMoveTrace($event,'Task_moveLeft')"
                matTooltip="Décaler la tuile vers la gauche. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
            </div>
            <div class="piece-menu-directioncross-updownarrows">
                <div class="piece-menu-updownarrows-up">
                    <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top'); editMoveTrace($event,'Task_moveTop')"
                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                </div>
                <div class="piece-menu-directioncross-updownarrows-down">
                    <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom'); editMoveTrace($event,'Task_moveBottom')"
                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                </div>
            </div>
            <div class="piece-menu-directioncross-right">
                <mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right'); editMoveTrace($event,'Task_moveRight')"
                matTooltip="Décaler la tuile vers la droite. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            </div>
        </div>
    </div>

    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
        <div class="piece-symbolchoice-header">
            <label>Choisir un symbole de tâche commune :</label>
            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
        </div>
        <div class="piece-symbolchoice-symbols">
            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
        </div>
        <div class="piece-symbolchoice-symbols">
            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
        </div>
    </div>

    <div class="piece-prerequires" [class]="pieceDetailsService.piece == task ? displayPrequires : 'hide'">
        <div class="piece-prerequires-prerequires">
            <label class="piece-prerequires-title">Antécédents</label>
            <div class="piece-prerequires-form">
                <div style="text-align: center;" *ngIf="j == 0">La première tâche de la ligne ne peut pas avoir d'antécédent</div>
                <ng-container *ngIf="hasPossibleAntecedents()">
                    <ng-container *ngFor="let inlineTask of role.tasks">
                        <ng-container *ngFor="let element of inlineTask; let index = index">
                            <div class="piece-prerequires-prerequires-element" *ngIf="element?.identifier && (task.identifier != element?.identifier) && index < j">
                                <input name="antecedent" type="checkbox" [checked]="isCheckedTask(element)" (change)="checkboxChangedTask($event, element)"/>
                                <label for="antecedent">{{element?.identifier}}</label>
                            </div>
                        </ng-container>
                    </ng-container>
                </ng-container>
                <div style="text-align: center;" *ngIf="!hasPossibleAntecedents() && j != 0">Veuillez d'abord entrer des identifiants aux tâches précédentes</div>
            </div>
        </div>
        <div class="piece-prerequires-ressources">
            <label class="piece-prerequires-title">Ressources & Compétences</label>
            <div class="piece-prerequires-form">
                <ng-container *ngFor="let ressource of scenario.ressources">
                    <div class="piece-prerequires-ressources-element" *ngIf="ressource.name">
                        <div class="piece-prerequires-ressources-element-checkbox">
                            <input name="ressource" type="checkbox" (change)="checkboxChangedRessource($event, ressource)" [checked]="isCheckedRessource(ressource)"/>
                            <label for="ressource" [title]="ressource.name">{{ressource.name}}</label>   
                        </div>
                        <div class="piece-prerequires-ressources-element-quantity" *ngIf="isCheckedRessource(ressource)">
                            <select name="ressource" [(ngModel)]="getAssociatePrerequireRessource(ressource).operator">
                                <option><</option>
                                <option><=</option>
                                <option>=</option>
                                <option>>=</option>
                                <option>></option>
                            </select>
                            <input type="text" value="1" [(ngModel)]="getAssociatePrerequireRessource(ressource).quantity"/> 
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngFor="let ressource of role.ressources">
                    <div class="piece-prerequires-ressources-element" *ngIf="ressource.name">
                        <div class="piece-prerequires-ressources-element-checkbox">
                            <input name="ressource" type="checkbox" (change)="checkboxChangedRessource($event, ressource)" [checked]="isCheckedRessource(ressource)"/>
                            <label for="ressource" [title]="ressource.name">{{ressource.name}}</label>   
                        </div>
                        <div class="piece-prerequires-ressources-element-quantity" *ngIf="isCheckedRessource(ressource)">
                            <select name="ressource" [(ngModel)]="getAssociatePrerequireRessource(ressource).operator">
                                <option><</option>
                                <option><=</option>
                                <option>=</option>
                                <option>>=</option>
                                <option>></option>
                            </select>
                            <input type="text" value="1" [(ngModel)]="getAssociatePrerequireRessource(ressource).quantity"/> 
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>
    </div>

    <div class="piece-form">
        <div class="piece-form-top">
            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
            <div class="piece-form-top-title">Tâche</div>
            <mat-icon class="piece-form-top-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
            <mat-icon class="piece-form-top-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>
            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()"
            matTooltip="Indicateur de tâche commune: si cette tâche doit être faite avec un autre rôle, mettez le même symbole sur la tâche de ces deux rôles"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
            </button>    
        </div>
        <textarea class="piece-form-content" [(ngModel)]="task.objective" (change)="editTrace($event,'Task_action')" [style.background-image]="(i == findFirstIndexOfTaskType('normal')[0] && j == findFirstIndexOfTaskType('normal')[1]) ? urlIcon : ''"
            placeholder="Positionner dans l'ordre les balises HTML principales"
            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        <div class="piece-form-bottom">
            <div class="piece-form-bottom-duration"
            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours). Il est conseillé d'utiliser les mêmes unités sur toutes les tuiles pour pouvoir comparer plus facilement les durées des actions."
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()" min="1" (change)="task.duration < 1 ? task.duration = 1 : ''; editTrace($event,'Task_duration')"/>
                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange(); editTrace($event,'Task_duration_unit')">
                    <option value="UT">UT</option>
                    <option value="min">min</option>
                    <option value="tours">tours</option> 
                </select>
            </div>
            <mat-icon class="piece-form-bottom-character" fontIcon="person" *ngIf="task.characters.length > 0"
                [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
                [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
            <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
            matTooltip="Prérequis pour effectuer cette tâche"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                Prérequis
            </button>
        </div>
    </div>
</div>