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

<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" data-bs-toggle="modal" data-bs-target="#addOffreModal">
                                    Ajouter une offre
                                    </a>
                                </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <button class="btn bg-danger-subtle text-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                Filtres
            </button>

            <div class="row">
                      
                <div class="row align-items-stretch mt-4" id="offreContainer">

                    
                
                </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>


{% include '@Marketplace/offre/portail/modal/new_offre.html.twig' %}
{% include '/partials/offcanvas/ajax_offcanvas.html.twig' %}
{% include '/partials/modal/ajax_modal.html.twig' %}
{% include '@Marketplace/offre/portail/offcanvas/filtres_offcanvas.html.twig' %}

<script src="{{ asset('assets/js/app/offre.js') }}"></script>

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