{% include 'partials/header.html.twig' %}
<style>
    .modal{--bs-modal-zindex:1075;}
    .modal-backdrop{--bs-backdrop-zindex:1070;}


.type-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.type-card.active-type {
  border-color: var(--bs-primary);; /* bleu bootstrap */
}

.secteur-card, .region-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.secteur-card.active-secteur {
  border-color: var(--bs-primary);; /* bleu bootstrap */
}

.region-card.active-region {
  border-color: var(--bs-primary);; /* bleu bootstrap */
}

</style>

    <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>
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>

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

         <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <h5>Prospection</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_prospection', {'id': projet.idtoken})}}" class="p-2">Prospection </a> >
                  Marketplace
                  
                </div>
              </div>
            </div>
          </div>

          <div class="">
            <div class="card-body">

              <section class="pt-md-14 pb-4 pb-md-5">
                <div class="container-fluid">
                  <button class="btn bg-danger-subtle text-danger mb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                    Filtres
                  </button>
                  <div class="row" id="annuaire">            
                  </div>
                </div>
              </section>
              
            </div>
          </div>

        </div>
      </div>
    <script>
      const projetId = "{{projet.idtoken}}";
    </script>
{% include '@Projet/prospection/offcanvas/filtres_offcanvas.html.twig' %}
    <script src="{{ asset('assets/js/projet/prospection_marketplace.js') }}"></script>


{% include 'partials/modal/ajax_modal.html.twig' %}    
{% include '/partials/offcanvas/ajax_offcanvas.html.twig' %}

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