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

{% block content %}


<style>
    .modal{--bs-modal-zindex:1075;}
    .modal-backdrop{--bs-backdrop-zindex:1070;}
</style>
    <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">
                        <div class="d-sm-flex align-items-center justify-space-between">
                            <h4 class="fs-7 fw-bolder mb-4 mb-sm-0 card-title">Offres</h4>
                            <nav aria-label="breadcrumb" class="ms-auto">
                                <ol class="breadcrumb">
                                <li class="breadcrumb-item d-flex align-items-center">
                                    <a class="btn btn-rounded btn-outline-primary" href="{{ path('portail_offre_modal') }}" data-turbo-frame="modal-frame">
                                    Ajouter une offre
                                    </a>
                                </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div data-controller="offre-filters" data-offre-filters-frame-value="offre-results">
              <button class="btn bg-danger-subtle text-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                  Filtres
              </button>

              {% include '@Portail/offre/portail/offcanvas/filtres_offcanvas.html.twig' %}
                      
              <div class="row">
                <turbo-frame id="offre-results" class="row align-items-stretch mt-4" src="{{ path('portail_ajax_offre') }}">
                  Chargement des offres...
                </turbo-frame>
              </div>
    
            </div>
        </div>
    </div>
<style>

.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 {
  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 */
}
</style>

<div class="offcanvas offcanvas-40 offcanvas-end" tabindex="-1" id="offreOffcanvas" data-controller="turbo-offcanvas">
  <turbo-frame id="offcanvas-frame" data-action="turbo:frame-load->turbo-offcanvas#frameLoaded">
  </turbo-frame>
</div>

{% endblock %}