<h2 mat-dialog-title class="bg-navy-light text-white border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
    Saut n° {{jump.numero}}<span class="flex-spacer"></span>
    <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
</h2>
<mat-dialog-content>
    <div class="container">
        <div class="d-flex border-bottom border-light-subtle pb-2 mb-3">
            <div class="flex-fill">
                <h5>Le {{ jump.date | date: 'dd/MM/yyyy' }} à {{ jump.lieu }} {{ jump.zone ? jump.zone : jump.oaci }} :</h5>
            </div>
            <span class="flex-spacer"></span>
            <div class="align-self-center me-2">
                <span class="text-accent fs-5">{{ jump.categorie }}</span>
                @if (jump.module) {
                    <span class="fs-5 mx-2">/</span>
                    <span class="text-muted fs-5">{{ jump.module }}</span>
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <dl class="dl-horizontal">
                    <dt>Aeronef:</dt>
                    <dd>{{ jump.aeronef }} {{ jump.imat }}</dd>
                    <dt>Voile:</dt>
                    <dd>{{ jump.voile }} {{ jump.taille }} ft<sup>2</sup></dd>
                    @if (jump.programme) {
                        <dt>Programme:</dt>
                        <dd>{{ jump.programme }}</dd>
                    }
                </dl>
            </div>
            <div class="col-lg-6 col-md-12">
                <dl class="dl-horizontal">
                    @if (!jump.x2data) {
                    <dt>Hauteur:</dt>
                    <dd>{{ jump.hauteur }} m</dd>
                    <dt>Déploiement:</dt>
                    <dd>{{ jump.deploiement }} m</dd>
                    }
                    @for (file of jump.files; track file) {
                    <dt>Fichier {{ file.type }}</dt>
                    <dd>{{ file.name }}</dd>
                    }
                </dl>
            </div>
        </div>
        <mat-divider></mat-divider>
        @if (jump.x2data) {
            <div class="row my-3">
                <div class="col-sm-4 col-xs-12 text-center">
                    <h6>Hauteur</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.exit }} m</span>
                </div>
                <div class="col-sm-4 col-xs-12 text-center">
                    <h6 class="d-flex justify-content-center"><mat-icon fontIcon="timer" class="me-1 fs-5"></mat-icon> Durée de la chute</h6>
                    <span class="text-primary fw-medium fs-5">{{formatDuration(jump.x2data.duration.freeFall)}}</span>
                </div>
                <div class="col-sm-4 col-xs-12 text-center">
                    <h6>Déploiement</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.deployment }} m</span>
                </div>
            </div>
            <div class="row my-4">
                <div class="{{ jump.accessoires ? 'col-sm-6 ' : '' }}col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-1"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
                    @for (sautant of jump.sautants; track sautant) {
                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
                        {{ sautant }}
                    </span>
                    }
                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
                        {{ jump.author.username }}
                    </span>
                </div>
                @if (jump.accessoires) {
                <div class="col-sm-6 col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="auto_awesome" class="me-1"></mat-icon> Accessoires</h5>
                    <span class="badge rounded-pill bg-navy-light mb-2 me-1 pe-3 py-1 fw-normal">
                        <mat-icon class="align-middle me-1" fontIcon="auto_awesome"></mat-icon>
                        {{ jump.accessoires }}
                    </span>
                </div>
                }
            </div>

            <div class="row my-3">
                <div class="col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse en chute</h5>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Max Verticale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Max Horizontale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Moyenne Verticale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Moyenne Horizontale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
            </div>
            <mat-divider></mat-divider>

            <div class="row mt-4 mb-3">
                <div class="col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse sous voile</h5>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Max Verticale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Max Horizontale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Moyenne Verticale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Moyenne Horizontale</h6>
                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
                </div>
            </div>
            <mat-divider></mat-divider>

            <div class="row mt-3">
                <div class="col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="square_foot" class="me-1"></mat-icon> Finesse</h5>
                </div>
                <div class="col-sm-6 col-xs-12 text-center">
                    <h6>Finesse en chute</h6>
                </div>
                <div class="col-sm-6 col-xs-12 text-center">
                    <h6>Finesse sous voile</h6>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Finesse Max</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.max | number : '1.2-2' }}</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Finesse Moyenne</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.avg | number : '1.2-2' }}</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Finesse Max</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.max | number : '1.2-2' }}</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Finesse Moyenne</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.avg | number : '1.2-2' }}</span>
                </div>
            </div>
            <mat-divider></mat-divider>

            <div class="row my-3">
                <div class="col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="straighten" class="me-1"></mat-icon> Distance</h5>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Distance au largage</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.exitFromLandingZone| number : '1.0-0' }} m</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6 class="d-flex justify-content-center"><mat-icon fontIcon="timer" class="me-1 fs-5"></mat-icon> Durée sous voile</h6>
                    <span class="text-primary fw-medium fs-5">{{formatDuration(jump.x2data.duration.underCanopy)}}</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Distance totale</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalFlying | number : '1.0-0' }} m</span>
                </div>
                <div class="col-sm-3 col-xs-12 text-center">
                    <h6>Distance horizontale</h6>
                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalHorizontal | number : '1.0-0' }} m</span>
                </div>
            </div>
            <mat-divider></mat-divider>
        }
        @else {
            <div class="row my-4">
                <div class="col-xs-12 text-center">
                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-1"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
                    @for (sautant of jump.sautants; track sautant) {
                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
                        {{ sautant }}
                    </span>
                    }
                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
                        {{ jump.author.username }}
                    </span>
                </div>
            </div>
            <mat-divider></mat-divider>
            <div class="d-flex justify-content-center my-3 fs-5"><mat-icon fontIcon="satellite_alt" class="me-2"></mat-icon> Aucune donnée GPS</div>
            <mat-divider></mat-divider>
        }
    </div>
</mat-dialog-content>
<mat-dialog-actions>
    <span class="flex-spacer"></span>
    <button mat-button (click)="closeDialog()" class="me-1">Fermer</button>
</mat-dialog-actions>
