{% extends "cms/base.html" %}
{% block title %}Events{% endblock %}
{% block page_title %}Events{% endblock %}

{% block extra_head %}
<style>
  .vv-pill { display:inline-block;border-radius:99px;padding:.15rem .6rem;font-size:.75rem;font-weight:700;min-width:38px;text-align:center; }
  .vv-b1 { background:#fde8e8;color:#b91c1c; }
  .vv-b2 { background:#e0f7ff;color:#0369a1; }
  .vv-b3 { background:#fef6dc;color:#a16207; }
  .vv-b4 { background:#e8f7ee;color:#15803d; }
  .vv-b5 { background:#dcf5e6;color:#116b3c; }
  .vv-b6 { background:#e8ecfb;color:#1b44a0; }
  .vv-plan td { color:var(--cms-muted); }
  .vv-sub { font-size:.75rem;color:var(--cms-muted);margin-top:2px; }
  .vv-filters { display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem; }
  .vv-filters select, .vv-filters input { padding:.4rem .6rem;border:1px solid var(--cms-border);border-radius:7px;font-size:.82rem;background:#fff; }
  .vv-neg { color:#b91c1c; }
</style>
{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <h2>Events <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ total }})</span></h2>
</div>

<form method="get" class="vv-filters">
  <input type="text" name="q" value="{{ q }}" placeholder="Search events, acts, venues">
  <select name="status">
    <option value="">Status</option>
    {% for val, label in status_choices %}
    <option value="{{ val }}"{% if request.GET.status == val %} selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <select name="mode">
    <option value="">Our role</option>
    {% for val, label in mode_choices %}
    <option value="{{ val }}"{% if request.GET.mode == val %} selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="btn-cms" style="font-size:.82rem">Filter</button>
  <a href="{% url 'cms_veventa_events' %}" class="btn-cms-ghost" style="font-size:.82rem">Clear</a>
</form>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table" style="width:100%">
    <thead>
      <tr>
        <th style="text-align:left">Event</th>
        <th>Date</th>
        <th>Type</th>
        <th>Our Role</th>
        <th>Venue</th>
        {% if show_money %}<th>Tickets</th><th style="text-align:right">P&amp;L</th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr{% if row.obj.status == 'draft' %} class="vv-plan"{% endif %}>
        <td style="text-align:left">
          <a href="{% url 'cms_veventa_event' row.obj.pk %}" style="font-weight:600;text-decoration:none">{{ row.obj.name }}</a>
          {% if row.obj.main_act %}<div class="vv-sub">{{ row.obj.main_act.name }}</div>{% endif %}
        </td>
        <td>
          {% if row.obj.date_jalali %}{{ row.obj.date_jalali }}{% else %}{{ row.obj.date|date:"d M Y" }}{% endif %}
          {% if row.obj.doors_time %}<div class="vv-sub">{{ row.obj.doors_time }}</div>{% endif %}
        </td>
        <td>{{ row.obj.event_type|default:"—" }}</td>
        <td>{{ row.obj.get_mode_display }}</td>
        <td>
          {% if row.obj.venue %}{{ row.obj.venue.name }}<div class="vv-sub">{{ row.obj.city }}</div>
          {% else %}—<div class="vv-sub">{{ row.obj.city }}</div>{% endif %}
        </td>
        {% if show_money %}
        <td>{{ row.sold }}<div class="vv-sub">{{ row.alloc }}</div></td>
        <td style="text-align:right">{% if row.pl < 0 %}<span class="vv-neg">{{ row.pl|floatformat:0 }}</span>{% else %}{{ row.pl|floatformat:0 }}{% endif %}</td>
        {% endif %}
      </tr>
      {% empty %}
      <tr><td colspan="7" style="padding:2rem;text-align:center;color:var(--cms-muted)">No events yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if page_obj.has_other_pages %}
<div style="margin-top:1rem;display:flex;gap:.4rem;align-items:center">
  {% if page_obj.has_previous %}<a class="btn-cms-ghost" href="?{{ filter_qs }}&page={{ page_obj.previous_page_number }}">Previous</a>{% endif %}
  <span style="font-size:.82rem;color:var(--cms-muted)">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
  {% if page_obj.has_next %}<a class="btn-cms-ghost" href="?{{ filter_qs }}&page={{ page_obj.next_page_number }}">Next</a>{% endif %}
</div>
{% endif %}

{% endblock %}