<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="megna" [routerLink]="['/profile', user.username]">
                <mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
            </button>
        </div>
    </div>
</div>
<div class="settings-page">
    <h1>{{title}}</h1>
    <mat-divider></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <div class="container page mt-4">
        <div class="row">
            <div class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 col-xs-12">
                <form class="row row-cols-lg-auto" [formGroup]="settingsForm" (ngSubmit)="submitForm()">
                    <fieldset [disabled]="isSubmitting" class="w-100">
                        <legend [hidden]="true">Informations personnelles</legend>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>Nom d'utilisateur</mat-label>
                                <input matInput type="text" placeholder="Choisissez un nom d'utilisateur" formControlName="username">
                            </mat-form-field>
                        </div>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>eMail</mat-label>
                                <input matInput readonly type="email" placeholder="Indiquez votre adresse email" formControlName="email">
                            </mat-form-field>
                        </div>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>Nom</mat-label>
                                <input matInput type="text" placeholder="Indiquez votre nom" formControlName="lastname">
                            </mat-form-field>
                        </div>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>Prénom</mat-label>
                                <input matInput type="text" placeholder="Indiquez votre prénnom" formControlName="firstname">
                            </mat-form-field>
                        </div>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>Numéro de téléphone</mat-label>
                                <input matInput type="tel" placeholder="Indiquez votre numéro de téléphone" formControlName="phone">
                            </mat-form-field>
                        </div>
                        <div class="col-12">
                            <mat-form-field appearance="fill" class="w-100">
                                <mat-label>Photo de profil</mat-label>
                                <mat-select formControlName="image" [(value)]="user.image">
                                    @for (avatar of avatars; track avatar; let idx = $index) {
                                        <mat-option [value]="avatar">
                                            <img src="{{ avatar }}" alt="Avatar {{ idx + 1 }}" class="avatar">
                                            <span>Image {{ idx + 1 }}</span>
                                        </mat-option>
                                    }
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </fieldset>
                    <fieldset [disabled]="isSubmitting" class="w-100">
                        <legend [hidden]="true">Informations de connexion</legend>
                        <div class="col-12 clearfix">
                            <mat-divider class="mb-3"></mat-divider>
                            <button mat-raised-button color="primary" [disabled]="!settingsForm.valid" type="submit" class="mb-2 float-end">
                                <i class="icosvg-floppy-disk"></i> {{ btnUpdateTitle }}
                            </button>
                            <button mat-stroked-button color="warn" class="me-2 mb-2" type="button" (click)="logout()">
                                <i class="icosvg-switch"></i> {{ btnLogoutTitle }}
                            </button>
                            <button mat-stroked-button color="orange" class="me-2 mb-2" type="button" [routerLink]="['/settings', 'credentials']">
                                <mat-icon aria-label="Modifier le compte" fontIcon="password"></mat-icon> {{ btnPasswordTitle }}
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
