{% if items is not empty %}
    <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"></th>
                    <th>Service</th>
                    <th>Responsable</th>
                    <th>Statut</th>
                    <th>Salariés</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                    <tr class="data-row {{ item.actif ? '' : 'is-muted' }}">
                        <td class="data-table__select"><input type="checkbox" data-data-table-target="rowCheckbox" data-action="data-table#toggleRow"></td>
                        <td>
                            <div class="data-entity">
                                <span class="data-avatar data-avatar--initials"><i class="ti ti-sitemap" aria-hidden="true"></i></span>
                                <div>
                                    <span class="data-entity__title">{{ item.nom }}</span>
                                    <div class="data-entity__meta">{{ item.description ?: 'Aucune description' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            {% if item.responsable %}
                                <div class="data-main-text">{{ item.responsable }}</div>
                            {% else %}
                                <span class="data-sub-text">Non renseigné</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="data-badge {{ item.actif ? 'data-badge--success' : 'data-badge--muted' }}">
                                <i aria-hidden="true"></i>{{ item.actif ? 'Actif' : 'Inactif' }}
                            </span>
                        </td>
                        <td><span class="data-count-badge">{{ salarie_counts[item.id]|default(0) }}</span></td>
                        <td>
                            <div class="data-row-actions">
                                {% if is_granted('EMPLOYEE_SERVICE_EDIT') %}
                                    <a class="data-action-button" href="{{ path('employee_settings_services_edit', app.request.query.all|merge({id: item.id})) }}" data-turbo-frame="frame_modal" title="Modifier">
                                        <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                                    </a>
                                {% endif %}
                                {% if is_granted('EMPLOYEE_SERVICE_DISABLE') %}
                                    <a class="data-action-button data-action-button--danger" href="{{ path('employee_settings_services_delete', app.request.query.all|merge({id: item.id})) }}" data-turbo-frame="frame_modal" title="Supprimer">
                                        <i class="ti ti-trash" aria-hidden="true"></i><span>Supprimer</span>
                                    </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="data-grid-view" data-data-table-target="gridView" hidden>
        {% for item in items %}
            <article class="data-grid-card {{ item.actif ? '' : 'is-muted' }}">
                <div class="data-grid-card__header">
                    <div class="data-entity">
                        <span class="data-avatar data-avatar--initials"><i class="ti ti-sitemap" aria-hidden="true"></i></span>
                        <div>
                            <span class="data-grid-card__title">{{ item.nom }}</span>
                            <div class="data-sub-text">{{ item.responsable ? item.responsable : 'Responsable non renseigné' }}</div>
                        </div>
                    </div>
                    <div class="data-row-actions">
                        {% if is_granted('EMPLOYEE_SERVICE_EDIT') %}
                            <a class="data-action-button" href="{{ path('employee_settings_services_edit', app.request.query.all|merge({id: item.id})) }}" data-turbo-frame="frame_modal" title="Modifier">
                                <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                            </a>
                        {% endif %}
                        {% if is_granted('EMPLOYEE_SERVICE_DISABLE') %}
                            <a class="data-action-button data-action-button--danger" href="{{ path('employee_settings_services_delete', app.request.query.all|merge({id: item.id})) }}" data-turbo-frame="frame_modal" title="Supprimer">
                                <i class="ti ti-trash" aria-hidden="true"></i><span>Supprimer</span>
                            </a>
                        {% endif %}
                    </div>
                </div>
                <p class="data-sub-text">{{ item.description ?: 'Aucune description' }}</p>
                <dl>
                    <div><dt>Responsable</dt><dd>{{ item.responsable ?: '-' }}</dd></div>
                    <div><dt>Salariés</dt><dd>{{ salarie_counts[item.id]|default(0) }}</dd></div>
                    <div><dt>Statut</dt><dd>{{ item.actif ? 'Actif' : 'Inactif' }}</dd></div>
                </dl>
            </article>
        {% endfor %}
    </div>
{% else %}
    <div class="data-empty">
        <i class="ti ti-sitemap-off" aria-hidden="true"></i>
        <strong>Aucun service</strong>
        <span>Ajustez vos filtres ou créez un nouveau service.</span>
    </div>
{% endif %}