{# templates/admin/type_bien/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Types de Biens - LUXIM GPIM{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    {# En-tête de page #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header page-header-top mb-0">Configuration des Types & Étapes</h3>
            <p class="text-muted small mb-0">Gérez les modèles de progression par type de propriété.</p>
        </div>
        <a href="{{ path('app_admin_type_bien_new') }}" class="btn btn-login shadow-sm">
            <i class="fas fa-plus me-2"></i>Nouveau Type
        </a>
    </div>

    {# Carte principale #}
    <div class="card shadow-sm border-0">
        <div class="card-body p-0"> {# P-0 pour que le tableau touche les bords si besoin #}
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4" style="width: 120px;">Ordre</th>
                            <th style="width: 150px;">Code</th>
                            <th>Libellé</th>
                            <th>Workflows</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for type_bien in type_biens %}
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-3">
                                    <span class="fw-bold text-primary bg-primary/10 rounded-circle d-flex align-items-center justify-content-center" 
                                          style="width: 30px; height: 30px; background-color: rgba(45, 90, 39, 0.1); font-size: 0.85rem;">
                                        {{ type_bien.ordreTri }}
                                    </span>
                                    <div class="btn-group-vertical shadow-sm rounded">
                                        <a href="{{ path('app_admin_type_bien_reorder', {id: type_bien.id, direction: 'up'}) }}" 
                                           class="btn btn-white btn-xs border py-0 {{ loop.first ? 'disabled opacity-25' : '' }}"
                                           title="Monter">
                                            <i class="fas fa-chevron-up fa-xs"></i>
                                        </a>
                                        <a href="{{ path('app_admin_type_bien_reorder', {id: type_bien.id, direction: 'down'}) }}" 
                                           class="btn btn-white btn-xs border py-0 {{ loop.last ? 'disabled opacity-25' : '' }}"
                                           title="Descendre">
                                            <i class="fas fa-chevron-down fa-xs"></i>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <code class="badge bg-dark fw-normal px-2 py-1">{{ type_bien.code }}</code>
                            </td>
                            <td>
                                <span class="fw-bold text-dark">{{ type_bien.libelle }}</span>
                            </td>
                            <td>
                                <span class="badge rounded-pill bg-info text-dark fw-medium px-3">
                                    <i class="fas fa-tasks me-1 opacity-50"></i>
                                    {{ type_bien.etapeTemplates|length }} étape(s)
                                </span>
                            </td>
                            <td class="text-end pe-4">
                                <div class="d-flex justify-content-end align-items-center gap-2">
                                    <a href="{{ path('app_admin_type_bien_edit', {'id': type_bien.id}) }}" 
                                       class="btn btn-sm btn-outline-primary px-3 shadow-xs">
                                        <i class="fas fa-cog me-1"></i> Configurer
                                    </a>
                                    
                                    {# On enveloppe le delete dans un petit div pour garder l'alignement #}
                                    <div class="ms-1">
                                        {{ include('admin/type_bien/_delete_form.html.twig') }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="fas fa-folder-open fa-3x mb-3 opacity-25"></i>
                                    <p class="mb-0">Aucun type de bien configuré pour le moment.</p>
                                    <a href="{{ path('app_admin_type_bien_new') }}" class="btn btn-link btn-sm">Créer le premier</a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    /* Style pour les boutons de tri miniatures */
    .btn-xs {
        padding: 0.1rem 0.4rem;
        font-size: 0.65rem;
        background-color: white;
    }
    
    .btn-xs:hover:not(.disabled) {
        background-color: #f8fafc;
        color: #2D5A27;
    }

    /* Effet au survol des lignes */
    .table-hover tbody tr:hover {
        background-color: rgba(45, 90, 39, 0.02);
        transition: background-color 0.2s ease;
    }

    /* Badge personnalisé */
    .bg-info {
        background-color: #e0f2fe !important;
        color: #0369a1 !important;
        border: 1px solid #bae6fd;
    }

    .shadow-xs {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
</style>
{% endblock %}