<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()" 
[class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
        [matTooltip]="translate.instant('deletePiece_tooltip')"
        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]="translate.instant('moveLeftFinal_tooltip')"
                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]="translate.instant('moveTop_tooltip')"
                    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]="translate.instant('moveBottom_tooltip')"
                    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]="translate.instant('moveRightFinal_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            </div>
        </div>
    </div>

    <div class="piece-prerequires" [class]="pieceDetailsService.piece == task ? displayPrequires : 'hide'">
        <div class="piece-prerequires-prerequires">
            <label class="piece-prerequires-title">{{'task_prerequire_antecedents_title' | translate}}</label>
            <div class="piece-prerequires-form">
                <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) && element?.type != 'annexe'">
                                <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()">{{'task_prerequire_antecedents_err2' | translate}}</div>
            </div>
        </div>
        <div class="piece-prerequires-ressources">
            <label class="piece-prerequires-title">{{'task_prerequire_ressource_title' | translate}}</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">
        <label>{{'repeatTask_title' | translate}}<br>{{'repeatTask_while' | translate}}</label>
        <textarea [(ngModel)]="task.objective" [(ngModel)]="task.objective" (change)="editTrace($event,'Task_action')" [style.background-image]="(i == findFirstIndexOfTaskType('repeat')[0] && j == findFirstIndexOfTaskType('repeat')[1]) ? urlIcon : ''"
            [placeholder]="translate.instant('repeatTask_action_placeholder')"
            [matTooltip]="translate.instant('task_action_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
            <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
            <mat-icon class="piece-form-repeat" fontIcon="refresh" *ngIf="(task.repeat.iteration > 0 || task.repeat.while != '') && !unityService.unity_isActive"></mat-icon>
            <span class="piece-form-repeat-off" *ngIf="(task.repeat.iteration > 0 || task.repeat.while != '') && !unityService.unity_isActive && task.repeat.limitMissionRepeat == 1"></span>
            <mat-icon class="piece-form-character" fontIcon="person" *ngIf="task.characters.length > 0 && !unityService.unity_isActive"
            [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-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != '' && !unityService.unity_isActive"></mat-icon>
            <button mat-button class="piece-form-prerequires" (click)="changeDisplayPrerequires()"
            [matTooltip]="translate.instant('task_prerequire_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                {{'task_prerequire_label' | translate}}
            </button>
    </div>
</div>
