<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
[class]="pieceDetailsService.piece == step ? 'isActive' : 'border'"
matTooltip="Permet de découper le scénario en grandes étapes."
matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="arrow_back_ios" (click)="moveStep('left')" *ngIf="index > 0"
        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>
        <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>
        <mat-icon fontIcon="arrow_forward_ios" (click)="moveStep('right')"
        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 class="piece-form">
        <div class="piece-form-title">Étape {{getStepNumber()}}</div>
        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="step.comments.length > 0"></mat-icon>
        <textarea [(ngModel)]="step.description" [style.background-image]="index == FirstStepIndex() ? urlIcon : ''"></textarea>
        <div class="piece-form-duration">
            <label for="duration">Durée</label>
            <input name="duration" type="number" [(ngModel)]="step.duration" (input)="durationChange()" min="1" (change)="step.duration < 1 ? step.duration = 1 : ''"/>
            <select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
                <option value="UT">UT</option>
                <option value="min">min</option>
                <option value="tours">tours</option>
            </select>
        </div>
    </div>
</div>