<div class="container">
    <div class="container-appDragScroll" appDragScroll>
        <div class="container-appMouseWheelZoom" appMouseWheelZoom>

            <div class="container-scenario-main">
                <div class="container-scenario-main-gamePieces" [style.z-index]="4">
                    <app-game-educationnal-objective [scenario]="scenario" [gameEducationnalObjective]="this.scenario.educationnalObjective"></app-game-educationnal-objective>
                    <app-game-context [style.z-index]="2" [scenario]="scenario" [gameContext]="this.scenario.context"></app-game-context>
                    <app-game-characters [style.z-index]="3" [scenario]="scenario"></app-game-characters>
                    <app-rules [style.z-index]="4" [scenario]="scenario"></app-rules>
                </div>

                <div class="container-scenario-main-missions">
                    <div class="container-scenario-main-missions-mission" *ngFor="let mission of this.scenario.missions, let missionIndex = index">

                        <div class="container-scenario-chronologie">
                            <div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
                            <div class="container-scenario-chronologie-steps">
                                <div *ngFor="let step of mission.chronologie, let i = index" [style.z-index]="mission.chronologie.length-i">
                                    <app-step *ngIf="step != null" [step]="step" [parent]="mission" [index]="i" [mission]="mission"></app-step>
                                    <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;" *ngIf="step == null">
                                        <button mat-button (click)="addMissionStep(mission, i)"
                                        matTooltip="Ajouter une nouvelle tuile de ce type."
                                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                    </div>
                                </div>
                                <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;">
                                    <button mat-button (click)="addMissionStep(mission, mission.chronologie.length)"
                                    matTooltip="Ajouter une nouvelle tuile de ce type."
                                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                </div>
                            </div>
                        </div>           

                        <div style="display: flex;">

                            <div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
                                <app-educational-objective [educationnalObjective]="mission.educationnalObjective" [scenario]="scenario" [i]="missionIndex"></app-educational-objective>
                                <app-mission-context [style.z-index]="2" [missionContext]="mission.context" [scenario]="scenario" [i]="missionIndex"></app-mission-context>
                            </div>

                            <div class="container-scenario-main-missions-mission-roles" [style.z-index]="2">
                                <div class="container-scenario-main-missions-mission-roles-role" *ngFor="let role of mission.roles, let i = index">

                                    <div style="display: flex; flex-direction: column;">
                                        <div class="container-scenario-main-missions-mission-roles-role-chronologie">
                                            <div class="container-scenario-main-missions-mission-roles-role-chronologie-title">Chronologie du rôle</div>
                                            <div class="container-scenario-main-missions-mission-roles-role-chronologie-steps">

                                                <div *ngFor="let step of role.chronologie, let i = index" [style.z-index]="role.chronologie.length-i">
                                                    <app-step *ngIf="step != null" [step]="step" [parent]="role" [index]="i" [mission]="mission"></app-step>
                                                    <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;" *ngIf="step == null">
                                                        <button mat-button (click)="addRoleStep(mission, role, i)"
                                                        matTooltip="Ajouter une nouvelle tuile de ce type."
                                                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                                    </div>
                                                </div>   
                                                <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;">
                                                    <button mat-button (click)="addRoleStep(mission, role, role.chronologie.length)"
                                                    matTooltip="Ajouter une nouvelle tuile de ce type."
                                                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                                </div>
                                            </div>
                                        </div>

                                        <div style="display: flex; flex-direction: row;">
                                            <app-role [style.z-index]="2" [scenario]="scenario" [role]="role" [mission]="mission" [i]="i" [missionIndex]="missionIndex"></app-role>
                                            <div class="container-scenario-main-missions-mission-roles-role-tasks" [style.z-index]="1">
                                                <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" *ngFor="let tasks of role.tasks, let i = index" [style.z-index]="role.tasks.length+i">
                                                    <div *ngFor="let task of tasks, let j = index" [style.z-index]="tasks.length-j">
                                                        <div *ngIf="task != null">
                                                            <app-task *ngIf="task.type == 'normal'" [task]="task" [scenario]="scenario" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-task>
                                                            <app-annexe-task *ngIf="task.type == 'annexe'" [task]="task" [scenario]="scenario" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-annexe-task>
                                                            <app-random-event *ngIf="task.type == 'event'" [task]="task" [scenario]="scenario" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-random-event>
                                                            <app-optionnal-task *ngIf="task.type == 'optionnal'" [task]="task" [scenario]="scenario" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-optionnal-task>
                                                            <app-final-task *ngIf="task.type == 'final'" [task]="task" [scenario]="scenario" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-final-task>
                                                            <app-repeat-task *ngIf="task.type == 'repeat'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-repeat-task>
                                                        </div>
                                                        <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 400px;" *ngIf="task == null">
                                                            <button mat-button [matMenuTriggerFor]="addTaskMenu"
                                                            matTooltip="Ajouter une nouvelle tuile de ce type."
                                                            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                                            <mat-menu #addTaskMenu="matMenu">
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="addTask(mission, role, i, j, 'normal')">Ajouter une Tâche</button>
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="addTask(mission, role, i, j, 'annexe')">Ajouter une Tâche annexe</button>
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="addTask(mission, role, i, j, 'optionnal')">Ajouter une Tâche optionnelle</button>
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="addTask(mission, role, i, j, 'final')" *ngIf="canCreateFinalOrRepeatTask(tasks, j)">Ajouter une Tâche finale</button>
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bfdaa3'" mat-menu-item (click)="addTask(mission, role, i, j, 'event')">Ajouter un Événement aléatoire</button>
                                                                <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#abbcc6'" mat-menu-item (click)="addTask(mission, role, i, j, 'repeat')" *ngIf="canCreateFinalOrRepeatTask(tasks, j)">Recommencer le tour</button>
                                                            </mat-menu>
                                                        </div>
                                                    </div>
                                                    <div class="container-scenario-main-missions-mission-buttonAdd" style="height: 400px;" *ngIf="dontContainFinalOrRepeatTask(tasks)">
                                                        <button mat-button [matMenuTriggerFor]="addTaskMenu"
                                                        matTooltip="Ajouter une nouvelle tuile de ce type."
                                                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="add"></mat-icon></button>
                                                        <mat-menu #addTaskMenu="matMenu">
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'normal')">Ajouter une Tâche</button>
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'annexe')">Ajouter une Tâche annexe</button>
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'optionnal')">Ajouter une Tâche optionnelle</button>
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'final')">Ajouter une Tâche finale</button>
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bfdaa3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'event')">Ajouter un Événement aléatoire</button>
                                                            <button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#abbcc6'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'repeat')">Recommencer le tour</button>
                                                        </mat-menu>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-sider">
        <div class="container-sider-title">{{getSiderTitle()}}</div>
        <div class="container-sider-elements">
            <app-role-occurence class="container-sider-elements-element" [role]="pieceDetailsService.pieceAsRole()" *ngIf="pieceDetailsService.pieceIsRole()"></app-role-occurence>
            <app-supplementary-task class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" [role]="pieceDetailsService.parentAsRole()" *ngIf="pieceDetailsService.pieceIsTask()"></app-supplementary-task>
            <app-repeat class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-repeat>
            <app-interupt class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-interupt>
            <app-characters class="container-sider-elements-element" [scenario]="scenario" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-characters>
            <app-comments class="container-sider-elements-element" [piece]="pieceDetailsService.piece"></app-comments> 
        </div>
        
    </div>

    <div class="container-settings">
        <div class="container-settings-mode"
        matTooltip="Utilisation dans un template de jeu précis. Contacter gaelle.guigon@imt-nord-europe.fr pour plus d’informations. Non disponible dans cette version."
        matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips"
        [style.background-color]="'lightgray'">
            <input name="unity" type="checkbox" disabled/>
            <label for="unity">Intégrer le jeu sous Unity (WIP)</label>
        </div>
        <div class="container-settings-mode"
        matTooltip="Descriptif de chaque élément de RLG Maker."
        matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips">
            <input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips"/>
            <label for="tooltip">Activer les aides</label>
        </div>
        <button mat-mini-fab color="white" (click)="downloadFile()"
        matTooltip="Télécharger une sauvegarde du scénario."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="download_file"></mat-icon></button>
        <button mat-mini-fab color="white" (click)="selectFile()"
        matTooltip="Importer une sauvegarde du scénario."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="upload-file"></mat-icon></button>
        <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)"> 
    </div>
    <div class="container-zoom">
        <button mat-mini-fab color="white" (click)="zoomIn()"
        matTooltip="Zoomer le scénario."
        matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="zoom_in"></mat-icon></button>
        <button mat-mini-fab color="white" (click)="zoomOut()"
        matTooltip="Dézoomer le scénario."
        matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="zoom_out"></mat-icon></button>
    </div>
</div>