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

{% block title %}Services{% 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>Services RH</strong>
                </nav>
                <h1>Services RH</h1>
                <p>Gérez l'organisation interne, les responsables et les rattachements 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_services_export', app.request.query.all) }}">
                    <i class="ti ti-file-export" aria-hidden="true"></i>Exporter
                </a>
                {% if is_granted('EMPLOYEE_SERVICE_CREATE') %}
                    <a class="data-button data-button--primary" href="{{ path('employee_settings_services_new', app.request.query.all) }}" data-turbo-frame="frame_modal">
                        <i class="ti ti-plus" aria-hidden="true"></i>Nouveau service
                    </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-sitemap" aria-hidden="true"></i></span>
                <div><span>Total</span><strong>{{ service_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>Actifs</span><strong>{{ service_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>Inactifs</span><strong>{{ service_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>{{ service_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 service, description..." aria-label="Rechercher un service">
                </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' : '' }}>Actifs</option>
                        <option value="0" {{ filters.actif|default('') == '0' ? 'selected' : '' }}>Inactifs</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_services') }}" 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_services_table">
                {% include '@Employee/employee/settings/services/_table.html.twig' with {items: items, salarie_counts: salarie_counts} only %}
            </turbo-frame>
        </section>
    </div>
{% endblock %}