<app-header></app-header>
<div class="row">
    <div class="col-md-auto">
        <app-side-bar [backgroundColor]="'#5a1e63'"></app-side-bar>
    </div>

<div class="modifContact-form text-center">
    <h3>Modifier ce contact</h3>
    <main class="form-modifContact">
        <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
            
            <div class="form-floating">
            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
            formControlName="couleurFc" value= "{{ listContactInfo.couleur }}"
            [(ngModel)]="listContactInfo.couleur">
            </div>

            <div class="form-floating">
                <input type="text" 
                        class="form-control" 
                        id="floatingInputlastName" 
                        placeholder="" 
                        name="lastName" 
                        formControlName="lastNameFc" value= "{{ listContactInfo.nom }}"
                        [(ngModel)]="listContactInfo.nom">
                <label for="floatingInputlastName">Nom</label>

            </div>
            <div class="form-floating">
                <input type="text" 
                        class="form-control" 
                        id="floatingInputfirstName" 
                        placeholder="" 
                        name="firstName" 
                        formControlName="firstNameFc" value= "{{ listContactInfo.prenom }}"
                        [(ngModel)]="listContactInfo.prenom">
                <label for="floatingInputfirstName">Prénom</label>

            </div>
            <div class="form-floating">
                <input type="text" 
                        class="form-control" 
                        id="floatingInputTelephone" 
                        placeholder="" 
                        name="telephone" 
                        formControlName="telephoneFc" value= "{{ listContactInfo.telephone }}"
                        [(ngModel)]="listContactInfo.telephone">
                <label for="floatingInputfirstName">Téléphone</label>

            </div>
            <div class="form-floating">
                <input type="email" 
                        class="form-control" 
                        id="floatingInput" 
                        placeholder="" 
                        name="email" 
                        formControlName="emailFc" value= "{{ listContactInfo.email }}"
                        [(ngModel)]="listContactInfo.email">
                <label for="floatingInput">Adresse email</label>
            </div>

            <div class="form-floating">
                <input type="date" 
                        class="form-control" 
                        id="floatingInputdateNaissance" 
                        placeholder="" 
                        name="dateNaissance" 
                        formControlName="dateNaissanceFc" 
                        value= "{{ listContactInfo.dateNaissance }}"
                        [(ngModel)]="listContactInfo.dateNaissance">
                <label for="floatingInputfirstName">Date de naissance</label>
            </div>

            <div class="form-floating">
                <input type="text" 
                        class="form-control" 
                        id="floatingInputAdresse" 
                        placeholder="" 
                        name="adresse" 
                        formControlName="adresseFc" value= "{{ listContactInfo.adresse }}"
                        [(ngModel)]="listContactInfo.adresse">
                <label for="floatingInputfirstName">Adresse</label>
            </div>

            <button class="w-100 btn btn-lg btn-secondary" 
                    type="submit" 
                    >Valider</button>

        </form>
    </main>
</div>
<app-footer></app-footer>
</div> 