{% extends '@App/partials/base.html.twig' %}

{% block content %}

    <div class="body-wrapper" data-controller="user-profile"
         data-user-profile-update-url-value="{{ path('user_update') }}"
         data-user-profile-password-url-value="{{ path('user_update_password') }}">
        <div class="container-fluid">
          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h4 class="mb-4 mb-sm-0 card-title">Utilisateur : {{ user.prenom}} {{ user.nom}}</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="card overflow-hidden">
            <div class="card-body p-0">
              <div class="row align-items-center">
                <div class="col-lg-6 mt-n3">
                  <div class="mt-n5">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                      <div class="d-flex align-items-center justify-content-center round-110">
                        <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden round-100">
                          <img src="" alt="matdash-img" class="w-100 h-100">
                        </div>
                      </div>
                    </div>
                    <div class="text-center">
                      <h5 class="mb-0">{{ user.prenom}} {{ user.nom}}</h5>
                      <p class="mb-0">{{ user.role}}</p>
                    </div>
                  </div>
                </div>
                
              </div>
              <ul class="nav nav-pills user-profile-tab mt-2 bg-primary-subtle rounded-2 rounded-top-0" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link hstack gap-2 rounded-0 fs-12 py-6 active" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="true" tabindex="-1">
                    <i class="ti ti-user-circle fs-5"></i>
                    <span class="d-none d-md-block">Profil</span>
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link hstack gap-2 rounded-0 fs-12 py-6" id="pills-permission-tab" data-bs-toggle="pill" data-bs-target="#pills-permission" type="button" role="tab" aria-controls="pills-permission" aria-selected="false" tabindex="-1">
                    <i class="ti ti-lock fs-5"></i>
                    <span class="d-none d-md-block">Permissions</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div class="tab-content" id="pills-tabContent">

            <div class="tab-pane fade  active show" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
              {% include '@App/user/tab/tab_profil.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pills-compte" role="tabpanel" aria-labelledby="pills-compte-tab" tabindex="0">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card">
                    <div class="card-body wizard-content">
                        <form class="form-horizontal r-separator needs-validation"
                              data-controller="form"
                              data-action="submit->user-profile#submitPassword"
                              novalidate>
                            <div class="card-body">
                                <h5>Compte</h5>
                            </div>
                            <div class="form-group mb-3 p-3 pt-0">
                                <div class="row">
                                <label for="email" class="col-sm-3 text-end  col-form-label">Email</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" id="email" value="{{ user.email }}" disabled>
                                    <input type="hidden" class="form-control" id="userid_password" name="userid" data-field="userid" value="{{ user.id }}">
                                </div>
                                </div>
                            </div>
                            <div class="form-group p-3 pt-0">
                                <div class="row">
                                <label for="motdepasse" class="col-sm-3 text-end  col-form-label">Mot de passe</label>
                                <div class="col-sm-9">
                                    <div class="input-group mb-3">
                                        <input type="password" class="form-control" id="motdepasse" name="motdepasse" data-field="motdepasse" data-user-profile-target="password" data-action="input->user-profile#validatePassword" required>
                                        <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-profile#togglePassword" data-user-profile-target="togglePassword"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="form-group p-3 pt-0">
                                <div class="row mt-3">
                                <label for="confirmationmotdepasse" class="col-sm-3 text-end  col-form-label">Confirmation du mot de passe</label>
                                <div class="col-sm-9">
                                    <div class="input-group mb-3">
                                        <input type="password" class="form-control" id="confirmationmotdepasse" data-user-profile-target="passwordConfirm" data-action="input->user-profile#validatePassword" required>
                                        <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-profile#togglePasswordConfirm" data-user-profile-target="togglePasswordConfirm"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                                    </div>
                                    <div class="invalid-feedback">Ces deux mots de passe ne sont pas identiques</div>
                                </div>
                                </div>
                            </div>

                            <div class="p-3">
                                <div class="form-group text-end">
                                    <button type="submit" class="btn btn-primary" id="btnEnregistrerCompte" data-user-profile-target="passwordSubmit" disabled>
                                        Enregistrer
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                  
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="pills-permission" role="tabpanel" aria-labelledby="pills-permission-tab" tabindex="0">
              {% include '@App/user/tab/tab_permission.html.twig' %}
            </div>

            
          </div>
        </div>
      </div>
</div>

{% endblock %}