<div class="banner mat-elevation-z2">
    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
        <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
        <div class="flex-spacer">
            <h3 class="mb-0">{{bannerTitle}}</h3>
            <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
        </div>
        <div class="align-self-center text-end">
            <button mat-raised-button color="warn" routerLink="/settings">
                <mat-icon aria-label="Modifier le compte" fontIcon="settings"></mat-icon> {{ btnSettingsTitle }}
            </button>
        </div>
    </div>
</div>
<div class="profile-page">
    <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"></div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <mat-card class="mt-4">
        <mat-card-content>
            <div class="row mt-2">
                <div class="col-lg-6 col-md-12">
                    <dl class="dl-horizontal mb-0">
                        <dt>Nom:</dt>
                        <dd>{{ user.lastname }}</dd>
                        <dt>Prénom:</dt>
                        <dd>{{ user.firstname }}</dd>
                    </dl>
                </div>
                <div class="col-lg-6 col-md-12">
                    <dl class="dl-horizontal mb-0">
                        <dt>Email:</dt>
                        <dd>{{ user.email }}</dd>
                        <dt>Téléphone:</dt>
                        <dd>{{ user.phone }}</dd>
                    </dl>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
    <mat-card>
        <mat-card-header class="text-bg-primary rounded-top py-2 px-4">
            <div class="flex-fill">
                <mat-card-title>
                    Mes commandes
                </mat-card-title>
            </div>
            <span class="flex-spacer"></span>
            <div class="flex-fill"></div>
        </mat-card-header>
        <mat-card-content>
            <table class="table table-dark table-striped table-condensed mat-elevation-z2">
                <thead>
                    <tr role="row" class="table-dark">
                        <th class="align-middle w-25 ps-4">
                            <div class="text-left">
                                Date
                            </div>
                        </th>
                        <th class="align-middle w-25">
                            <div class="text-left">
                                Numéro
                            </div>
                        </th>
                        <th class="align-middle w-25">
                            <div class="text-left">
                                Statut
                            </div>
                        </th>
                        <th class="align-middle w-25">
                            <div class="text-left">
                                Total
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr role="row" class="align-middle">
                        <td class="cell ps-4">
                            20/04/2025 13:37
                        </td>
                        <td class="cell">
                            #aa2025042013371
                        </td>
                        <td class="cell">
                            <span class="text-green">Terminé</span>
                        </td>
                        <td class="cell">
                            56.00 €
                        </td>
                    </tr>
                    <tr role="row" class="align-middle">
                        <td class="cell ps-4">
                            20/04/2025 13:42
                        </td>
                        <td class="cell">
                            #aa2025042013421
                        </td>
                        <td class="cell">
                            <span class="text-teal">Expédié</span>
                        </td>
                        <td class="cell">
                            224.70 €
                        </td>
                    </tr>
                    <tr role="row" class="align-middle">
                        <td class="cell ps-4">
                            20/04/2025 13:54
                        </td>
                        <td class="cell">
                            #aa2025042013541
                        </td>
                        <td class="cell">
                            <span class="text-red">Annulé</span>
                        </td>
                        <td class="cell">
                            128.80 €
                        </td>
                    </tr>
                    <tr role="row" class="align-middle">
                        <td class="cell ps-4">
                            14/06/2025 13:37
                        </td>
                        <td class="cell">
                            #aa2025061413371
                        </td>
                        <td class="cell">
                            <span class="text-cyan">En cours de préparation</span>
                        </td>
                        <td class="cell">
                            195.30 €
                        </td>
                    </tr>
                    <tr role="row" class="align-middle">
                        <td class="cell ps-4">
                            07/07/2025 14:39
                        </td>
                        <td class="cell">
                            #aa2025070714391
                        </td>
                        <td class="cell">
                            <span class="text-orange">En attente de paiement</span>
                        </td>
                        <td class="cell">
                            64.00 €
                        </td>
                    </tr>
                </tbody>
            </table>
        </mat-card-content>
    </mat-card>
</div>
