{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<main class="section-space">
  <div class="container">
    <a href="{% url 'home' %}#events" class="text-link">← Back to events</a>
    <section class="detail-hero card-surface mt-3">
      <div class="row g-4 align-items-start">
        <div class="col-lg-7">
          <span class="eyebrow-pill">{{ event.start_at|date:"l, F j" }}</span>
          <h1 class="detail-title mt-3">{{ event.title }}</h1>
          <p class="detail-copy mt-3">{{ event.summary }}</p>
          <div class="detail-meta-grid mt-4">
            <div class="detail-meta-item"><span>Venue</span><strong>{{ event.venue }}</strong></div>
            <div class="detail-meta-item"><span>Time</span><strong>{{ event.start_at|date:"g:i A" }} – {{ event.end_at|date:"g:i A" }}</strong></div>
            <div class="detail-meta-item"><span>Status</span><strong>{% if event.registration_is_open %}Registration open{% else %}Registration closed{% endif %}</strong></div>
            <div class="detail-meta-item"><span>Capacity</span><strong>{% if event.capacity %}{{ event.confirmed_registrations }}/{{ event.capacity }} booked{% else %}Flexible{% endif %}</strong></div>
          </div>
          <div class="event-description mt-4">
            <h2>About this event</h2>
            <p>{{ event.description|linebreaksbr }}</p>
          </div>
        </div>
        <div class="col-lg-5">
          <aside class="registration-panel card-surface card-surface-inner">
            <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
              <div>
                <p class="section-kicker mb-1">Reserve your seat</p>
                <h2 class="h3 mb-0">Registration form</h2>
              </div>
              {% if event.capacity and event.confirmed_registrations >= event.capacity %}
              <span class="status-badge badge-warm">Waitlist</span>
              {% endif %}
            </div>
            <p class="text-muted">Submit once per email address. We will confirm your status right away.</p>
            <form method="post" novalidate class="mt-4">
              {% csrf_token %}
              {% if form.non_field_errors %}
              <div class="alert alert-danger">{{ form.non_field_errors }}</div>
              {% endif %}
              {% for field in form %}
              <div class="mb-3">
                <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.errors %}
                <div class="invalid-feedback d-block">{{ field.errors|join:', ' }}</div>
                {% endif %}
              </div>
              {% endfor %}
              <button class="btn btn-primary btn-lg w-100" type="submit" {% if not event.registration_is_open %}disabled{% endif %}>Register now</button>
            </form>
            <div class="panel-note mt-4">
              {% if event.capacity %}
              <strong>{{ event.spots_remaining }}</strong> spots remaining before waitlist.
              {% else %}
              Open attendance with no fixed seat limit.
              {% endif %}
            </div>
          </aside>
        </div>
      </div>
    </section>

    {% if related_events %}
    <section class="mt-5">
      <div class="d-flex justify-content-between align-items-end gap-3 mb-4">
        <div>
          <p class="section-kicker mb-2">More events</p>
          <h2 class="section-title mb-0">Keep exploring the calendar.</h2>
        </div>
      </div>
      <div class="row g-4">
        {% for related in related_events %}
        <div class="col-lg-4 col-md-6">
          <article class="event-card card-surface h-100">
            <div class="event-card-top">
              <span class="date-chip">{{ related.start_at|date:"M d" }}</span>
              <span class="status-badge">Upcoming</span>
            </div>
            <h3 class="event-card-title mt-3">{{ related.title }}</h3>
            <p class="event-card-summary">{{ related.summary }}</p>
            <a class="btn btn-ghost mt-auto" href="{{ related.get_absolute_url }}">View event</a>
          </article>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}
  </div>
</main>
{% endblock %}