{% extends "base.html" %}

{% block title %}Manage Events | Roadshow Calendar{% endblock %}

{% block content %}
<section class="section-shell page-top-space">
  <div class="container">
    <div class="dashboard-banner card-surface mb-4">
      <div>
        <span class="eyebrow-pill">Staff workspace</span>
        <h1 class="section-title mt-3 mb-2">Manage your public event calendar securely</h1>
        <p class="section-copy mb-0">Only staff members can reach this area. Create events here or jump into Django Admin for bulk edits.</p>
      </div>
      <div class="dashboard-banner-actions d-flex gap-2 flex-wrap">
        <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Add event</a>
        <a class="btn btn-ghost" href="/admin/">Open admin</a>
      </div>
    </div>

<div class="card-surface mb-4">
  <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
    <div>
      <span class="eyebrow-pill">Backup</span>
      <h2 class="h4 mt-3 mb-2">Download a full event backup</h2>
      <p class="section-copy mb-0">Export every event into one JSON file so you can keep an offline backup before larger edits or restore the calendar later if needed.</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <a class="btn btn-primary-brand" href="{% url 'event_export' %}">Download backup JSON</a>
    </div>
  </div>
</div>

    <div class="row g-4 mb-4">
      <div class="col-xl-5">
        <div class="card-surface embed-settings-card h-100">
          <span class="eyebrow-pill">Embed settings</span>
          <h2 class="h4 mt-3 mb-2">Generate a copy-ready widget snippet</h2>
          <p class="section-copy">Tune the iframe once, copy the finished code, and paste it into your existing HTML site.</p>

          <form class="embed-settings-form" data-embed-settings data-embed-base-url="{{ embed_base_url }}">
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="embedTitle">Iframe title</label>
                <input class="form-control" id="embedTitle" name="title" type="text" value="Where to find us calendar">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedMonth">Starting month</label>
                <input class="form-control" id="embedMonth" name="month" type="month" value="{{ default_embed_month }}">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedWidth">Width</label>
                <input class="form-control" id="embedWidth" name="width" type="text" value="100%">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedHeight">Height (px)</label>
                <input class="form-control" id="embedHeight" name="height" type="number" min="360" step="10" value="760">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedRadius">Corner radius (px)</label>
                <input class="form-control" id="embedRadius" name="radius" type="number" min="0" step="2" value="24">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedHeader">Widget header</label>
                <select class="form-select" id="embedHeader" name="header">
                  <option value="1" selected>Show header and action</option>
                  <option value="0">Hide header for a tighter embed</option>
                </select>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="col-xl-7">
        <div class="card-surface code-card h-100">
          <div class="code-card-header d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
            <div>
              <strong>Live embed output</strong>
              <p class="mb-0 text-white-50 small">Copy either the direct widget URL or the full iframe snippet.</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="btn btn-sm btn-primary-brand" href="{{ embed_base_url }}" target="_blank" rel="noopener" data-embed-preview>Preview widget</a>
              <button class="btn btn-sm btn-ghost" type="button" data-copy-snippet data-copy-target="#dashboardEmbedUrl">Copy URL</button>
              <button class="btn btn-sm btn-ghost" type="button" data-copy-snippet data-copy-target="#dashboardIframeSnippet">Copy iframe</button>
            </div>
          </div>

          <div class="embed-output-stack mt-4">
            <div>
              <small class="text-uppercase text-white-50 d-block mb-2">Widget URL</small>
              <pre id="dashboardEmbedUrl" class="code-snippet mb-0">{{ embed_base_url }}</pre>
            </div>
            <div>
              <small class="text-uppercase text-white-50 d-block mb-2">Iframe snippet</small>
              <pre id="dashboardIframeSnippet" class="code-snippet mb-0">&lt;iframe src="{{ embed_base_url }}" title="Where to find us calendar" width="100%" height="760" style="border:0;border-radius:24px;overflow:hidden;" loading="lazy"&gt;&lt;/iframe&gt;</pre>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-card card-surface">
      <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-3">
        <div>
          <h2 class="h4 mb-1">All events</h2>
          <p class="section-copy mb-0">{{ dashboard_count }} scheduled item{{ dashboard_count|pluralize }} currently in the system.</p>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 dashboard-table">
          <thead>
            <tr>
              <th>Event</th>
              <th>Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for event in events %}
            <tr>
              <td>
                <strong>{{ event.name }}</strong><br>
                <small>{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</small>
              </td>
              <td>{{ event.start|date:"M j, Y" }}</td>
              <td>{{ event.location|default:"—" }}</td>
              <td>
                {% if event.is_published %}
                <span class="status-pill status-live">Published</span>
                {% else %}
                <span class="status-pill status-draft">Draft</span>
                {% endif %}
              </td>
              <td>
                <div class="d-flex gap-2 flex-wrap justify-content-end">
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_dashboard_detail' event.slug %}">Review</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_edit' event.slug %}">Edit</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_delete' event.slug %}">Delete</a>
                </div>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5">
                <div class="empty-state text-center py-5">
                  <h3 class="h5">No events yet</h3>
                  <p class="mb-3">Create your first event to populate the public calendar and widget.</p>
                  <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Create event</a>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
{% endblock %}