{% extends "base.html" %}

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

{% block content %}
<main class="page-shell py-5">
  <div class="container">
    <section class="dashboard-hero card-surface card-surface-inner">
      <div class="row g-4 align-items-start">
        <div class="col-lg-7">
          <span class="eyebrow-pill">Organizer tools</span>
          <h1 class="hero-title mt-4">{{ form_title }}</h1>
          <p class="hero-copy mt-3">{{ form_intro }}</p>
        </div>
        <div class="col-lg-5">
          <div class="dashboard-actions d-grid gap-3">
            <a class="btn btn-ghost btn-lg" href="{% url 'organizer_dashboard' %}">Back to dashboard</a>
            <a class="btn btn-ghost btn-lg" href="/admin/core/event/">Open all events in admin</a>
          </div>
        </div>
      </div>
    </section>

    <section class="mt-5">
      <div class="card-surface card-surface-inner">
        <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 setup</p>
            <h2 class="section-title mb-0">{{ form_section_title }}</h2>
          </div>
        </div>

        <form method="post" novalidate>
          {% csrf_token %}
          {% if form.non_field_errors %}
          <div class="alert alert-danger">{{ form.non_field_errors }}</div>
          {% endif %}

          <div class="row g-4">
            <div class="col-lg-8">
              <div class="mb-3">
                <label class="form-label" for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
                {{ form.title }}
                {% if form.title.errors %}<div class="invalid-feedback d-block">{{ form.title.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="mb-3">
                <label class="form-label" for="{{ form.summary.id_for_label }}">{{ form.summary.label }}</label>
                {{ form.summary }}
                {% if form.summary.errors %}<div class="invalid-feedback d-block">{{ form.summary.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="mb-3">
                <label class="form-label" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                {{ form.description }}
                {% if form.description.errors %}<div class="invalid-feedback d-block">{{ form.description.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="mb-0">
                <label class="form-label" for="{{ form.venue.id_for_label }}">{{ form.venue.label }}</label>
                {{ form.venue }}
                {% if form.venue.errors %}<div class="invalid-feedback d-block">{{ form.venue.errors|join:', ' }}</div>{% endif %}
              </div>
            </div>

            <div class="col-lg-4">
              <div class="card-surface bg-white border-0 shadow-sm h-100">
                <div class="card-body">
                  <h3 class="h5 mb-3">Schedule & access</h3>
                  <div class="mb-3">
                    <label class="form-label" for="{{ form.start_at.id_for_label }}">Start</label>
                    {{ form.start_at }}
                    {% if form.start_at.errors %}<div class="invalid-feedback d-block">{{ form.start_at.errors|join:', ' }}</div>{% endif %}
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="{{ form.end_at.id_for_label }}">End</label>
                    {{ form.end_at }}
                    {% if form.end_at.errors %}<div class="invalid-feedback d-block">{{ form.end_at.errors|join:', ' }}</div>{% endif %}
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="{{ form.capacity.id_for_label }}">Capacity</label>
                    {{ form.capacity }}
                    <div class="form-text">Leave blank for open attendance.</div>
                    {% if form.capacity.errors %}<div class="invalid-feedback d-block">{{ form.capacity.errors|join:', ' }}</div>{% endif %}
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="{{ form.registration_opens.id_for_label }}">Registration opens</label>
                    {{ form.registration_opens }}
                    {% if form.registration_opens.errors %}<div class="invalid-feedback d-block">{{ form.registration_opens.errors|join:', ' }}</div>{% endif %}
                  </div>
                  <div class="mb-4">
                    <label class="form-label" for="{{ form.registration_closes.id_for_label }}">Registration closes</label>
                    {{ form.registration_closes }}
                    {% if form.registration_closes.errors %}<div class="invalid-feedback d-block">{{ form.registration_closes.errors|join:', ' }}</div>{% endif %}
                  </div>
                  <div class="form-check mb-0">
                    {{ form.is_published }}
                    <label class="form-check-label" for="{{ form.is_published.id_for_label }}">Visible on the public events page</label>
                    {% if form.is_published.errors %}<div class="invalid-feedback d-block">{{ form.is_published.errors|join:', ' }}</div>{% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
            <button class="btn btn-primary btn-lg" type="submit">{{ submit_label }}</button>
            <a class="btn btn-ghost btn-lg" href="{% url 'organizer_dashboard' %}">Cancel</a>
          </div>
        </form>
      </div>
    </section>
  </div>
</main>
{% endblock %}