{% include 'partials/header.html.twig' %}

<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
<link href="{{ asset('assets/libs/cropper/dist/cropper.min.css') }}" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>


    <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card overflow-hidden">
            <div class="card-body p-0">
              <div class="row align-items-center">
                <div class="col-lg-12">
                  <div class="">
                    <div class="text-center p-3">
                      <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 justify-content-start 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-notification-tab" data-bs-toggle="pill" data-bs-target="#pills-notification" type="button" role="tab" aria-controls="pills-notification" aria-selected="true" tabindex="-1">
                    <i class="ti ti-bell-ringing fs-5"></i>
                    <span class="d-none d-md-block">Préférences & Notifications</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 '@User/user/part/profil.html.twig' %}

            </div>

            <div class="tab-pane fade" id="pills-notification" role="tabpanel" aria-labelledby="pills-notification-tab" tabindex="0">
              

            </div>

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

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Initialisation pour les éléments déjà dans le DOM
    $('.select2').select2();
    });

    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }

</script>

<script src="{{ asset('assets/js/user/user_profil.js') }}"></script>
<script src="{{ asset('assets/js/user/notification_user.js') }}"></script>

</div>

{% include 'partials/footer.html.twig' %}