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

{% block content %}

      <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" href="{{ path('portail_annonce_add_modal') }}" data-turbo-frame="modal-frame">
                                    Ajouter une annonce
                                    </a>
                                </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" data-controller="annonce-filters" data-annonce-filters-frame-value="annonce-results">

              <div class="col type-card m-4 card" data-annonce-filters-target="card" data-action="click->annonce-filters#toggleCard">
                <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" data-annonce-filters-target="checkbox" data-action="change->annonce-filters#filterChanged">
                    </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" data-annonce-filters-target="card" data-action="click->annonce-filters#toggleCard">
                <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" data-annonce-filters-target="checkbox" data-action="change->annonce-filters#filterChanged">
                        </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" data-annonce-filters-target="card" data-action="click->annonce-filters#toggleCard">
                <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" data-annonce-filters-target="checkbox" data-action="change->annonce-filters#filterChanged">
                        </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" data-annonce-filters-target="card" data-action="click->annonce-filters#toggleCard">
                <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" data-annonce-filters-target="checkbox" data-action="change->annonce-filters#filterChanged">
                        </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" data-annonce-filters-target="card" data-action="click->annonce-filters#toggleCard">
                <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" data-annonce-filters-target="checkbox" data-action="change->annonce-filters#filterChanged">
                        </div>
                    </div>
                    <div class="col-md-10 col-xl-10">
                        <span class="fs-3 text-muted">Recherche</span>
                    </div>
                </div>
            </div>
      
            
            <turbo-frame id="annonce-results" src="{{ path('portail_ajax_annonce') }}">
                Chargement des annonces...
            </turbo-frame>
    
        </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>

{% endblock %}