{% extends '@App/app.html.twig' %}

{% block title %}Catégories{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    <div class="data-page">
        <div class="data-page__header">
            <div>
                <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                    <span>Configuration RH</span>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <strong>Catégories</strong>
                </nav>
                <h1>Catégories</h1>
                <p>Gérez les catégories socio-professionnelles et classifications utilisées dans les dossiers salariés.</p>
            </div>
            <div class="data-page__actions">
                <a class="data-button data-button--secondary" href="{{ path('employee_settings_index') }}">
                    <i class="ti ti-arrow-left" aria-hidden="true"></i>Retour
                </a>
                <a class="data-button data-button--secondary" href="{{ path('employee_settings_categories_export', app.request.query.all) }}">
                    <i class="ti ti-file-export" aria-hidden="true"></i>Exporter
                </a>
                {% if is_granted('EMPLOYEE_CATEGORY_CREATE') %}
                    <a class="data-button data-button--primary" href="{{ path('employee_settings_categories_new', app.request.query.all) }}" data-turbo-frame="frame_modal">
                        <i class="ti ti-plus" aria-hidden="true"></i>Nouvelle catégorie
                    </a>
                {% endif %}
            </div>
        </div>

        <div class="data-stat-grid">
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--info"><i class="ti ti-tags" aria-hidden="true"></i></span>
                <div><span>Total</span><strong>{{ category_stats.total|default(items|length) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--success"><i class="ti ti-circle-check" aria-hidden="true"></i></span>
                <div><span>Actives</span><strong>{{ category_stats.active|default(0) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--muted"><i class="ti ti-circle-x" aria-hidden="true"></i></span>
                <div><span>Inactives</span><strong>{{ category_stats.inactive|default(0) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--purple"><i class="ti ti-users" aria-hidden="true"></i></span>
                <div><span>Salariés</span><strong>{{ category_stats.employees|default(0) }}</strong></div>
            </article>
        </div>

        <section class="data-card" data-controller="data-table">
            <form class="data-toolbar" method="get">
                <div class="data-search">
                    <i class="ti ti-search" aria-hidden="true"></i>
                    <input name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher par catégorie, description..." aria-label="Rechercher une catégorie">
                </div>
                <div class="data-toolbar__controls">
                    <select name="actif" aria-label="Filtrer par statut">
                        <option value="">Tous les statuts</option>
                        <option value="1" {{ filters.actif|default('') == '1' ? 'selected' : '' }}>Actives</option>
                        <option value="0" {{ filters.actif|default('') == '0' ? 'selected' : '' }}>Inactives</option>
                    </select>
                    <button class="data-icon-button" type="submit" title="Filtrer">
                        <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                    </button>
                    {% if filters|filter(v => v is not empty)|length > 0 %}
                        <a class="data-icon-button" href="{{ path('employee_settings_categories') }}" title="Réinitialiser">
                            <i class="ti ti-x" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                    <div class="data-view-toggle" aria-label="Mode d'affichage">
                        <button class="is-active" type="button" data-data-table-target="tableButton" data-action="data-table#showTable" title="Vue tableau">
                            <i class="ti ti-list" aria-hidden="true"></i>
                        </button>
                        <button type="button" data-data-table-target="gridButton" data-action="data-table#showGrid" title="Vue cartes">
                            <i class="ti ti-layout-grid" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>

            <turbo-frame id="employee_categories_table">
                {% include '@Employee/employee/settings/categories/_table.html.twig' with {items: items, salarie_counts: salarie_counts} only %}
            </turbo-frame>
        </section>
    </div>
{% endblock %}