{% set status_map = {
    actif: {label: 'Actif', tone: 'success'},
    en_onboarding: {label: 'Onboarding', tone: 'warning'},
    sorti: {label: 'Sorti', tone: 'muted'},
    archive: {label: 'Archivé', tone: 'muted'}
} %}

<div class="data-table-wrap" data-data-table-target="tableView">
    <table class="data-table">
        <thead>
            <tr>
                <th class="data-table__select"><input type="checkbox" data-data-table-target="checkAll" data-action="data-table#toggleAll" aria-label="Tout sélectionner"></th>
                <th>Salarié</th>
                <th>Contact</th>
                <th>Organisation</th>
                <th>Statut</th>
                <th>Entrée</th>
                <th class="text-end">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for salarie in salaries %}
                {% set photo_path = salarie.photo ? salarie.photo|trim : null %}
                {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
                {% set initials = ((salarie.prenom|default('')|first) ~ (salarie.nom|default('')|first))|upper ?: 'S' %}
                {% set status = status_map[salarie.statut]|default({label: salarie.statut|replace({'_': ' '})|capitalize, tone: 'muted'}) %}
                {% set is_inactive = salarie.statut in ['sorti', 'archive'] %}
                <tr class="data-row {{ is_inactive ? 'is-muted' : '' }}">
                    <td class="data-table__select"><input type="checkbox" data-data-table-target="rowCheckbox" data-action="data-table#toggleRow" aria-label="Sélectionner {{ salarie }}"></td>
                    <td>
                        <div class="data-entity">
                            <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                                {% if avatar_src %}
                                    <img src="{{ avatar_src }}" alt="{{ salarie }}">
                                {% else %}
                                    {{ initials }}
                                {% endif %}
                            </span>
                            <div>
                                <a class="data-entity__title" href="{{ path('employee_show', {id: salarie.id}) }}">{{ salarie }}</a>
                                <span class="data-entity__meta">
                                    <i class="ti ti-id" aria-hidden="true"></i>{{ salarie.matricule ?: 'Sans matricule' }}
                                    {% if salarie.ville %}<span>•</span><i class="ti ti-map-pin" aria-hidden="true"></i>{{ salarie.ville }}{% endif %}
                                </span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="data-main-text">{{ salarie.emailProfessionnel ?: salarie.emailPersonnel ?: '—' }}</div>
                        <div class="data-sub-text">{{ salarie.telephoneProfessionnel ?: salarie.telephonePersonnel ?: salarie.telephone ?: '—' }}</div>
                    </td>
                    <td>
                        <div class="data-main-text">{{ salarie.employeeService ? salarie.employeeService.nom : (salarie.service ?: '—') }}</div>
                        <div class="data-sub-text">{{ salarie.employeeJob ? salarie.employeeJob.nom : (salarie.poste ?: 'Poste non renseigné') }}</div>
                    </td>
                    <td>
                        <div class="data-badge-stack">
                            {% if salarie.typeCollaborateur %}
                                <span class="data-badge data-badge--info">{{ salarie.typeCollaborateur }}</span>
                            {% endif %}
                            <span class="data-badge data-badge--{{ status.tone }}"><i></i>{{ status.label }}</span>
                        </div>
                    </td>
                    <td>
                        <div class="data-main-text">{{ salarie.dateEntree ? salarie.dateEntree|date('d/m/Y') : '—' }}</div>
                        <div class="data-sub-text">{{ salarie.etablissement ? salarie.etablissement.nom : 'Aucun site' }}</div>
                    </td>
                    <td class="text-end">{% include '@Employee/employee/_actions.html.twig' with {salarie: salarie} %}</td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="7">
                        <div class="data-empty">
                            <i class="ti ti-users-off" aria-hidden="true"></i>
                            <strong>Aucun salarié trouvé</strong>
                            <span>Ajustez les filtres ou créez un nouveau dossier salarié.</span>
                            {% if is_granted('EMPLOYEE_CREATE') %}
                                <a class="data-button data-button--primary" href="{{ path('employee_new') }}">Nouveau salarié</a>
                            {% endif %}
                        </div>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="data-grid-view" data-data-table-target="gridView" hidden>
    {% for salarie in salaries %}
        {% set photo_path = salarie.photo ? salarie.photo|trim : null %}
        {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
        {% set initials = ((salarie.prenom|default('')|first) ~ (salarie.nom|default('')|first))|upper ?: 'S' %}
        {% set status = status_map[salarie.statut]|default({label: salarie.statut|replace({'_': ' '})|capitalize, tone: 'muted'}) %}
        <article class="data-grid-card">
            <div class="data-grid-card__header">
                <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                    {% if avatar_src %}
                        <img src="{{ avatar_src }}" alt="{{ salarie }}">
                    {% else %}
                        {{ initials }}
                    {% endif %}
                </span>
                <span class="data-badge data-badge--{{ status.tone }}"><i></i>{{ status.label }}</span>
            </div>
            <a class="data-grid-card__title" href="{{ path('employee_show', {id: salarie.id}) }}">{{ salarie }}</a>
            <p>{{ salarie.employeeJob ? salarie.employeeJob.nom : (salarie.poste ?: 'Poste non renseigné') }}</p>
            <dl>
                <div><dt>Service</dt><dd>{{ salarie.employeeService ? salarie.employeeService.nom : (salarie.service ?: '—') }}</dd></div>
                <div><dt>Email</dt><dd>{{ salarie.emailProfessionnel ?: salarie.emailPersonnel ?: '—' }}</dd></div>
                <div><dt>Entrée</dt><dd>{{ salarie.dateEntree ? salarie.dateEntree|date('d/m/Y') : '—' }}</dd></div>
            </dl>
            <div class="data-grid-card__actions">
                {% include '@Employee/employee/_actions.html.twig' with {salarie: salarie} %}
            </div>
        </article>
    {% else %}
        <div class="data-empty">
            <i class="ti ti-users-off" aria-hidden="true"></i>
            <strong>Aucun salarié trouvé</strong>
            <span>Ajustez les filtres ou créez un nouveau dossier salarié.</span>
        </div>
    {% endfor %}
</div>