{% extends "base.html" %}

{% block title %}{% trans %}Gestión de Edificios{% endtrans %} - Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Header -->
    <div class="row mb-4 align-items-center">
        <div class="col-md-7">
            <h1 class="h3 mb-1">
                <i class="bi bi-buildings text-primary me-2"></i>{% trans %}Gestión de Edificios{% endtrans %}
            </h1>
            <p class="text-muted small mb-0">{% trans %}Administra las sedes, edificios físicos y campus virtuales de UniCABA{% endtrans %}</p>
        </div>
        <div class="col-md-5 text-md-end mt-3 mt-md-0">
            {% if current_user.has_permission('classrooms', 'read_write') %}
            <a href="{{ url_for('buildings.add_building') }}" class="btn btn-primary me-2">
                <i class="bi bi-plus-circle me-1"></i>{% trans %}Nuevo Edificio{% endtrans %}
            </a>
            {% endif %}
            <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
                <i class="bi bi-door-open me-1"></i>{% trans %}Ver Aulas{% endtrans %}
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="rounded-3 p-3 bg-primary bg-opacity-10 text-primary me-3">
                            <i class="bi bi-buildings fs-3"></i>
                        </div>
                        <div>
                            <div class="text-muted small fw-semibold">{% trans %}Total Edificios{% endtrans %}</div>
                            <h3 class="fw-bold mb-0">{{ buildings|length }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="rounded-3 p-3 bg-success bg-opacity-10 text-success me-3">
                            <i class="bi bi-door-open fs-3"></i>
                        </div>
                        <div>
                            <div class="text-muted small fw-semibold">{% trans %}Aulas Activas{% endtrans %}</div>
                            <h3 class="fw-bold mb-0 text-success">{{ total_classrooms }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="rounded-3 p-3 bg-info bg-opacity-10 text-info me-3">
                            <i class="bi bi-people fs-3"></i>
                        </div>
                        <div>
                            <div class="text-muted small fw-semibold">{% trans %}Capacidad Total{% endtrans %}</div>
                            <h3 class="fw-bold mb-0 text-info">{{ total_capacity }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="rounded-3 p-3 bg-warning bg-opacity-10 text-warning me-3">
                            <i class="bi bi-layers fs-3"></i>
                        </div>
                        <div>
                            <div class="text-muted small fw-semibold">{% trans %}Pisos Disponibles{% endtrans %}</div>
                            <h3 class="fw-bold mb-0 text-warning">{{ buildings|sum(attribute='floors') }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Search Toolbar -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-3">
            <form method="GET" class="row g-2 align-items-center">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-body-tertiary border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" name="search" value="{{ search }}" class="form-control border-start-0" placeholder="{% trans %}Buscar por nombre, código o dirección...{% endtrans %}">
                    </div>
                </div>
                <div class="col-md-4">
                    <select name="status" class="form-select" onchange="this.form.submit()">
                        <option value="">{% trans %}Todos los estados{% endtrans %}</option>
                        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>{% trans %}Activos únicamente{% endtrans %}</option>
                        <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>{% trans %}Inactivos{% endtrans %}</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-primary w-100">{% trans %}Buscar{% endtrans %}</button>
                    {% if search or status_filter %}
                    <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-outline-secondary" title="{% trans %}Limpiar filtro{% endtrans %}">
                        <i class="bi bi-x-lg"></i>
                    </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <!-- Buildings Cards List -->
    <div class="row g-3">
        {% for b in buildings %}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100 position-relative">
                <div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-secondary-subtle text-secondary font-monospace border mb-1">
                            {{ b.code or 'EDIF' }}
                        </span>
                        <h5 class="card-title fw-bold mb-0">
                            <a href="{{ url_for('buildings.view_building', id=b.id) }}" class="text-decoration-none text-primary">
                                {{ b.name }}
                            </a>
                        </h5>
                    </div>
                    <div>
                        {% if b.is_active %}
                        <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                            <i class="bi bi-check-circle me-1"></i>{% trans %}Activo{% endtrans %}
                        </span>
                        {% else %}
                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">
                            <i class="bi bi-x-circle me-1"></i>{% trans %}Inactivo{% endtrans %}
                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    {% if b.address %}
                    <p class="text-muted small mb-3">
                        <i class="bi bi-geo-alt-fill text-danger me-1"></i>{{ b.address }}
                    </p>
                    {% endif %}

                    {% if b.description %}
                    <p class="small text-secondary mb-3">{{ b.description }}</p>
                    {% endif %}

                    <div class="row g-2 text-center pt-2 border-top">
                        <div class="col-4">
                            <div class="p-2 rounded bg-body-tertiary">
                                <small class="text-muted d-block">{% trans %}Pisos{% endtrans %}</small>
                                <span class="fw-bold fs-6">{{ b.floors }}</span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 rounded bg-body-tertiary">
                                <small class="text-muted d-block">{% trans %}Aulas{% endtrans %}</small>
                                <span class="fw-bold fs-6 text-primary">{{ b.classrooms_count }}</span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 rounded bg-body-tertiary">
                                <small class="text-muted d-block">{% trans %}Capacidad{% endtrans %}</small>
                                <span class="fw-bold fs-6 text-success">{{ b.total_capacity }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 py-3 d-flex justify-content-between align-items-center">
                    <a href="{{ url_for('buildings.view_building', id=b.id) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye me-1"></i>{% trans %}Ver Distribución de Aulas{% endtrans %}
                    </a>
                    
                    {% if current_user.has_permission('classrooms', 'read_write') %}
                    <div class="btn-group">
                        <a href="{{ url_for('buildings.edit_building', id=b.id) }}" class="btn btn-outline-secondary btn-sm" title="{% trans %}Editar Edificio{% endtrans %}">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <form method="POST" action="{{ url_for('buildings.toggle_building', id=b.id) }}" class="d-inline">
                            <button type="submit" class="btn btn-outline-secondary btn-sm" title="{% if b.is_active %}{% trans %}Desactivar{% endtrans %}{% else %}{% trans %}Activar{% endtrans %}{% endif %}">
                                <i class="bi bi-power"></i>
                            </button>
                        </form>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="card border-0 shadow-sm p-5 text-center">
                <i class="bi bi-buildings text-muted fs-1 mb-3"></i>
                <h5 class="fw-bold">{% trans %}No se encontraron edificios{% endtrans %}</h5>
                <p class="text-muted mb-3">{% trans %}No hay edificios que coincidan con los criterios de búsqueda.{% endtrans %}</p>
                {% if current_user.has_permission('classrooms', 'read_write') %}
                <div>
                    <a href="{{ url_for('buildings.add_building') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i>{% trans %}Crear Nuevo Edificio{% endtrans %}
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}