{% extends "base.html" %}
{% block title %}Éléments de {{ equipment.name }} — GMAO Collège{% endblock %}

{% block content %}
<div class="container-fluid">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('equipments.index') }}">Équipements</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('equipments.detail', id=equipment.id) }}">{{ equipment.name }}</a></li>
            <li class="breadcrumb-item active">Éléments</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-diagram-3 me-2"></i>Éléments du groupe</h1>
        <div>
            <span class="badge bg-primary fs-6">{{ equipment.children_count }} éléments</span>
        </div>
    </div>

    <!-- Filtres -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Rechercher</label>
                    <input type="text" name="search" class="form-control" value="{{ request.args.get('search', '') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Salle</label>
                    <select name="room" class="form-select">
                        <option value="">Toutes les salles</option>
                        {% for room in rooms %}
                        <option value="{{ room.id }}" {% if request.args.get('room') == room.id|string %}selected{% endif %}>
                            {{ room.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Statut</label>
                    <select name="status" class="form-select">
                        <option value="">Tous les statuts</option>
                        <option value="operational" {% if request.args.get('status') == 'operational' %}selected{% endif %}>Opérationnel</option>
                        <option value="maintenance" {% if request.args.get('status') == 'maintenance' %}selected{% endif %}>En maintenance</option>
                        <option value="broken" {% if request.args.get('status') == 'broken' %}selected{% endif %}>En panne</option>
                        <option value="retired" {% if request.args.get('status') == 'retired' %}selected{% endif %}>Retiré</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Filtrer
                    </button>
                    <a href="{{ url_for('equipments.children', id=equipment.id) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Liste des éléments -->
    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>N°</th>
                        <th>Nom</th>
                        <th>Salle</th>
                        <th>Statut</th>
                        <th>Curatives</th>
                        <th>Préventives</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for child in children.items %}
                    <tr>
                        <td>
                            {% if child.individual_number %}#{{ child.individual_number }}{% else %}—{% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('equipments.detail', id=child.id) }}">
                                {{ child.name or 'Sans nom' }}
                            </a>
                        </td>
                        <td>
                            {% if child.effective_room %}
                            {{ child.effective_room.name }}
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge {{ child.status|status_badge }}">{{ child.status|format_status }}</span>
                        </td>
                        <td>
                            {% if child.curative_count > 0 %}
                            <span class="badge bg-warning text-dark">{{ child.curative_count }}</span>
                            {% else %}
                            <span class="text-muted">0</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('equipments_scheduled.scheduled_tasks', id=child.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-calendar-check"></i>
                            </a>
                        </td>
                        <td>
                            <a href="{{ url_for('equipments.detail', id=child.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            Aucun élément dans ce groupe.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if children.pages > 1 %}
        <div class="card-footer">
            <nav aria-label="Pagination">
                <ul class="pagination justify-content-center mb-0">
                    {% if children.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('equipments.children', id=equipment.id, page=children.prev_num) }}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for page_num in children.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                        {% if page_num %}
                            {% if page_num == children.page %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                            {% else %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('equipments.children', id=equipment.id, page=page_num) }}">{{ page_num }}</a>
                            </li>
                            {% endif %}
                        {% else %}
                            <li class="page-item disabled"><span class="page-link">…</span></li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if children.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('equipments.children', id=equipment.id, page=children.next_num) }}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}