@if (edit() == false) {
    <nz-card style="width:400px;" [nzActions]="[edit, delete]">
        <h2 style="text-align: center; font-weight: bold">Contact n°{{ contact().id }}</h2>
        <p>Nom : {{ contact().lastName + " " + contact().firstName }}</p>
        <p>Rôle : {{ contact().role }}</p>
        <p>Numéro de téléphone : {{ contact().phoneNumber }} </p>
        <p>Email : {{ contact().email }}</p>
        <p>Adresse : {{ contact().address + ", " + contact().city }}</p>

    </nz-card>
    <ng-template #edit>
        <nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
    </ng-template>
    <ng-template #delete>
        <nz-icon (click)="Delete()" nzType="delete" nzTheme="fill" />
    </ng-template>
} @else {
    <nz-card style="width:400px;" [nzActions]="[back, check]">
        <form nz-form nzLayout="horizontal" [formGroup]="contactForm">
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Nom" formControlName="lastname">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Prénom </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Prénom" formControlName="firstname">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Num. Tél. </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Numéro de téléphone" formControlName="phone">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Email </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Email" formControlName="email">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Adresse </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Adresse" formControlName="address">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Ville </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Ville" formControlName="city">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzSpan="5" nzRequired> Rôle </nz-form-label>
                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                    <input nz-input placeholder="Rôle" formControlName="role">
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-card>
    <ng-template #back>
        <nz-icon (click)="Back()" nzType="backward" nzTheme="fill" />
    </ng-template>
    <ng-template #check>
        <nz-icon (click)="submitForm()" nzType="check" nzTheme="outline" />
    </ng-template>
}