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

{% block title %}Modèles documentaires{% 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">
                    <a href="{{ path('contract_index') }}">Contrats</a>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <span class="text-muted">Modèles de document</span>
                </nav>
                <h1>Modèles documentaires</h1>
                <p>Gérez les modèles utilisés pour générer contrats, avenants et documents RH.</p>
            </div>
            <div class="data-page__actions">
                <a class="data-button data-button--secondary" href="{{ path('document_template_export', app.request.query.all) }}">
                    <i class="ti ti-file-export" aria-hidden="true"></i>Exporter
                </a>
                {% if is_granted('DOCUMENT_TEMPLATE_CREATE') %}
                    <a class="data-button data-button--primary" href="{{ path('document_template_new') }}">
                        <i class="ti ti-plus" aria-hidden="true"></i>Nouveau modèle
                    </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-files" aria-hidden="true"></i></span>
                <div><span>Total</span><strong>{{ template_stats.total|default(templates|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>{{ template_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>{{ template_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-world" aria-hidden="true"></i></span>
                <div><span>Globaux</span><strong>{{ template_stats.global|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 code, nom..." aria-label="Rechercher un modèle">
                </div>
                <div class="data-toolbar__controls">
                    <select name="type" aria-label="Filtrer par type">
                        <option value="">Tous les types</option>
                        {% for type in types %}
                            <option value="{{ type }}" {{ filters.type|default('') == type ? 'selected' : '' }}>{{ type|capitalize }}</option>
                        {% endfor %}
                    </select>
                    <select name="portee" aria-label="Filtrer par portée">
                        <option value="">Toutes les portées</option>
                        <option value="societe" {{ filters.portee|default('') == 'societe' ? 'selected' : '' }}>Société</option>
                        <option value="global" {{ filters.portee|default('') == 'global' ? 'selected' : '' }}>Global</option>
                    </select>
                    <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('document_template_index') }}" 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>

            {% if templates 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>Modèle</th>
                                <th>Type</th>
                                <th>Portée</th>
                                <th>Statut</th>
                                <th>Mise à jour</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for template in templates %}
                                <tr class="data-row {{ template.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-file-description" aria-hidden="true"></i></span>
                                            <div>
                                                <a class="data-entity__title" href="{{ path('document_template_show', {id: template.id}) }}">{{ template.nom }}</a>
                                                <div class="data-entity__meta">
                                                    <i class="ti ti-code" aria-hidden="true"></i>
                                                    <span>{{ template.code }}</span>
                                                    {% if template.description %}
                                                        <span>· {{ template.description|length > 68 ? template.description|slice(0, 68) ~ '...' : template.description }}</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="data-badge data-badge--info">{{ template.type|capitalize }}</span></td>
                                    <td>
                                        <span class="data-badge {{ template.portee == 'global' ? 'data-badge--warning' : 'data-badge--info' }}">
                                            {{ template.portee == 'global' ? 'Global' : 'Société' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="data-badge {{ template.actif ? 'data-badge--success' : 'data-badge--muted' }}">
                                            <i aria-hidden="true"></i>{{ template.actif ? 'Actif' : 'Inactif' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="data-main-text">{{ template.updatedAt|date('d/m/Y') }}</div>
                                        <div class="data-sub-text">{{ template.updatedAt|date('H:i') }}</div>
                                    </td>
                                    <td>
                                        <div class="data-row-actions">
                                            <a class="data-action-button" href="{{ path('document_template_show', {id: template.id}) }}" title="Voir">
                                                <i class="ti ti-eye" aria-hidden="true"></i><span>Voir</span>
                                            </a>
                                            {% if is_granted('DOCUMENT_TEMPLATE_EDIT', template) %}
                                                <a class="data-action-button" href="{{ path('document_template_edit', {id: template.id}) }}" title="Modifier">
                                                    <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                                                </a>
                                            {% endif %}
                                            {% if is_granted('DOCUMENT_TEMPLATE_DISABLE', template) %}
                                                <form method="post" action="{{ path(template.actif ? 'document_template_disable' : 'document_template_enable', {id: template.id}) }}" onsubmit="return confirm('Confirmer cette action ?')">
                                                    <input type="hidden" name="_token" value="{{ csrf_token((template.actif ? 'document_template_disable_' : 'document_template_enable_') ~ template.id) }}">
                                                    <button class="data-action-button {{ template.actif ? 'data-action-button--warning' : '' }}" type="submit" title="{{ template.actif ? 'Désactiver' : 'Réactiver' }}">
                                                        <i class="ti {{ template.actif ? 'ti-circle-x' : 'ti-circle-check' }}" aria-hidden="true"></i><span>{{ template.actif ? 'Désactiver' : 'Réactiver' }}</span>
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="data-grid-view" data-data-table-target="gridView" hidden>
                    {% for template in templates %}
                        <article class="data-grid-card {{ template.actif ? '' : 'is-muted' }}">
                            <div class="data-grid-card__header">
                                <div class="data-entity">
                                    <span class="data-avatar data-avatar--initials"><i class="ti ti-file-description" aria-hidden="true"></i></span>
                                    <div>
                                        <a class="data-grid-card__title" href="{{ path('document_template_show', {id: template.id}) }}">{{ template.nom }}</a>
                                        <div class="data-sub-text">{{ template.code }}</div>
                                    </div>
                                </div>
                                <div class="data-row-actions">
                                    {% if is_granted('DOCUMENT_TEMPLATE_EDIT', template) %}
                                        <a class="data-action-button" href="{{ path('document_template_edit', {id: template.id}) }}" title="Modifier">
                                            <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                            <p>{{ template.description ?: 'Aucune description renseignée.' }}</p>
                            <dl>
                                <div><dt>Type</dt><dd>{{ template.type|capitalize }}</dd></div>
                                <div><dt>Portée</dt><dd>{{ template.portee == 'global' ? 'Global' : 'Société' }}</dd></div>
                                <div><dt>Mis à jour</dt><dd>{{ template.updatedAt|date('d/m/Y') }}</dd></div>
                            </dl>
                            <div class="data-badge-stack">
                                <span class="data-badge {{ template.actif ? 'data-badge--success' : 'data-badge--muted' }}">
                                    <i aria-hidden="true"></i>{{ template.actif ? 'Actif' : 'Inactif' }}
                                </span>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            {% else %}
                <div class="data-empty">
                    <i class="ti ti-file-off" aria-hidden="true"></i>
                    <strong>Aucun modèle</strong>
                    <span>Ajustez vos filtres ou créez un nouveau modèle documentaire.</span>
                </div>
            {% endif %}
        </section>
    </div>
{% endblock %}