{% extends 'base.html' %}
{% block title %}Admin Dashboard{% endblock %}

{% block content %}

<section class="py-5 bg-light min-vh-100">
    <div class="container">

        <!-- Header -->
        <div class="mb-5 text-center">
            <h2 class="fw-bold text-success">
                <i class="fas fa-user-shield me-2"></i>
                Admin Dashboard
            </h2>
            <p class="text-muted mb-3">
                (You are viewing the Admin Panel)
            </p>

            <a href="{% url 'dashboard' %}" class="btn btn-outline-success btn-sm shadow-sm">
                <i class="fas fa-user me-1"></i>
                Switch to User View
            </a>
        </div>

        <!-- Cards -->
        <div class="row g-4">

            <!-- Users -->
            <div class="col-md-4">
                <a href="{% url 'user_list' %}" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-users fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Users</h4>
                        <p class="text-muted mb-0">Manage student accounts & approvals</p>
                    </div>
                </a>
            </div>

            <!-- Voting -->
            <div class="col-md-4">
                <a href="{% url 'admin_voting' %}" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-vote-yea fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Voting</h4>
                        <p class="text-muted mb-0">Create and manage elections</p>
                    </div>
                </a>
            </div>

            <!-- Officials -->
            <div class="col-md-4">
                <a href="{% url 'admin_officials' %}" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-user-tie fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Officials</h4>
                        <p class="text-muted mb-0">Manage candidates & leadership roles</p>
                    </div>
                </a>
            </div>

            <!-- Downloads -->
            <div class="col-md-4">
                <a href="{% url 'admin_downloads' %}" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-download fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Downloads</h4>
                        <p class="text-muted mb-0">Manage downloadable documents</p>
                    </div>
                </a>
            </div>

            <!-- Gallery -->
            <div class="col-md-4">
                <a href="{% url 'admin_gallery' %}" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-images fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Gallery</h4>
                        <p class="text-muted mb-0">Manage event photos & media</p>
                    </div>
                </a>
            </div>

            <!-- Placeholder -->
            <div class="col-md-4">
                <a href="#" class="text-decoration-none">
                    <div class="card shadow-lg border-0 rounded-4 h-100 text-center p-4 dashboard-card">
                        <i class="fas fa-cube fa-3x text-success mb-3"></i>
                        <h4 class="fw-bold">Placeholder</h4>
                        <p class="text-muted mb-0">Future module</p>
                    </div>
                </a>
            </div>

        </div>

    </div>
</section>

<style>
.dashboard-card {
    transition: all 0.3s ease;
}
.dashboard-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
}
</style>

{% endblock %}