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

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>

    <div class="piece-form">
        <div class="piece-form-character-create"
        [matTooltip]="translate.instant('char_create_tooltip')"
        matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
            <div class="piece-form-title">{{'char_create_title' | translate}}</div>
            <div class="piece-form-character-create-top">
                <mat-icon fontIcon="person_add"></mat-icon>
                <div class="piece-form-character-create-top-name">
                    <label for="name">{{'char_name_label' | translate}}</label>
                    <input name="name" type="text" [(ngModel)]="newCharacter.name" (change)="editTrace($event,'newCharacter_name')"/>
                </div>
            </div>
            <div class="piece-form-create-infos">
                <div class="piece-form-character-create-infos-description">
                    <label for="description">{{'char_description_label' | translate}}</label>
                    <textarea class="background" name="description" [(ngModel)]="newCharacter.description" (change)="editTrace($event,'newCharacter_description')"></textarea>
                </div>

                <div class="piece-form-character-create-infos-color">
                    <label for="color">{{'char_color_label' | translate}}</label>
                    <input name="color" type="color" [(ngModel)]="newCharacter.color" (change)="editTrace($event,'newCharacter_color')"/>
                </div>
            </div>
            <button mat-button (click)="createCharacter()">{{'char_button_create' | translate}}</button>
        </div>   
        <div class="piece-form-character-characters"  *ngIf="scenario.characters.length > 0" >
            <div class="piece-form-title">{{'chars_title' | translate}}</div>
            <div class="piece-form-character-characters-character" *ngFor="let character of scenario.characters; let index = index" [style]="index == 0? '' : 'border-top: solid black 1px;'"
            [matTooltip]="translate.instant('char_tooltip')"
            matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <div class="piece-form-character-create-top">
                    <mat-icon fontIcon="person"></mat-icon>
                    <div class="piece-form-character-create-top-name">
                        <label for="name">{{'char_name_label' | translate}}</label>
                        <input name="name" type="text" [(ngModel)]="character.name" (change)="editTrace($event,'Character_['+index+']_name')"/>
                    </div>
                </div>
                <div class="piece-form-create-infos">
                    <div class="piece-form-character-create-infos-description">
                        <label for="description">{{'char_description_label' | translate}}</label>
                        <textarea name="description" [(ngModel)]="character.description" (change)="editTrace($event,'Character_['+index+']_description')"></textarea>
                    </div>

                    <div class="piece-form-character-create-infos-color">
                        <label for="color">{{'char_color_label' | translate}}</label>
                        <input name="color" type="color" [(ngModel)]="character.color" (change)="editTrace($event,'Character_['+index+']_color')"/>
                    </div>
                </div>
                <button mat-button (click)="deleteCharacter(index)">{{'char_button_delete' | translate}}</button>
            </div>
        </div>     
    </div>
</div>