<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{title}}</h1>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2 text-end">
            <span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <div class="d-flex">
        <p class="fs-3">{{description}}</p>
    </div>
    <mat-divider class="mt-2 mb-3"></mat-divider>
    <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">
            <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>
                        </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>

                    <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>
                        </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>

                    <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>
                        </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>

                    <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="{{ minValue }}">
                                <mat-icon matSuffix>percent</mat-icon>
                                <mat-hint>excess power in %</mat-hint>
                            </mat-form-field>
                        </div>
                    </div>

                    <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>
</div>
