{% extends "base.html.twig" %} {% block content %}
<div class="container-fluid p-0">
  <div class="container pt-5">
    <div class="row">
      <div class="col-lg-3 col-responsive">
        {% include 'shared/menu.html.twig' %}
      </div>
            <div class="col-lg-9">
                <div class="mt-3">
                    <h5 class="card-header-title">Informations personnelles</h5>
                </div>
                {{ form_start(editprofileForm, {'action': path('user_profile'), 'method': 'POST','attr': { 'novalidate': 'novalidate' }}) }} {% for message in app.flashes('success-profil') %}
                <div class="flash-notice text-start py-2">
                    <div class="alert alert-success " role="alert">
                        {{ message }}
                    </div>
                </div>
                {% endfor %}
                <div class="d-flex flex-row bd-highlight mb-4">
                    <label for="pictureLabel" class="bd-highlight col-3 col-form-label form-label align-self-center">Changer
                 Photo</label>
                    <div class="p-2 bd-highlight">
                        <div class="avatar-circle text-center" for="pictureLabel" id="change-picture-profile">
                            {% if app.user.picture is null %}
                            <span class="default-profile-edit px-3 py-2 text-white" data-color="{{app.user.colorProfile}}">{{ app.user.firstName[:1]|upper }}</span> {% else %}
                            <img id="img_preview" class="avatar-img" src="{{asset('images/userprofile/'~ app.user.picture)}}" alt="Image Description"> {% endif %}
                        </div>
                    </div>
                    <div class="p-2 bd-highlight upload-icon align-self-center">
                        <label class="custom-select-pic text-muted" title="Changer photo">
                            <div class="avatar-svg">
                            <svg   width="20" height="20" fill="currentColor" class="bi bi-camera-fill" viewBox="0 0 16 16">
                                <path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                <path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/>
                            </svg>
                         </div>
                         {{ form_errors(editprofileForm.picture) }}
                          {{ form_widget(editprofileForm.picture) }}
                          
                        </label> 
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="firstNameLabel" class="col-sm-3 col-form-label form-label">
            Nom & Prénom *
          </label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <div class="col-sm-6">
                            {{ form_widget(editprofileForm.firstName, { 'attr': {'placeholder': 'Nom*'} }) }}
                            {{ form_errors(editprofileForm.firstName) }}
                            </div>
                            <div class="col-sm-6">
                            {{ form_widget(editprofileForm.lastName, { 'attr': {'placeholder': 'Prenom*'} }) }}
                            {{ form_errors(editprofileForm.lastName)}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="emailLabel" class="col-sm-3 col-form-label form-label">Email *</label>
                    <div class="col-sm-9">
                        {{ form_widget(editprofileForm.mail, { 'attr': {'placeholder': 'Mail*'} }) }} {{ form_errors(editprofileForm.mail) }}
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="phoneLabel" class="col-sm-3 col-form-label form-label">Téléphone</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.numTel, { 'attr': {'placeholder': 'Téléphone'} }) }} {{ form_errors(editprofileForm.numTel) }}
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <label class="col-sm-3 col-form-label form-label">Biographie</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.biography) }} {{ form_errors(editprofileForm.biography) }}
                        </div>
                    </div>
                </div>
                <div class="row mt-4 mb-4">
                    <label class="col-sm-3 col-form-label form-label">Lieu</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.country, { 'attr': {'placeholder': 'Pays'} }) }} {{ form_errors(editprofileForm.country) }} {{ form_widget(editprofileForm.city, { 'attr': {'placeholder': 'Ville'} }) }} {{ form_errors(editprofileForm.city) }} {{ form_widget(editprofileForm.street,
                            { 'attr': {'placeholder': 'Rue'} }) }} {{ form_errors(editprofileForm.street) }}
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <label class="col-sm-3 col-form-label form-label">Adresse</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.adress, { 'attr': {'placeholder': 'Adresse'} }) }} {{ form_errors(editprofileForm.adress) }} {{ form_widget(editprofileForm.zipcode, { 'attr': {'placeholder': 'Code postal'} }) }} {{ form_errors(editprofileForm.zipcode)
                            }}
                        </div>

                    </div>
                </div>
                <div class="row mb-4">
                    <label class="col-sm-3 col-form-label form-label">Diplôme</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.diploma, { 'attr': {'placeholder': 'Diplôme'} }) }} {{ form_errors(editprofileForm.diploma) }} {{ form_widget(editprofileForm.speciality, { 'attr': {'placeholder': 'Spécialité'} }) }} {{ form_errors(editprofileForm.speciality)
                            }} {{ form_widget(editprofileForm.university, { 'attr': {'placeholder': 'Université'} }) }} {{ form_errors(editprofileForm.university) }}

                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Profession</label>
                    <div class="col-sm-9">
                        {{ form_widget(editprofileForm.profession, { 'attr': {'placeholder': 'Profession'} }) }} {{ form_errors(editprofileForm.profession) }}
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Expérience</label>
                    <div class="col-sm-9">
                        {{ form_widget(editprofileForm.experience, { 'attr': {'placeholder': 'Expérience'} }) }} {{ form_errors(editprofileForm.experience) }}
                    </div>
                </div>
                <div class="row mb-4">
                    <label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Objectif</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            {{ form_widget(editprofileForm.professionalGoal, { 'attr': {'placeholder': 'Profession'} }) }} {{ form_errors(editprofileForm.professionalGoal) }} {{ form_widget(editprofileForm.sectorGoal, { 'attr': {'placeholder': 'Secteur'} }) }} {{ form_errors(editprofileForm.sectorGoal)
                            }}
                        </div>
                    </div>
                </div>
                <div class="home-card-footer mt-5 pb-5">
                    <div class="d-flex justify-content-between gap-3">
                        <div class="text-muted fst-italic champ-obligatoire">
                        * champ obligatoire
                        </div>
                        <div class="d-flex justify-content-end gap-3">
                            <button class="btn btn-secondary" type="reset">
                                <svg width="25" height="25" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                </svg>
                            Annuler</button>
                            <button type="submit" class="btn btn-primary">
                                <svg width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                </svg>
                            Modifier</button>
                        </div>
                    </div>
                </div>
                {{ form_end(editprofileForm) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}