{% extends 'base.html' %}
{% load static %}

{% block title %}EduEvents - School Event Management{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 1;">
        <h1 class="display-3 mb-4">Manage School Events with <span class="text-accent">Ease.</span></h1>
        <p class="lead text-muted mb-5">The all-in-one platform for schools to create, manage, and track event registrations and attendance. Join the community today.</p>
        <div class="d-flex gap-3">
          <a href="#events" class="btn btn-primary btn-lg">Browse Events</a>
          <a href="/admin/" class="btn btn-outline-dark btn-lg">School Portal</a>
        </div>
      </div>
      <div class="col-lg-6 text-center">
        <!-- Modern Graphic / Illustration Placeholder -->
        <div class="position-relative">
          <div class="bg-accent rounded-circle position-absolute top-50 start-50 translate-middle opacity-10" style="width: 400px; height: 400px;"></div>
          <img src="https://img.freepik.com/free-vector/calendar-concept-illustration_114360-3277.jpg" alt="School Events" class="img-fluid rounded-4 shadow-lg position-relative" style="max-height: 450px;">
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Events Section -->
<section id="events" class="py-5 mt-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-5">
      <div>
        <h2 class="section-title">Upcoming Events</h2>
        <p class="text-muted">Stay informed about the latest assemblies, field trips, and school nights.</p>
      </div>
      <div class="mb-3 d-none d-md-block">
        <select class="form-select border-0 shadow-sm" style="border-radius: 10px; padding: 10px 20px; min-width: 200px;">
          <option>All Schools</option>
          {% for school in schools %}
            <option>{{ school.name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="row g-4">
      {% for event in events %}
      <div class="col-md-6 col-lg-4">
        <div class="event-card p-4 d-flex flex-column">
          <div class="mb-2">
            <span class="event-type-badge badge-{{ event.event_type }}">{{ event.get_event_type_display }}</span>
          </div>
          <h3 class="h4 mb-3">{{ event.title }}</h3>
          <p class="text-muted small mb-4">{{ event.description|truncatewords:20 }}</p>
          
          <div class="mb-4">
            <div class="d-flex align-items-center mb-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-event me-2 text-accent" viewBox="0 0 16 16">
                <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
              </svg>
              <span class="small fw-semibold">{{ event.start_date|date:"M d, Y @ H:i" }}</span>
            </div>
            <div class="d-flex align-items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt me-2 text-accent" viewBox="0 0 16 16">
                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
              </svg>
              <span class="small text-muted">{{ event.location }}</span>
            </div>
          </div>

          <div class="border-top pt-4 mt-auto">
            <div class="d-flex justify-content-between align-items-center">
              <span class="small text-muted fw-bold">{{ event.school.name }}</span>
              <a href="{% url 'event_detail' event.id %}" class="btn btn-sm btn-link text-accent fw-bold text-decoration-none p-0">View Details &rarr;</a>
            </div>
          </div>
        </div>
      </div>
      {% empty %}
      <div class="col-12 text-center py-5">
        <div class="p-5 bg-white rounded-4 shadow-sm">
          <p class="text-muted mb-0">No upcoming events scheduled at the moment. Please check back later!</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Stats Section -->
<section class="py-5 bg-white border-top border-bottom">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-md-4">
        <h2 class="display-4 text-accent">50+</h2>
        <p class="text-muted fw-semibold">Schools Registered</p>
      </div>
      <div class="col-md-4">
        <h2 class="display-4 text-accent">10k+</h2>
        <p class="text-muted fw-semibold">Events Managed</p>
      </div>
      <div class="col-md-4">
        <h2 class="display-4 text-accent">100k+</h2>
        <p class="text-muted fw-semibold">Tickets Issued</p>
      </div>
    </div>
  </div>
</section>
{% endblock %}
