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

{% block title %}Salariés{% 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 class="text-black">Ressources humaines</span>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <span class="text-black-75">Salariés</span>
                </nav>
                <h1>Salariés</h1>
                <p>Gérez les dossiers salariés, leurs rattachements et leur statut RH.</p>
            </div>
            <div class="data-page__actions">
                {% if is_granted('EMPLOYEE_IMPORT') %}
                    <a class="data-button data-button--secondary" href="{{ path('employee_import_index') }}">
                        <i class="ti ti-upload" aria-hidden="true"></i>Importer
                    </a>
                {% endif %}
                {% if is_granted('EMPLOYEE_EXPORT') %}
                    <a class="data-button data-button--secondary" href="{{ path('employee_export') }}">
                        <i class="ti ti-file-export" aria-hidden="true"></i>Exporter
                    </a>
                {% endif %}
                {% if is_granted('EMPLOYEE_CREATE') %}
                    <a class="data-button data-button--primary" href="{{ path('employee_new') }}">
                        <i class="ti ti-plus" aria-hidden="true"></i>Nouveau salarié
                    </a>
                {% endif %}
            </div>
        </div>

        <div class="metric-grid metric-grid--4">
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-users" aria-hidden="true"></i></span>
                <span class="metric-card__label">Total</span>
                <strong class="metric-card__value">{{ employee_stats.total|default(salaries|length) }}</strong>
                <span class="metric-card__caption">salariés suivis</span>
                <span class="metric-card__trend">Dossiers RH</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-circle-check" aria-hidden="true"></i></span>
                <span class="metric-card__label">Actifs</span>
                <strong class="metric-card__value">{{ employee_stats.active|default(0) }}</strong>
                <span class="metric-card__caption">salariés en poste</span>
                <span class="metric-card__trend">Effectif actif</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-user-plus" aria-hidden="true"></i></span>
                <span class="metric-card__label">Onboarding</span>
                <strong class="metric-card__value">{{ employee_stats.onboarding|default(0) }}</strong>
                <span class="metric-card__caption">arrivées en cours</span>
                <span class="metric-card__trend metric-card__trend--warning">À accompagner</span>
            </article>
            <article class="metric-card">
                <span class="metric-card__icon metric-card__icon--muted"><i class="ti ti-circle-x" aria-hidden="true"></i></span>
                <span class="metric-card__label">Inactifs</span>
                <strong class="metric-card__value">{{ employee_stats.inactive|default(0) }}</strong>
                <span class="metric-card__caption">sortis ou archivés</span>
                <span class="metric-card__trend">Historique</span>
            </article>
        </div>

        <section class="data-card" data-controller="data-table">
            {% include '@Employee/employee/_filters.html.twig' %}
            {% include '@Employee/employee/_table.html.twig' with {salaries: salaries} %}
        </section>
    </div>
{% endblock %}