{% extends 'admin/base_site.html' %}
{% block title %}Events{% endblock %}
{% block page_title %}Event Management{% endblock %}
{% block nav_events %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_events:event_create' %}" class="btn btn-gradient btn-sm">+ Create Event</a>
{% endblock %}

{% block content %}
<div class="panel-filter-bar">
  <form method="get" class="flex flex-wrap gap-2 items-end w-full">
    <div class="panel-filter-group panel-filter-group--grow">
      <label class="panel-filter-label">Search</label>
      <input type="text" name="q" value="{{ q }}" placeholder="Title, city, organiser&hellip;" class="form-input">
    </div>
    <div class="panel-filter-group">
      <label class="panel-filter-label">Status</label>
      <select name="status" class="form-input form-select">
        <option value="">All</option>
        <option value="draft"     {% if status_filter == 'draft'     %}selected{% endif %}>Draft</option>
        <option value="published" {% if status_filter == 'published' %}selected{% endif %}>Published</option>
        <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
        <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
      </select>
    </div>
    <div class="panel-filter-group">
      <label class="panel-filter-label">Tag</label>
      <select name="tag" class="form-input form-select">
        <option value="">All Tags</option>
        {% for tag in all_tags %}
        <option value="{{ tag.slug }}" {% if tag_filter == tag.slug %}selected{% endif %}>{{ tag.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="panel-filter-group">
      <label class="panel-filter-label">Show</label>
      <select name="deleted" class="form-input form-select">
        <option value="" {% if not deleted_filter %}selected{% endif %}>Active only</option>
        <option value="1" {% if deleted_filter == '1' %}selected{% endif %}>Deleted only</option>
      </select>
    </div>
    <div class="flex gap-1">
      <button type="submit" class="btn btn-gradient btn-sm">Filter</button>
      <a href="{% url 'admin_events:event_list' %}" class="btn btn-outline btn-sm">Clear</a>
    </div>
  </form>
</div>

<div class="table-wrap">
  <table>
    <thead>
      <tr><th>Title</th><th>Tags</th><th>Organiser</th><th>Category</th><th>Status</th><th>Date</th><th>Actions</th></tr>
    </thead>
    <tbody>
      {% for event in events %}
      <tr>
        <td>
          <a href="{% url 'admin_events:event_detail' event.id %}" class="link-accent font-bold text-sm">{{ event.title|truncatechars:30 }}</a>
          {% if event.city %}<div class="text-xs text-muted">&#128205; {{ event.city }}</div>{% endif %}
        </td>
        <td>
          <div class="perm-list">
            {% for tag in event.tags.all %}
            <span class="tag-badge" style="--tc:{{ tag.color }}">{{ tag.name }}</span>
            {% empty %}<span class="text-xs text-muted">-</span>{% endfor %}
          </div>
        </td>
        <td class="text-sm">{{ event.organiser.username }}</td>
        <td class="text-sm text-muted">{{ event.category.title|default:"-" }}</td>
        <td>
          <span class="chip chip-{{ event.status }}">{{ event.status|title }}</span>
          {% if event.deleted_at %}<span class="chip chip-deleted">Deleted</span>{% endif %}
        </td>
        <td class="text-sm text-muted">{{ event.start_date|date:"M d, Y" }}</td>
        <td>
          <div class="table-actions">
            {% if not event.deleted_at %}
            <form method="post" action="{% url 'admin_events:event_status' event.id %}" class="inline-role-form">
              {% csrf_token %}
              <select name="status" class="inline-role-select">
                <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">Set</button>
            </form>
            <a href="{% url 'admin_events:event_edit' event.id %}" class="btn btn-outline btn-sm">Edit</a>
            {% endif %}
            <form method="post" action="{% url 'admin_events:event_delete' event.id %}"
                  onsubmit="return confirm('{% if event.deleted_at %}Restore{% else %}Delete{% endif %} this event?')">
              {% csrf_token %}
              <button type="submit" class="btn {% if event.deleted_at %}btn-success{% else %}btn-danger{% endif %} btn-sm">
                {% if event.deleted_at %}Restore{% else %}Delete{% endif %}
              </button>
            </form>
          </div>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="7" class="text-center text-muted table-empty-cell">No events found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if page_obj.has_other_pages %}
<div class="panel-pagination">
  {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{ q }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if tag_filter %}&tag={{ tag_filter }}{% endif %}{% if deleted_filter %}&deleted={{ deleted_filter }}{% endif %}" class="pagination-btn">&larr; Prev</a>
  {% endif %}
  <span class="pagination-info">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} &bull; {{ page_obj.paginator.count }} total</span>
  {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}{% if q %}&q={{ q }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if tag_filter %}&tag={{ tag_filter }}{% endif %}{% if deleted_filter %}&deleted={{ deleted_filter }}{% endif %}" class="pagination-btn">Next &rarr;</a>
  {% endif %}
</div>
{% endif %}

{% endblock %}