<div class="container content auth-page">
    <div class="row">
        <div class="col-md-6 offset-md-3 col-xs-12">
            <h1 class="text-xs-center">{{ title }}</h1>
            <p class="text-xs-center">
                <a [routerLink]="['/login']" *ngIf="authType === 'register'">Vous avez déjà un compte ?</a>
                <a [routerLink]="['/register']" *ngIf="authType === 'login'">Vous n'avez pas encore de compte ?</a>
            </p>
            <huapp-list-errors [errors]="errors"></huapp-list-errors>
            <form [formGroup]="authForm" (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">
                            <input matInput type="text" placeholder="Votre adresse email" formControlName="email" required>
                            <mat-error *ngIf="this.authForm.controls['email'].status === 'INVALID'">{{getErrorMessage('email')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Votre nom" formControlName="lastname" required>
                            <mat-error *ngIf="this.authForm.controls['lastname'].status === 'INVALID'">{{getErrorMessage('lastname')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Votre prénom" formControlName="firstname" required>
                            <mat-error *ngIf="this.authForm.controls['firstname'].status === 'INVALID'">{{getErrorMessage('firstname')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Numéro de téléphone" formControlName="phone" required>
                            <mat-error *ngIf="this.authForm.controls['phone'].status === 'INVALID'">{{getErrorMessage('phone')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Pseudo" formControlName="username">
                            <mat-error *ngIf="this.authForm.controls['username'].status === 'INVALID'">{{getErrorMessage('username')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Numéro de licence FFP" formControlName="licence">
                            <mat-error *ngIf="this.authForm.controls['licence'].status === 'INVALID'">{{getErrorMessage('licence')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="text" placeholder="Indiquez le poids en Kg" formControlName="poids">
                            <mat-error *ngIf="this.authForm.controls['poids'].status === 'INVALID'">{{getErrorMessage('poids')}}</mat-error>
                        </mat-form-field>
                    </div>
                </fieldset>
                <fieldset [disabled]="isSubmitting" class="w-100">
                    <legend [hidden]="true">Informations de connexion</legend>
                    <div class="col-12">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="password" placeholder="Mot de passe" formControlName="password" required>
                            <mat-error *ngIf="this.authForm.controls['password'].status === 'INVALID'">{{getErrorMessage('password')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12" *ngIf="authType === 'register'">
                        <mat-form-field appearance="fill" class="w-100">
                            <input matInput type="password" placeholder="Confirmez votre nouveau mot de passe" formControlName="confirmPassword" required>
                            <mat-error *ngIf="this.authForm.controls['confirmPassword'].status === 'INVALID'">{{getErrorMessage('confirmPassword')}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-12">
                        <button mat-raised-button color="primary" [disabled]="!authForm.valid" type="submit" class="float-sm-end">{{ btnTitle }}</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
