<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)'"
    [matTooltip]="translate.instant('finalTask_tooltip')"
    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="content_copy" (click)="onClickCopy()"
        [matTooltip]="translate.instant('role_copy_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="content_paste" (click)="onClickPaste()" *ngIf="copyTaskService.task && role != copyTaskService.role && (copyTaskService.task?.type == 'final' || copyTaskService.task?.type == 'repeat' ? canChangeInFinalTask() : true)"
        [matTooltip]="translate.instant('role_paste_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <div>
            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
            [matTooltip]="translate.instant('task_transform_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            <mat-menu #menuChange="matMenu">
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">{{'task_transform_normalTask' | translate}}</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">{{'task_transform_annexeTask' | translate}}</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">{{'task_transform_optionnalTask' | translate}}</button>
            </mat-menu>
        </div>
        <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-symbolchoice" [class]="displaySymbolChoice">
        <div class="piece-symbolchoice-header">
            <label>{{'task_common_label' | translate}}</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)="canUseSymbol('favorite','#d79297') == 'enable' ? setSymbol('favorite','#d79297') : ''" [ngClass]="canUseSymbol('favorite','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="canUseSymbol('diamond','#9ad5ec') == 'enable' ? setSymbol('diamond','#9ad5ec') : ''" [ngClass]="canUseSymbol('diamond','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="canUseSymbol('star','#e9ec54') == 'enable' ? setSymbol('star','#e9ec54') : ''" [ngClass]="canUseSymbol('star','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="canUseSymbol('hexagon','#f5cee3') == 'enable' ? setSymbol('hexagon','#f5cee3') : ''" [ngClass]="canUseSymbol('hexagon','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="canUseSymbol('add','#d3d2d2') == 'enable' ? setSymbol('add','#d3d2d2') : ''" [ngClass]="canUseSymbol('add','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="canUseSymbol('circle','#9ad5ec') == 'enable' ? setSymbol('circle','#9ad5ec') : ''" [ngClass]="canUseSymbol('circle','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="canUseSymbol('eco','#b6cc87') == 'enable' ? setSymbol('eco','#b6cc87') : ''" [ngClass]="canUseSymbol('eco','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="canUseSymbol('play_arrow','#d0bbdb') == 'enable' ? setSymbol('play_arrow','#d0bbdb') : ''" [ngClass]="canUseSymbol('play_arrow','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="canUseSymbol('remove','#8b7e64') == 'enable' ? setSymbol('remove','#8b7e64') : ''" [ngClass]="canUseSymbol('remove','#8b7e64')"></mat-icon>
        </div>
        <div class="piece-symbolchoice-symbols">
            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="canUseSymbol('square','#d79297') == 'enable' ? setSymbol('square','#d79297') : ''" [ngClass]="canUseSymbol('square','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="canUseSymbol('square','#9ad5ec') == 'enable' ? setSymbol('square','#9ad5ec') : ''" [ngClass]="canUseSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="canUseSymbol('square','#e9ec54') == 'enable' ? setSymbol('square','#e9ec54') : ''" [ngClass]="canUseSymbol('square','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="canUseSymbol('square','#f5cee3') == 'enable' ? setSymbol('square','#f5cee3') : ''" [ngClass]="canUseSymbol('square','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="canUseSymbol('square','#d3d2d2') == 'enable' ? setSymbol('square','#d3d2d2') : ''" [ngClass]="canUseSymbol('square','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="canUseSymbol('square','#9ad5ec') == 'enable' ? setSymbol('square','#9ad5ec') : ''" [ngClass]="canUseSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="canUseSymbol('square','#b6cc87') == 'enable' ? setSymbol('square','#b6cc87') : ''" [ngClass]="canUseSymbol('square','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="canUseSymbol('square','#d0bbdb') == 'enable' ? setSymbol('square','#d0bbdb') : ''" [ngClass]="canUseSymbol('square','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="canUseSymbol('square','#8b7e64') == 'enable' ? setSymbol('square','#8b7e64') : ''" [ngClass]="canUseSymbol('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">{{'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">{{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">{{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" [(ngModel)]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
            [matTooltip]="translate.instant('task_identifier_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
            <div class="piece-form-top-title">{{'finalTask_title' | translate}}</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 != '' || task.repeat.limitMissionRepeat) && !unityService.unity_isActive"></mat-icon>
            <span class="piece-form-top-repeat-off" *ngIf="(task.repeat.iteration > 0 || task.repeat.while != '' || task.repeat.limitMissionRepeat) && !unityService.unity_isActive && task.repeat.limitMissionRepeat"></span>
            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()"
            [matTooltip]="translate.instant('task_common_tooltip')"
            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('final')[0] && j == findFirstIndexOfTaskType('final')[1]) ? urlIcon : ''"
            *ngIf="!unityService.unity_isActive"  
            [placeholder]="translate.instant('finalTask_action_placeholder')"
            [matTooltip]="translate.instant('task_action_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        
        <div class="piece-form-content piece-form-content-unity" *ngIf="unityService.unity_isActive">
            <div class="piece-form-content-unity-type">
                <label for="type">{{'task_unity_type_label' | translate}}</label>
                <select name="type" [(ngModel)]="task.typeUnity" (change)="task.resetUnityContent()">
                    <option value="getObject">{{'task_unity_type_getObject' | translate}}</option>
                    <option value="character">{{'task_unity_type_character' | translate}}</option>
                    <option value="combineObjects">{{'task_unity_type_combineObjects' | translate}}</option>
                    <option value="talkWithRole">{{'task_unity_type_talkWithRole' | translate}}</option>
                    <option value="exchangeObjects">{{'task_unity_type_exchangeObjects' | translate}}</option>
                    <option value="depositObject">{{'task_unity_type_depositObject' | translate}}</option>
                    <option value="askToSeeRole">{{'task_unity_type_askToSeeRole' | translate}}</option>
                    <option value="interactObject">{{'task_unity_type_interactObject' | translate}}</option>
                    <option value="other">{{'task_unity_type_other' | translate}}</option>
                </select>
            </div>
            <div class="piece-form-content-unity-typeContent">
                    
                <div class="piece-form-content-unity-typeContent-getObject" *ngIf="task.typeUnity == 'getObject'">
                    <input type="number" [(ngModel)]="task.objectQuantity"/>
                    <select [(ngModel)]="task.object">
                        <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                        <ng-container *ngFor="let ressource of scenario.ressources">
                            <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                        </ng-container>
                        <ng-container *ngFor="let role2 of mission.roles">
                            <ng-container *ngIf="role2 != role">
                                <ng-container *ngFor="let ressource of role2.ressources">
                                    <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </select>                    
                </div>

                <div class="piece-form-content-unity-typeContent-character" *ngIf="task.typeUnity == 'character'">
                    <select [(ngModel)]="task.character">
                        <option [ngValue]="null" selected disabled>{{'task_unity_characterName_label' | translate}}</option>
                        <option *ngFor="let character of scenario.characters" [ngValue]="character">{{character.name}}</option>
                    </select>
                </div>
    
                <div class="piece-form-content-unity-typeContent-combineObjects" *ngIf="task.typeUnity == 'combineObjects'">
                    <div class="piece-form-content-unity-typeContent-combineObjects-element" *ngFor="let element of task.combineObjects, let elementIndex = index">
                        <button mat-button class="piece-form-content-unity-typeContent-button" (click)="removeCombineObject(elementIndex)" *ngIf="task.combineObjects.length > 2"><mat-icon fontIcon="remove"></mat-icon></button>
                        <div class="piece-form-content-unity-typeContent-combineObjects-element-object">
                            <input type="number" [(ngModel)]="element[1]"/>
                            <select [(ngModel)]="element[0]">
                                <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                                <ng-container *ngFor="let ressource of role.ressources">
                                    <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                                </ng-container>
                            </select>                        
                        </div>
                    </div>
                    <button mat-button class="piece-form-content-unity-typeContent-button piece-form-content-unity-typeContent-button-add" (click)="addCombineObject()"><mat-icon fontIcon="add"></mat-icon></button>
                </div>
    
                <div class="piece-form-content-unity-typeContent-talkWithRole" *ngIf="task.typeUnity == 'talkWithRole'">
                    <select [(ngModel)]="task.role">
                        <option [ngValue]="''" selected disabled>{{'task_unity_roleName_label' | translate}}</option>
                        <ng-container *ngFor="let selectableRole of mission.roles">
                            <option *ngIf="selectableRole != role && selectableRole.intitule != ''">{{selectableRole.intitule}}</option>
                        </ng-container>
                    </select>
                </div>
    
                <div class="piece-form-content-unity-typeContent-exchangeObjects" *ngIf="task.typeUnity == 'exchangeObjects'">
                    <div class="piece-form-content-unity-typeContent-exchangeObjects-give">
                        <label>{{'task_unity_exchangeObjects_give_label' | translate}}</label>
                        <div class="piece-form-content-unity-typeContent-exchangeObjects-element" *ngFor="let element of task.giveObjects, let elementIndex = index">
                            <button mat-button class="piece-form-content-unity-typeContent-button" (click)="removeExchangeGiveObject(elementIndex)" *ngIf="task.giveObjects.length > 1"><mat-icon fontIcon="remove"></mat-icon></button>
                            <div class="piece-form-content-unity-typeContent-exchangeObjects-element-object">
                                <input type="number" [(ngModel)]="element[1]"/>
                                <select [(ngModel)]="element[0]">
                                    <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                                    <ng-container *ngFor="let ressource of role.ressources">
                                        <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                                    </ng-container>
                                </select>                        
                            </div>
                        </div>
                        <button mat-button class="piece-form-content-unity-typeContent-button piece-form-content-unity-typeContent-button-add" (click)="addExchangeGiveObject()"><mat-icon fontIcon="add"></mat-icon></button>
                    </div>
    
                    <div class="piece-form-content-unity-typeContent-exchangeObjects-receive">
                        <select [(ngModel)]="task.character">
                            <option [ngValue]="null" selected disabled>{{'task_unity_characterName_label' | translate}}</option>
                            <option *ngFor="let character of scenario.characters" [ngValue]="character">{{character.name}}</option>
                        </select>
                        <label>{{'task_unity_exchangeObjects_receive_label' | translate}}</label>
                        <div class="piece-form-content-unity-typeContent-exchangeObjects-element" *ngFor="let element of task.receiveObjects, let elementIndex = index">
                            <button mat-button class="piece-form-content-unity-typeContent-button" (click)="removeExchangeReceiveObject(elementIndex)" *ngIf="task.receiveObjects.length > 1"><mat-icon fontIcon="remove"></mat-icon></button>
                            <div class="piece-form-content-unity-typeContent-exchangeObjects-element-object">
                                <input type="number" [(ngModel)]="element[1]"/>
                                <select [(ngModel)]="element[0]">
                                    <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                                    <ng-container *ngFor="let ressource of scenario.ressources">
                                        <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                                    </ng-container>
                                </select>                        
                            </div>
                        </div>
                        <button mat-button class="piece-form-content-unity-typeContent-button piece-form-content-unity-typeContent-button-add" (click)="addExchangeReceiveObject()"><mat-icon fontIcon="add"></mat-icon></button>
                    </div>
                </div>
    
                <div class="piece-form-content-unity-typeContent-depositObject" *ngIf="task.typeUnity == 'depositObject'">
                    <input type="number" [(ngModel)]="task.objectQuantity"/>
                    <select [(ngModel)]="task.object">
                        <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                        <ng-container *ngFor="let ressource of role.ressources">
                            <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                        </ng-container>
                    </select>  
                </div>
    
                <div class="piece-form-content-unity-typeContent-askToSeeRole" *ngIf="task.typeUnity == 'askToSeeRole'">
                    <select [(ngModel)]="task.role">
                        <option [ngValue]="''" selected disabled>{{'task_unity_roleName_label' | translate}}</option>
                        <ng-container *ngFor="let selectableRole of mission.roles">
                            <option *ngIf="selectableRole != role && selectableRole.intitule != ''">{{selectableRole.intitule}}</option>
                        </ng-container>
                    </select>
                </div>
    
                <div class="piece-form-content-unity-typeContent-interactObject" *ngIf="task.typeUnity == 'interactObject'">
                    <div class="piece-form-content-unity-typeContent-interactObject-select">
                        <select [(ngModel)]="task.object">
                            <option [ngValue]="null" selected disabled>{{'task_unity_objectName_label' | translate}}</option>
                            <ng-container *ngFor="let ressource of scenario.ressources">
                                <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                            </ng-container>
                            <ng-container *ngFor="let role2 of mission.roles">
                                <ng-container *ngFor="let ressource of role2.ressources">
                                    <option [ngValue]="ressource" *ngIf="ressource.type == 'ressource'">{{ressource.name}}</option>
                                </ng-container>
                            </ng-container>
                        </select>                         
                    </div>
     
                    <div class="piece-form-content-unity-typeContent-interactObject-name">
                        <input name="interactionName" type="text" [(ngModel)]="task.interactionName" [placeholder]="translate.instant('task_unity_interactName_placeholder')"/>
                    </div>
                </div>
    
                <div class="piece-form-content-unity-typeContent-other" *ngIf="task.typeUnity == 'other'">
                    <textarea [(ngModel)]="task.other"></textarea>
                </div>
            </div>
            
            <div class="piece-form-content-unity-infos">
                <div class="piece-form-content-unity-infos-name">
                    <label for="name">{{'task_unity_name_label' | translate}}</label>
                    <input name="name" type="text" [(ngModel)]="task.name"/>
                </div>
                <div class="piece-form-content-unity-infos-desc">
                    <label for="description">{{'task_unity_desc_label' | translate}}</label>
                    <textarea name="description" [(ngModel)]="task.objective"></textarea>
                </div>  
            </div>
        </div>
            
        <div class="piece-form-bottom">
            <div class="piece-form-bottom-duration"
            [matTooltip]="translate.instant('task_duration_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()" min="0" (change)="task.duration < 0 ? task.duration = 0 : ''; editTrace($event,'Task_duration')"/>
                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange(); editTrace($event,'Task_duration_unit')">
                    <option value="UT">{{'task_duration_ut' | translate}}</option>
                    <option value="min">{{'task_duration_min' | translate}}</option>
                    <option value="tours">{{'task_duration_turn' | translate}}</option> 
                </select>
            </div>
            <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-bottom-prerequires" (click)="changeDisplayPrerequires()"
            [matTooltip]="translate.instant('task_prerequire_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                {{'task_prerequire_label' | translate}}
            </button>
        </div>
    </div>
</div>