{%- extends 'park/base.html.twig' -%}
{% block importmap %}{{ importmap(['app','job_offer-list']) }}{% endblock %}
{%- set pageTitle -%}<b>Offres d'emploi</b><br/><small class="fw-normal">{{ park.prefixedName }}</small>{% endset %}
{%- block body -%}
    <section class="jobOfferList">
        <div class="container">
            <div class="jobOfferList-header mb-3 mb-lg-5 d-none d-md-block">
                <h1 class="jobOfferList-header-title text-center h2">{{ park.name }} {{ ux_icon('bi:chevron-right', {class:'text-tertiary', height:'18',width:'18', 'aria-label': 'Business Profile'}) }} <b>Offres d'emploi</b></h1>
            </div>
            <div class="jobOfferList-results">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="jobOfferList-results-filter sticky-lg-top mb-4">
                            <a class="jobOfferList-results-filter-title" data-bs-toggle="collapse" href="#collapseFilter" role="button"
                               aria-expanded="{{ jobOfferListFilterFormSubmitted ? 'true':'false' }}" aria-controls="collapseFilter">
                                Filtres
                                {{ ux_icon('bi:chevron-down', {class:'text-white', height:'16',width:'16', 'aria-label': 'Business Profile'}) }}
                            </a>
                            <div class="collapse d-lg-block" id="collapseFilter">
                                {{ include('park/components/jobOfferListFilterForm.default.html.twig',{jobOfferListFilterForm:jobOfferListFilterForm}) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        {% for jobOffer in jobOffers %}
                            <div class="jobOfferList-results-item mb-3 mb-lg-4 position-relative">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="jobOfferList-results-item-title h5 mb-1 ps-3">{{ jobOffer.title }}</h3>
                                        <div class="jobOfferList-results-item-business ps-3">{{ jobOffer.business.name|striptags|raw }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <span class="badge text-bg-primary fs-6">{{ jobOffer.contractType|trans }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <a class="stretched-link" href="{{ path('park_job_offer_show', {'jobOffer': jobOffer.uuidStr}) }}">
                                            {{ ux_icon('bi:chevron-right', {height:'24',width:'24', 'aria-label': 'Business Profile'}) }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
{%- endblock -%}