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

{% block extra_head %}
<style>
  .vv-score { display:inline-block;border-radius:99px;padding:.15rem .6rem;font-size:.75rem;font-weight:700;min-width:38px;text-align:center;background:#eef2f6;color:var(--cms-muted); }
  .vv-sub { font-size:.75rem;color:var(--cms-muted);margin-top:2px; }
  .vv-filters { display:flex;gap:.5rem;align-items:center;margin-bottom:1rem; }
  .vv-filters input { padding:.4rem .6rem;border:1px solid var(--cms-border);border-radius:7px;font-size:.82rem; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{{ title }} <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 {{ title|lower }}">
  <button type="submit" class="btn-cms" style="font-size:.82rem">Search</button>
</form>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table" style="width:100%">
    <thead><tr>
      <th style="text-align:left">Name</th><th>Detail</th><th>Location</th><th>Score</th>
    </tr></thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td style="text-align:left"><strong>{{ row.obj.name }}</strong></td>
        <td>
          {% if key == 'artists' %}{{ row.obj.roles|default:"—" }}
          {% elif key == 'venues' %}{{ row.obj.capacity|default:"—" }}
          {% elif key == 'suppliers' %}{{ row.obj.category|default:"—" }}
          {% elif key == 'contacts' %}{{ row.obj.get_kind_display }}
          {% else %}{{ row.obj.categories|default:"—" }}{% endif %}
        </td>
        <td>{{ row.obj.city|default:"—" }}{% if row.obj.country %}<div class="vv-sub">{{ row.obj.country }}</div>{% endif %}</td>
        <td>{% if row.score %}<span class="vv-score">{{ row.score }}</span>{% else %}&mdash;{% endif %}</td>
      </tr>
      {% empty %}
      <tr><td colspan="4" style="padding:2rem;text-align:center;color:var(--cms-muted)">Nothing here 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="?page={{ page_obj.previous_page_number }}&q={{ q }}">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="?page={{ page_obj.next_page_number }}&q={{ q }}">Next</a>{% endif %}
</div>
{% endif %}
{% endblock %}