{% extends "base.html" %}

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

{% block content %}
<main class="section-space">
  <div class="container">
    <section class="success-shell card-surface text-center mx-auto">
      <span class="eyebrow-pill">Registration received</span>
      <h1 class="hero-title mt-4">{% if registration.status == 'waitlist' %}You are on the waitlist.{% else %}Your spot is secured.{% endif %}</h1>
      <p class="hero-copy mt-3">{{ registration.full_name }}, your registration for <strong>{{ event.title }}</strong> has been saved. {% if registration.status == 'waitlist' %}We will contact you if a seat opens up.{% else %}Check your inbox for the confirmation email details.{% endif %}</p>
      <div class="success-meta-grid mt-4 text-start">
        <div class="detail-meta-item"><span>Event</span><strong>{{ event.title }}</strong></div>
        <div class="detail-meta-item"><span>When</span><strong>{{ event.start_at|date:"M d, Y · g:i A" }}</strong></div>
        <div class="detail-meta-item"><span>Where</span><strong>{{ event.venue }}</strong></div>
        <div class="detail-meta-item"><span>Status</span><strong>{{ registration.get_status_display }}</strong></div>
      </div>
      <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
        <a class="btn btn-primary" href="{% url 'home' %}">Browse more events</a>
        <a class="btn btn-ghost" href="{% url 'organizer_dashboard' %}">View organizer dashboard</a>
      </div>
    </section>
  </div>
</main>
{% endblock %}