{% include 'partials/header.html.twig' %}
  <div class="body-wrapper">
    <div class="container-fluid">
          <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
              <div class="row align-items-center">
                <div class="col-9">
                  <h4 class="fw-semibold mb-8">Registre de sécurité {{registre.nom}}</h4>
                </div>
                <div class="col-3">
                    <div class="text-center">
                      <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#viewQRCode">
                        <i class="ti ti-qrcode fs-5"></i>Voir le QrCode
                      </button>
                    </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card overflow-hidden">
            
            <div class="d-flex">
              <div class="w-30 d-none d-lg-block border-end user-chat-box">
                <div class="px-4 pt-9 pb-6">
                  <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="d-flex align-items-center">
                      <div class="ms-3">
                        <h6 class="fw-semibold mb-2">Catégories</h6>
                      </div>
                    </div>
                    <div class="dropdown">
                      <a class="text-dark fs-6 nav-icon-hover" href="javascript:void(0)" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ti ti-dots-vertical"></i>
                      </a>
                      <ul class="dropdown-menu" style="">
                        <li>
                          <a class="dropdown-item d-flex align-items-center gap-2" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addCategorieModal">
                            <span>
                              <i class="ti ti-plus fs-4"></i>
                            </span>Ajouter une catégorie
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <form class="position-relative mb-4">
                    <input type="text" class="form-control search-chat py-2 ps-5" id="text-srh" placeholder="Rechercher une catégorie">
                    <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-6 text-dark ms-3"></i>
                  </form>
                </div>
                <div>
                  <div id="categorie-container">
                    
                  </div>
                </div>
              </div>
              <div class="w-70 w-xs-100">
                <div id="document-container" class="chat-box-inner-part h-100">
                  
                </div>
              </div>
              
            </div>
          </div>
</div>
<!-- Modal Ajouter  -->
<div class="modal fade" id="viewQRCode" tabindex="-1" aria-labelledby="viewQRCodeLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewQRCodeLabel">QRCode</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="tab-content">
            <img src="{{asset(registre.qrcode)}}" />
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>


{% include 'partials/modal/ajax_modal_xl.html.twig' %}

<script src="{{ asset('assets/js/bundle/registre/registresecurite.js') }}"></script>
<script>
  const registreId = '{{registre.idtoken}}';

  let interval = setInterval(() => {
      loadCategorie();
      clearInterval(interval);
    }, 500); 
</script>

{% include 'partials/modal/delete_modal.html.twig' %}    
{% include '@Registre/registresecurite/modal/new_categorie.html.twig' %}
{% include '@Registre/registresecurite/modal/new_registre.html.twig' %}
{% include 'partials/footer.html.twig' %}