{% 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="dashboard-hero card-surface">
      <div class="row g-4 align-items-center">
        <div class="col-lg-7">
          <span class="eyebrow-pill">Organizer dashboard</span>
          <h1 class="hero-title mt-4">Keep every event, signup, and export in one place.</h1>
          <p class="hero-copy mt-3">Create new events inside the dashboard, review registration volume, and keep a quick path into attendee records without leaving this workspace.</p>
        </div>
        <div class="col-lg-5">
          <div class="dashboard-actions d-grid gap-3">
            <a class="btn btn-primary btn-lg" href="{% url 'organizer_event_create' %}">Create event</a>
            <a class="btn btn-ghost btn-lg" href="/admin/core/registration/">Open registration records</a>
          </div>
        </div>
      </div>
      <div class="row g-3 mt-4">
        <div class="col-md-4"><div class="stat-card stat-card-light"><div class="stat-value">{{ dashboard_stats.upcoming_events }}</div><div class="stat-label">Upcoming events</div></div></div>
        <div class="col-md-4"><div class="stat-card stat-card-light"><div class="stat-value">{{ dashboard_stats.confirmed_attendees }}</div><div class="stat-label">Confirmed attendees</div></div></div>
        <div class="col-md-4"><div class="stat-card stat-card-light"><div class="stat-value">{{ dashboard_stats.waitlist_total }}</div><div class="stat-label">Waitlist total</div></div></div>
      </div>
    </section>

    <section class="mt-5">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
        <div>
          <p class="section-kicker mb-2">Event roster</p>
          <h2 class="section-title mb-0">See registration volume at a glance.</h2>
        </div>
      </div>
      {% if events %}
      <div class="row g-4">
        {% for event in events %}
        <div class="col-xl-6">
          <article class="dashboard-card card-surface h-100">
            <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
              <div>
                <h3 class="event-card-title mb-1">{{ event.title }}</h3>
                <p class="text-muted mb-0">{{ event.start_at|date:"M d, Y · g:i A" }} · {{ event.venue }}</p>
              </div>
              <div class="d-flex gap-2 flex-wrap">
                <a class="btn btn-ghost btn-sm" href="{{ event.get_absolute_url }}">Public page</a>
                <a class="btn btn-ghost btn-sm" href="{% url 'organizer_event_edit' event.slug %}">Edit</a>
                <a class="btn btn-primary btn-sm" href="{% url 'export_attendees_csv' event.slug %}">Export CSV</a>
              </div>
            </div>
            <div class="dashboard-metrics row g-3 mt-1">
              <div class="col-sm-4"><div class="metric-box"><span>Confirmed</span><strong>{{ event.confirmed_registrations }}</strong></div></div>
              <div class="col-sm-4"><div class="metric-box"><span>Waitlist</span><strong>{{ event.waitlist_registrations }}</strong></div></div>
              <div class="col-sm-4"><div class="metric-box"><span>Total</span><strong>{{ event.total_registrations }}</strong></div></div>
            </div>
            <div class="panel-note mt-4">{% if event.capacity %}Capacity {{ event.capacity }} seats.{% else %}Flexible attendance limit.{% endif %}</div>
          </article>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state card-surface text-center">
        <h3>No events created yet</h3>
        <p class="mb-4">Start by creating your first event from the dashboard, then share the public event page for registrations.</p>
        <a class="btn btn-primary" href="{% url 'organizer_event_create' %}">Create first event</a>
      </div>
      {% endif %}
    </section>

    <section class="mt-5">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
        <div>
          <p class="section-kicker mb-2">Recent attendees</p>
          <h2 class="section-title mb-0">Latest registrations across events.</h2>
        </div>
      </div>
      {% if recent_registrations %}
      <div class="table-surface card-surface overflow-hidden">
        <div class="table-responsive">
          <table class="table align-middle mb-0 dashboard-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Event</th>
                <th>Status</th>
                <th>Email</th>
                <th>Registered</th>
              </tr>
            </thead>
            <tbody>
              {% for registration in recent_registrations %}
              <tr>
                <td>{{ registration.full_name }}</td>
                <td>{{ registration.event.title }}</td>
                <td><span class="status-badge {% if registration.status == 'waitlist' %}badge-warm{% endif %}">{{ registration.get_status_display }}</span></td>
                <td>{{ registration.email }}</td>
                <td>{{ registration.created_at|date:"M d, g:i A" }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% else %}
      <div class="empty-state card-surface text-center">
        <h3>No registrations yet</h3>
        <p class="mb-0">Once attendees submit the public form, their records will appear here instantly.</p>
      </div>
      {% endif %}
    </section>
  </div>
</main>
{% endblock %}
