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

{% block title %}{{ event.title }} - EduEvents{% endblock %}

{% block content %}
<div class="container py-5">
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-accent text-decoration-none">Events</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ event.title }}</li>
    </ol>
  </nav>

  <div class="row g-5">
    <div class="col-lg-8">
      <div class="bg-white p-4 p-md-5 rounded-4 shadow-sm mb-4">
        <span class="event-type-badge badge-{{ event.event_type }} mb-3">{{ event.get_event_type_display }}</span>
        <h1 class="display-5 mb-4">{{ event.title }}</h1>
        
        <div class="d-flex flex-wrap gap-4 mb-5 pb-4 border-bottom">
          <div>
            <p class="text-muted small mb-1 text-uppercase fw-bold">When</p>
            <p class="fw-semibold mb-0">{{ event.start_date|date:"l, F j, Y" }}<br>{{ event.start_date|date:"g:i A" }} - {{ event.end_date|date:"g:i A" }}</p>
          </div>
          <div>
            <p class="text-muted small mb-1 text-uppercase fw-bold">Where</p>
            <p class="fw-semibold mb-0">{{ event.location }}</p>
          </div>
          <div>
            <p class="text-muted small mb-1 text-uppercase fw-bold">Organizer</p>
            <p class="fw-semibold mb-0">{{ event.school.name }}</p>
          </div>
        </div>

        <div class="event-description">
          <h3 class="h5 mb-3">About this Event</h3>
          <div class="text-muted">
            {{ event.description|linebreaks }}
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="sticky-top" style="top: 100px;">
        <div class="bg-white p-4 rounded-4 shadow-sm border-top border-5 border-accent">
          <h3 class="h4 mb-4">Registration</h3>
          
          <div class="d-flex justify-content-between mb-3">
            <span class="text-muted">Capacity</span>
            <span class="fw-bold">{{ event.capacity }} slots</span>
          </div>
          <div class="d-flex justify-content-between mb-4">
            <span class="text-muted">Available</span>
            <span class="fw-bold text-accent">{{ event.capacity }} slots left</span>
          </div>

          <button class="btn btn-primary w-100 btn-lg mb-3">Register Now</button>
          <p class="text-center small text-muted">You must be logged in to register.</p>
        </div>

        <div class="mt-4 bg-white p-4 rounded-4 shadow-sm">
          <h4 class="h6 mb-3">Need Help?</h4>
          <p class="small text-muted mb-0">Contact {{ event.school.name }} administrative office for any queries regarding this event.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
