{% extends "base.html" %}

{% block title %}{{ ma.verbose_name_plural }} — {{ admin.title }}{% endblock %}

{% block breadcrumb %}
<a href="{{ admin.prefix }}/">{{ admin.title }}</a>
<span class="breadcrumb-sep">/</span>
<span class="breadcrumb-cur">{{ ma.verbose_name_plural }}</span>
{% endblock %}

{% block topbar_actions %}
<a href="{{ admin.prefix }}/{{ model_name }}/new" class="btn btn-primary btn-sm">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
  </svg>
  Add {{ ma.model.__name__ }}
</a>
{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <div class="page-title">{{ ma.verbose_name_plural }}</div>
    <div class="page-sub">{{ total }} record{{ "s" if total != 1 else "" }} total</div>
  </div>
  <a href="{{ admin.prefix }}/{{ model_name }}/new" class="btn btn-primary">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
    Add New
  </a>
</div>

<div class="card">
  <!-- Toolbar -->
  <div class="toolbar">
    <form method="get" style="display:contents;">
      <div class="search-wrap">
        <svg class="search-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        <input
          class="search-input"
          type="text"
          name="q"
          value="{{ q }}"
          placeholder="Search {{ ma.verbose_name_plural | lower }}…"
          autocomplete="off"
        />
      </div>
      {% if q %}
      <a href="{{ admin.prefix }}/{{ model_name }}" class="btn btn-ghost btn-sm">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Clear
      </a>
      {% endif %}
    </form>
  </div>

  <!-- Table -->
  {% if rows %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          {% for h in headers %}
          <th>{{ h }}</th>
          {% endfor %}
          <th style="width:130px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          {% for cell in row.cells %}
          <td>{{ cell | safe }}</td>
          {% endfor %}
          <td>
            <div class="td-actions">
              <a href="{{ admin.prefix }}/{{ model_name }}/{{ row.pk }}/edit"
                 class="btn btn-ghost btn-sm" title="Edit">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                Edit
              </a>
              <a href="{{ admin.prefix }}/{{ model_name }}/{{ row.pk }}/delete"
                 class="btn btn-danger btn-sm" title="Delete">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="3 6 5 6 21 6"/>
                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                  <path d="M10 11v6"/><path d="M14 11v6"/>
                  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                </svg>
              </a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if pages > 1 %}
  <div class="pager">
    {% if page > 1 %}
    <a class="page-btn" href="?page={{ page - 1 }}{% if q %}&q={{ q }}{% endif %}">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
        <polyline points="15 18 9 12 15 6"/>
      </svg>
    </a>
    {% endif %}

    {% for p in page_range %}
      {% if p == "…" %}
      <span class="page-btn dots">…</span>
      {% elif p == page %}
      <span class="page-btn active">{{ p }}</span>
      {% else %}
      <a class="page-btn" href="?page={{ p }}{% if q %}&q={{ q }}{% endif %}">{{ p }}</a>
      {% endif %}
    {% endfor %}

    {% if page < pages %}
    <a class="page-btn" href="?page={{ page + 1 }}{% if q %}&q={{ q }}{% endif %}">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
        <polyline points="9 18 15 12 9 6"/>
      </svg>
    </a>
    {% endif %}

    <span class="pager-info">Page {{ page }} of {{ pages }}</span>
  </div>
  {% endif %}

  {% else %}
  <div class="empty">
    <div class="empty-ico">🗃️</div>
    {% if q %}
    <h3>No results for "{{ q }}"</h3>
    <p>Try a different search term or <a href="{{ admin.prefix }}/{{ model_name }}" style="color:var(--primary)">clear the filter</a>.</p>
    {% else %}
    <h3>No {{ ma.verbose_name_plural | lower }} yet</h3>
    <p><a href="{{ admin.prefix }}/{{ model_name }}/new" style="color:var(--primary)">Add the first one →</a></p>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}