{% extends 'admin/base_site.html' %}
{% block title %}{{ event.title }}{% endblock %}
{% block page_title %}Event Detail{% endblock %}
{% block nav_events %}active{% endblock %}
{% block topbar_actions %}
<a href="{% url 'admin_events:event_list' %}" class="btn btn-outline btn-sm">&larr; All Events</a>
{% if not event.deleted_at %}<a href="{% url 'admin_events:event_edit' event.id %}" class="btn btn-gradient btn-sm">Edit</a>{% endif %}
{% endblock %}
{% block content %}
<div class="grid-2">
  <div>
    <div class="card mb-3">
      <div class="card-body">
        <div class="flex items-center gap-2 mb-2">
          <span class="chip chip-{{ event.status }}">{{ event.status|title }}</span>
          {% if event.deleted_at %}<span class="chip chip-deleted">Deleted</span>{% endif %}
          {% if event.is_featured %}<span class="badge badge-orange">Featured</span>{% endif %}
          {% if event.is_free %}<span class="badge badge-green">Free</span>{% endif %}
        </div>
        <h2 class="font-head detail-title mb-2">{{ event.title }}</h2>
        <p class="text-muted text-sm mb-3">{{ event.description|truncatewords:40 }}</p>
        <div class="divider"></div>
        <div class="detail-meta-grid mt-3">
          <div><span class="text-muted">Type:</span> {{ event.event_type|title }}</div>
          <div><span class="text-muted">Category:</span> {{ event.category.title|default:"-" }}</div>
          <div><span class="text-muted">City:</span> {{ event.city|default:"-" }}</div>
          <div><span class="text-muted">Venue:</span> {{ event.venue|default:"-" }}</div>
          <div><span class="text-muted">Start:</span> {{ event.start_date|date:"M d, Y g:i A" }}</div>
          <div><span class="text-muted">End:</span> {{ event.end_date|date:"M d, Y g:i A" }}</div>
          <div><span class="text-muted">Price:</span> {% if event.is_free %}Free{% else %}&#8377;{{ event.ticket_price }}{% endif %}</div>
          <div><span class="text-muted">Capacity:</span> {% if event.max_capacity %}{{ event.max_capacity }}{% else %}Unlimited{% endif %}</div>
        </div>
        {% with tags=event.tags.all %}
        {% if tags %}
        <div class="divider"></div>
        <div class="flex flex-wrap gap-1 mt-2">
          <span class="text-muted text-sm" style="flex-basis:100%;margin-bottom:.25rem">Tags:</span>
          {% for tag in tags %}
          <span class="tag-badge" style="--tc:{{ tag.color }}">{{ tag.name }}</span>
          {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        <div class="divider"></div>
        <div class="detail-audit">
          <div><span class="text-muted">Created by:</span> {{ event.created_by.username|default:"-" }} - {{ event.created_at|date:"M d, Y g:i A" }}</div>
          <div><span class="text-muted">Updated by:</span> {{ event.updated_by.username|default:"-" }} - {{ event.updated_at|date:"M d, Y g:i A" }}</div>
          {% if event.deleted_at %}<div><span class="text-muted">Deleted by:</span> {{ event.deleted_by.username|default:"-" }} - {{ event.deleted_at|date:"M d, Y g:i A" }}</div>{% endif %}
          <div><span class="text-muted">Organiser:</span> {{ event.organiser.username }} ({{ event.organiser.email }})</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="card mb-3">
      <div class="card-body">
        <div class="flex items-center justify-between mb-3">
          <p class="panel-section-title">Attendees ({{ tickets|length }})</p>
          <a href="{% url 'admin_events:event_attendees' event.id %}" class="btn btn-outline btn-sm">Full List</a>
        </div>
        {% if tickets %}
        <div class="table-wrap">
          <table>
            <thead><tr><th>User</th><th>Code</th><th>Status</th></tr></thead>
            <tbody>
              {% for t in tickets|slice:":6" %}
              <tr>
                <td class="text-sm font-bold">{{ t.attendee.username }}</td>
                <td><span class="ticket-code">{{ t.ticket_code }}</span></td>
                <td><span class="chip chip-{{ t.status }}">{{ t.status|title }}</span></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}<p class="text-muted text-sm">No attendees yet.</p>{% endif %}
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <p class="panel-section-title mb-3">Quick Actions</p>
        {% if not event.deleted_at %}
        <form method="post" action="{% url 'admin_events:event_status' event.id %}" class="flex gap-2 mb-2">
          {% csrf_token %}
          <select name="status" class="form-input form-select select-flex">
            <option value="draft"     {% if event.status == 'draft'     %}selected{% endif %}>Draft</option>
            <option value="published" {% if event.status == 'published' %}selected{% endif %}>Published</option>
            <option value="cancelled" {% if event.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
            <option value="completed" {% if event.status == 'completed' %}selected{% endif %}>Completed</option>
          </select>
          <button type="submit" class="btn btn-gradient btn-sm">Change</button>
        </form>
        {% endif %}
        <form method="post" action="{% url 'admin_events:event_delete' event.id %}"
              onsubmit="return confirm('{% if event.deleted_at %}Restore{% else %}Delete{% endif %}?')">
          {% csrf_token %}
          <button type="submit" class="btn {% if event.deleted_at %}btn-success{% else %}btn-danger{% endif %} btn-sm w-full">
            {% if event.deleted_at %}Restore Event{% else %}Delete Event{% endif %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}