<mat-card class="my-3">
    <mat-card-header class="d-flex rounded-top bg-navy-light text-bg-navy-light py-2 px-3">
        <div class="flex-fill">
            <mat-card-title>
                {{ title }}
            </mat-card-title>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center text-end">
            <span class="fs-5 font-light">{{ subtitle }}</span>
        </div>
    </mat-card-header>
    <mat-card-content class="table-responsive p-0">
        <form class="d-flex" [formGroup]="raidsForm" (ngSubmit)="submitForm()">
            <mat-form-field appearance="outline" class="mt-2 me-3" color="warn">
                <mat-label>Choisissez une date</mat-label>
                <input matInput [matDatepicker]="datepicker" formControlName="startTime" (dateChange)="onDateChange()" required
                    cdkFocusInitial />
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
                <mat-datepicker #datepicker>
                    <mat-datepicker-actions>
                        <button mat-button matDatepickerCancel>Annuler</button>
                        <button mat-raised-button color="warn" matDatepickerApply>Appliquer</button>
                    </mat-datepicker-actions>
                </mat-datepicker>
            </mat-form-field>
            <mat-form-field appearance="outline" class="mt-2 me-2" color="warn">
                <mat-label>Duration</mat-label>
                <input matInput formControlName="duration" required />
                <mat-hint>Stage duration in hour</mat-hint>
            </mat-form-field>
        </form>
        <mat-stepper headerPosition="top" #stepper>
            <mat-step state="timeline">
                <ng-template matStepLabel>Stage 1</ng-template>
                <div class="d-flex mt-3">
                    <div class="flex-fill">
                        <h2 class="mb-1">Stage 1</h2>
                        <h4 class="mb-1">
                            From {{ getStagesTime(0).startTime | date: 'dd/MM HH:mm' }}
                            to  {{ getStagesTime(0).endTime | date: 'dd/MM HH:mm' }}
                        </h4>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center me-2 text-end">
                        <h4 class="mb-1">Power limit: 320k</h4>
                    </div>
                </div>
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr role="row" class="bg-gray-500 text-bg-primary">
                            <th scope="col" class="align-middle w-auto ps-4">
                                <div class="text-start">
                                    #
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="d-flex align-items-center justify-content-end">
                                    Date
                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Member
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Level
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Damage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Stage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Power
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto pe-4">
                                <div class="text-end">
                                    Variation
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (raid of getRaidsLog(1); track raid; let index = $index) {
                        <tr role="row" class="align-middle text-{{ raid.variation.color }}">
                            <td class="cell text-start ps-4">
                                {{ (index+1) }}
                            </td>
                            <td class="cell font-monospace text-end">
                                <span class="me-3">{{ raid.startTime + '000' | date: 'dd/MM HH:mm:ss' }}</span>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.userName }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                {{ raid.level | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                <div class="d-flex align-items-center justify-content-end">
                                    @if (raid.damage["2"] > 0) {
                                        <mat-icon fontIcon="arrow_upward" color="purple" class="me-2 icon-xxsmall" matTooltip="{{ raid.damage['1'] | number : '1.0' }} + {{ raid.damage['2'] | number : '1.0' }}"></mat-icon>
                                    }
                                    {{ (raid.damage["1"] + raid.damage["2"]) | number : '1.0' }}
                                </div>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.stage.name }}: {{ (raid.stage.maxPower / 1000) | number : '1.0' }}k
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.power | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end pe-4">
                                <span class="ms-3" [matTooltip]="raid.tooltip">
                                    {{ raid.variation.percent | number : '1.0-2' }}%
                                </span>
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
                <div class="border-top border-light pt-2">
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </mat-step>
            <mat-step state="timeline">
                <ng-template matStepLabel>Stage 2</ng-template>
                <div class="d-flex mt-3">
                    <div class="flex-fill">
                        <h2 class="mb-1">Stage 2</h2>
                        <h4 class="mb-1">
                            From {{ getStagesTime(1).startTime | date: 'dd/MM HH:mm' }}
                            to  {{ getStagesTime(1).endTime | date: 'dd/MM HH:mm' }}
                        </h4>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center me-2 text-end">
                        <h4 class="mb-1">Power limit: 500k</h4>
                    </div>
                </div>
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr role="row" class="bg-gray-500 text-bg-primary">
                            <th scope="col" class="align-middle w-auto ps-4">
                                <div class="text-start">
                                    #
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="d-flex align-items-center justify-content-end">
                                    Date
                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Member
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Level
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Damage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Stage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Power
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto pe-4">
                                <div class="text-end">
                                    Variation
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (raid of getRaidsLog(2); track raid; let index = $index) {
                        <tr role="row" class="align-middle text-{{ raid.variation.color }}">
                            <td class="cell text-start ps-4">
                                {{ (index+1) }}
                            </td>
                            <td class="cell font-monospace text-end">
                                <span class="me-3">{{ raid.startTime + '000' | date: 'dd/MM HH:mm:ss' }}</span>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.userName }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                {{ raid.level | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                <div class="d-flex align-items-center justify-content-end">
                                    @if (raid.damage["2"] > 0) {
                                        <mat-icon fontIcon="arrow_upward" color="purple" class="me-2 icon-xxsmall" matTooltip="{{ raid.damage['1'] | number : '1.0' }} + {{ raid.damage['2'] | number : '1.0' }}"></mat-icon>
                                    }
                                    {{ (raid.damage["1"] + raid.damage["2"]) | number : '1.0' }}
                                </div>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.stage.name }}: {{ (raid.stage.maxPower / 1000) | number : '1.0' }}k
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.power | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end pe-4">
                                <span class="ms-3" [matTooltip]="raid.tooltip">
                                    {{ raid.variation.percent | number : '1.0-2' }}%
                                </span>
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
                <div class="border-top border-light pt-2">
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </mat-step>
            <mat-step state="timeline">
                <ng-template matStepLabel>Stage 3</ng-template>
                <div class="d-flex mt-3">
                    <div class="flex-fill">
                        <h2 class="mb-1">Stage 3</h2>
                        <h4 class="mb-1">
                            From {{ getStagesTime(2).startTime | date: 'dd/MM HH:mm' }}
                            to  {{ getStagesTime(2).endTime | date: 'dd/MM HH:mm' }}
                        </h4>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center me-2 text-end">
                        <h4 class="mb-1">No power limit</h4>
                    </div>
                </div>
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr role="row" class="bg-gray-500 text-bg-primary">
                            <th scope="col" class="align-middle w-auto ps-4">
                                <div class="text-start">
                                    #
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="d-flex align-items-center justify-content-end">
                                    Date
                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Member
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Level
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Damage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Stage
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Power
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto pe-4">
                                <div class="text-end">
                                    Variation
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (raid of getRaidsLog(3); track raid; let index = $index) {
                        <tr role="row" class="align-middle text-{{ raid.variation.color }}">
                            <td class="cell text-start ps-4">
                                {{ (index+1) }}
                            </td>
                            <td class="cell font-monospace text-end">
                                <span class="me-3">{{ raid.startTime + '000' | date: 'dd/MM HH:mm:ss' }}</span>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.userName }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                {{ raid.level | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end {{ raid.damage['2'] > 0 ? 'text-purple' : '' }}">
                                <div class="d-flex align-items-center justify-content-end">
                                    @if (raid.damage["2"] > 0) {
                                        <mat-icon fontIcon="arrow_upward" color="purple" class="me-2 icon-xxsmall" matTooltip="{{ raid.damage['1'] | number : '1.0' }} + {{ raid.damage['2'] | number : '1.0' }}"></mat-icon>
                                    }
                                    {{ (raid.damage["1"] + raid.damage["2"]) | number : '1.0' }}
                                </div>
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.stage.name }}: {{ (raid.stage.maxPower / 1000) | number : '1.0' }}k
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ raid.power | number : '1.0' }}
                            </td>
                            <td class="cell font-monospace text-end pe-4">
                                <span class="ms-3" [matTooltip]="raid.tooltip">
                                    {{ raid.variation.percent | number : '1.0-2' }}%
                                </span>
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
                <div class="border-top border-light pt-2">
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </mat-step>
            <mat-step state="search">
                <ng-template matStepLabel>Statistics</ng-template>
                <div class="d-flex mt-3">
                    <div class="flex-fill">
                        <h2 class="mb-1">Statistics</h2>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center me-2 text-end">
                        <h4 class="mb-1">variation ≥ {{ minVarPct }}%</h4>
                        <mat-form-field appearance="outline">
                            <mat-label>Variation</mat-label>
                            <input matInput [(ngModel)]="minVarPct" type="number" min="0">
                            <mat-icon matSuffix>percent</mat-icon>
                            <mat-hint>excess power in %</mat-hint>
                        </mat-form-field>
                    </div>
                </div>
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr role="row" class="bg-gray-500 text-bg-primary">
                            <th scope="col" class="align-middle w-auto ps-4">
                                <div class="text-start">
                                    #
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Name
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="text-end">
                                    Fights
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto">
                                <div class="d-flex align-items-center justify-content-end">
                                    Variation moyenne
                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
                                </div>
                            </th>
                            <th scope="col" class="align-middle w-auto pe-4">
                                <div class="text-start ps-2">
                                    []
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (member of getMembers(); track member; let index = $index) {
                        <tr role="row" class="align-middle">
                            <td class="cell text-start ps-4">
                                {{ (index+1) }}
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ member.name }}
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ member.raids.length }}
                            </td>
                            <td class="cell font-monospace text-end">
                                {{ member.raidsInfo.variationAvg | number : '1.0-2' }}%
                            </td>
                            <td class="cell font-monospace text-end">
                                <div class="d-flex justify-content-start">
                                @for (raid of  member.raids; track raid) {
                                    <div class="px-2 text-{{ raid.variation.color }}">
                                        {{ raid.variation.percent | number : '1.2-2' }}%
                                    </div>
                                }
                                </div>
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
                <div class="border-top border-light pt-2">
                    <button mat-button matStepperPrevious>Back</button>
                    <button mat-button (click)="stepper.reset()">Reset</button>
                </div>
            </mat-step>
            <ng-template matStepperIcon="timeline">
                <mat-icon>timeline</mat-icon>
            </ng-template>
            <ng-template matStepperIcon="search">
                <mat-icon>manage_search</mat-icon>
            </ng-template>
        </mat-stepper>
    </mat-card-content>
</mat-card>
