{% extends 'main/base.html' %}

{% block content %}
{% load static %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/ui-updates.css' %}">


<style>
  body {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(79, 70, 229, 0.8)),
                url(../../static/img/dashboard.png) no-repeat center center/cover;
    background-attachment: fixed;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #fff;
    min-height: 100vh;
  }

  .container {
    padding-top: 80px;
    animation: fadeIn 0.8s ease-in-out;
  }

  h2 {
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 40px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .card {
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    color: #fff;
    transition: all 0.4s ease;
    overflow: hidden;
    cursor: pointer;
  }

  .card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
  }

  .card-body {
    padding: 30px 20px;
  }

  .card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #f9fafb;
    margin-bottom: 15px;
  }

  .btn-primary {
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }

  .btn-primary:hover {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
  }

  .row {
    margin-bottom: 40px;
  }

  /* Fade-in animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive improvements */
  @media (max-width: 768px) {
    .card {
      margin-bottom: 25px;
    }

    .card-body {
      padding: 25px 15px;
    }
  }
</style>

<div class="container">
  <h2>Admin Dashboard</h2>

  <div class="row text-center justify-content-center">
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Admin Details</h5>
          <a href="{% url 'main:admin_details' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Students Registered</h5>
          <a href="{% url 'main:student_details' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Mess Details</h5>
          <a href="{% url 'main:mess_details' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>
  </div>

  <div class="row text-center justify-content-center">
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Hostel Students</h5>
          <a href="{% url 'main:student_details' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Hostel Staff</h5>
          <a href="{% url 'main:hostel_staff_details' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Student Leave</h5>
          <a href="{% url 'main:student_leave' %}" class="btn btn-primary">View</a>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}