{% 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">Annonces</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="#addAnnonceModal">
                                    Ajouter une annonce
                                    </a>
                                </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">

              <div class="col type-card m-4 card">
                <div class="row py-2">
                    <div class="col-md-2 col-xl-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input type-filter success" type="checkbox" value="Offre d'emploi">
                    </div>
                    </div>
                    <div class="col-md-10 col-xl-10 align-items-centerjustify-content-center">
                    <span class="fs-3 text-muted">Offre d'emploi</span>
                    </div>
                </div>
            </div>
              <div class="col type-card m-4 card">
                <div class="row py-2">
                    <div class="col-md-2 col-xl-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input type-filter warning" type="checkbox" value="Offre de stage">
                    </div>
                    </div>
                    <div class="col-md-10 col-xl-10">
                    <span class="fs-3 text-muted">Offre de stage</span>
                    </div>
                </div>
                </div>
                <div class="col type-card m-4 card">
                <div class="row py-2 align-items-center justify-content-center">
                    <div class="col-md-2 col-xl-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input type-filter light" type="checkbox" value="Offre d'alternance">
                    </div>
                    </div>
                    <div class="col-md-10 col-xl-10">
                    <span class="fs-3 text-muted">Offre d'alternance</span>
                    </div>
                </div>
                </div>
                <div class="col type-card m-4 card">
                <div class="row py-2">
                    <div class="col-md-2 col-xl-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input type-filter danger" type="checkbox" value="Invitation">
                    </div>
                    </div>
                    <div class="col-md-10 col-xl-10">
                    <span class="fs-3 text-muted">Invitation</span>
                    </div>
                </div>
                </div>
                <div class="col type-card m-4 card">
                <div class="row py-2">
                    <div class="col-md-2 col-xl-2">
                    <div class="form-check form-check-inline ">
                        <input class="form-check-input type-filter info" type="checkbox" value="Recherche">
                    </div>
                    </div>
                    <div class="col-md-10 col-xl-10">
                    <span class="fs-3 text-muted">Recherche</span>
                    </div>
                </div>
                </div>
      
            <div class="row align-items-stretch" id="annonceContainer">

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

<style>

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

.type-card.active-success { border-color: var(--bs-success); }
.type-card.active-warning { border-color: var(--bs-warning); }
.type-card.active-danger  { border-color: var(--bs-danger); }
.type-card.active-info    { border-color: var(--bs-info); }
.type-card.active-light   { border-color: var(--bs-dark); }
.type-card.active-primary { border-color: var(--bs-primary); }

</style>

{% include '@Portail/annonce/portail/modal/new_annonce.html.twig' %}
{% include '/partials/offcanvas/ajax_offcanvas.html.twig' %}
{% include '/partials/modal/ajax_modal.html.twig' %}

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

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