{% extends '@App/app.html.twig' %}
{% block title %}Types de congés{% endblock %}
{% block content %}
<div class="data-page" data-controller="leave-settings">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb"><span>Congés</span><i class="ti ti-chevron-right" aria-hidden="true"></i><span>Paramètres</span><i class="ti ti-chevron-right" aria-hidden="true"></i><strong>Types de congés</strong></nav>
            <h1>Types de congés</h1>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--primary" href="{{ path('app_leave_settings_type_new') }}"><i class="ti ti-plus" aria-hidden="true"></i>Nouveau type</a>
        </div>
    </div>

    {% include '@Leave/leave/settings/_settings_nav.html.twig' with {active: 'types'} %}

    <section class="settings-note settings-note--blue">
        <i class="ti ti-info-circle" aria-hidden="true"></i>
        <span><strong>Gestion des types de congés</strong><br>Les types de congés définissent les catégories d'absences disponibles pour vos salariés. Chaque type peut avoir des règles d'approbation et de comptabilisation spécifiques.</span>
    </section>

    <section class="data-card">
        <div class="data-toolbar">
            <div class="data-toolbar__title">
                <h2>{{ types|length }} types configurés</h2>
                <span class="data-sub-text">· {{ active_count }} actifs</span>
            </div>
            <div class="data-toolbar__controls">
                <label class="data-search">
                    <i class="ti ti-search" aria-hidden="true"></i>
                    <input type="search" placeholder="Rechercher un type..." data-leave-settings-target="search" data-action="input->leave-settings#filter">
                </label>
                <select class="form-select"><option>Tous les statuts</option></select>
            </div>
        </div>
        <div class="data-table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Couleur</th>
                        <th>Nom</th>
                        <th>Code</th>
                        <th>Approbation</th>
                        <th>Solde géré</th>
                        <th>Demi-journée</th>
                        <th>Pièce jointe</th>
                        <th>Export paie</th>
                        <th>Statut</th>
                        <th class="data-table__actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for type in types %}
                    <tr class="data-row" data-leave-settings-target="row">
                        <td><span class="settings-color-dot" style="background: {{ type.couleur|default('#3b82f6') }}"></span></td>
                        <td><strong>{{ type.nom }}</strong><div class="data-sub-text">{{ type.description|default('—') }}</div></td>
                        <td><code class="settings-chip">{{ type.code }}</code></td>
                        <td><span class="data-badge {{ type.requiresApproval ? 'data-badge--success' : 'data-badge--muted' }}"><i></i>{{ type.requiresApproval ? 'Oui' : 'Non' }}</span></td>
                        <td class="text-center"><i class="ti {{ type.balanceManaged ? 'ti-circle-check text-success' : 'ti-circle-x text-muted' }}" aria-hidden="true"></i></td>
                        <td class="text-center"><i class="ti {{ type.allowHalfDay ? 'ti-circle-check text-success' : 'ti-circle-x text-muted' }}" aria-hidden="true"></i></td>
                        <td class="text-center"><i class="ti {{ type.requiresAttachment ? 'ti-circle-check text-success' : 'ti-circle-x text-muted' }}" aria-hidden="true"></i></td>
                        <td class="text-center"><i class="ti {{ type.exportableToPayroll ? 'ti-circle-check text-success' : 'ti-circle-x text-muted' }}" aria-hidden="true"></i></td>
                        <td><span class="data-badge {{ type.actif ? 'data-badge--success' : 'data-badge--muted' }}"><i></i>{{ type.actif ? 'Actif' : 'Inactif' }}</span></td>
                        <td class="data-table__actions">
                            <div class="data-row-actions data-row-actions--visible">
                                <a class="data-action-button" href="{{ path('app_leave_settings_type_edit', {id: type.id}) }}" title="Modifier"><i class="ti ti-pencil" aria-hidden="true"></i></a>
                                <form method="post" action="{{ path(type.actif ? 'app_leave_settings_type_disable' : 'app_leave_settings_type_enable', {id: type.id}) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token((type.actif ? 'leave_type_disable_' : 'leave_type_enable_') ~ type.id) }}">
                                    <button class="data-action-button" type="submit" title="{{ type.actif ? 'Désactiver' : 'Activer' }}"><i class="ti ti-power" aria-hidden="true"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="10" class="text-center text-muted py-5">Aucun type configuré.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}