{% extends "base.html" %}

{% block content %}
<!-- Cabecera Hero -->
<div class="hero section">
    <h1>PANEL DE CONTROL</h1>
    <p class="text-dim">Gestiona los recursos de Maker Space de forma eficiente.</p>
</div>

<!-- Secciones Principales -->
<div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
    <!-- Apartado MAESTROS -->
    <div class="category-section">
        <h2 style="margin-bottom: 1.5rem; color: #38bdf8; text-align: center;"><i class="fas fa-chalkboard-teacher"></i>
            PARA MAESTROS</h2>
        <a href="/prestamos" class="card glass" style="border-bottom: 4px solid #3b82f6;">
            <i class="fas fa-tools"></i>
            <h2>SISTEMA PRÉSTAMOS</h2>
            <p class="text-dim">Solicita herramientas y dispositivos para uso en el aula.</p>
        </a>
    </div>

    <!-- Apartado MIEMBROS -->
    <div class="category-section">
        <h2 style="margin-bottom: 1.5rem; color: #10b981; text-align: center;"><i class="fas fa-users"></i> MIEMBROS
            MAKERSPACE</h2>
        <a href="/miembros" class="card glass" style="border-bottom: 4px solid #10b981;">
            <i class="fas fa-fingerprint"></i>
            <h2>ACCESO MIEMBROS</h2>
            <p class="text-dim">Inicia sesión para acceder a Proyectos, Aulas y Herramientas.</p>
        </a>
    </div>
</div>

<style>
    .category-section {
        background: rgba(255, 255, 255, 0.02);
        padding: 2rem;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
</style>
{% endblock %}