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

{% block script %}
  {{ parent() }}
  <script src="{{ asset('assets/libs/cropper/dist/cropper.min.js') }}"></script>
{% endblock %}

{% block styles %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('assets/libs/cropper/dist/cropper.min.css') }}">
{% endblock %}

{% block content %}


    <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">
              
              {% include '@User/user/part/notification.html.twig' %}

            </div>

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

{% endblock %}