<div>
    <app-header></app-header>
    <app-side-bar></app-side-bar>
</div>

<div class="modifContact-form text-center">
    <h1>Modifier ce contact</h1>
    <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 }}">
            </div>

            <div class="form-floating">
                <input type="text" 
                        class="form-control" 
                        id="floatingInputlastName" 
                        placeholder="" 
                        name="lastName" 
                        formControlName="lastNameFc" value= "{{ 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 }}">
                <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 }}">
                <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 }}">
                <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 }}">
                <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 }}">
                <label for="floatingInputfirstName">Adresse</label>
            </div>

            <button class="w-100 btn btn-lg btn-secondary" 
                    type="submit" 
                    [disabled]="modifContactForm.invalid">Valider</button>

        </form>
    </main>
</div> 