{% extends "base.html" %}
{% block title %}{{ model_name }} — KORM Admin{% endblock %}
{% block content %}
<div class="topbar">
  <h2>{{ model_name }}</h2>
  <div class="topbar-actions">
    <span class="badge badge-primary">{{ total }} record(s)</span>
    <a href="/{{ model_name }}/create" class="btn btn-primary btn-sm">Create</a>
  </div>
</div>

<div class="card">
  <div class="card-body" style="padding-bottom:0">
    <form class="search-box" method="get" action="/{{ model_name }}/">
      <input type="search" name="search" placeholder="Search {{ model_name }}..." value="{{ search }}" x-on:keydown.enter="$el.form.submit()">
      <button type="submit" class="btn btn-sm">Search</button>
      {% if search %}
      <a href="/{{ model_name }}/" class="btn btn-sm">Clear</a>
      {% endif %}
    </form>
  </div>

  {% if rows %}
  <div style="overflow-x:auto">
    <table>
      <thead>
        <tr>
          {% for col in display_columns %}
          <th>{{ col }}</th>
          {% endfor %}
          <th style="width:120px">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          {% for col in display_columns %}
          <td>
            {% set val = row.get(col) %}
            {% if val is none %}
              <span style="color:var(--text-muted)">—</span>
            {% elif val is boolean %}
              <span :class="'badge ' + ({{ 'true' if val else 'false' }} ? 'badge-primary' : '')">{{ 'true' if val else 'false' }}</span>
            {% elif val is mapping or val is sequence and val is not string %}
              <span style="color:var(--text-muted);font-size:.75rem">{{ val|truncate(60) }}</span>
            {% elif val is string and val|length > 60 %}
              {{ val[:60] }}…
            {% else %}
              {{ val }}
            {% endif %}
          </td>
          {% endfor %}
          <td>
            <div style="display:flex;gap:.25rem">
              <a href="/{{ model_name }}/{{ row[pk] }}" class="btn btn-sm">View</a>
              <a href="/{{ model_name }}/{{ row[pk] }}/edit" class="btn btn-sm">Edit</a>
              <form method="post" action="/{{ model_name }}/{{ row[pk] }}/delete" style="display:inline" x-data @submit.prevent="if(confirm('Delete this {{ model_name }} record?')) $el.submit()">
                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="pagination">
    {% if page > 1 %}
    <a href="/{{ model_name }}/?page={{ page - 1 }}{% if search %}&search={{ search }}{% endif %}" class="btn btn-sm">Previous</a>
    {% endif %}
    <span class="page-info">Page {{ page }} of {{ total_pages }}</span>
    {% if page < total_pages %}
    <a href="/{{ model_name }}/?page={{ page + 1 }}{% if search %}&search={{ search }}{% endif %}" class="btn btn-sm">Next</a>
    {% endif %}
  </div>
  {% else %}
  <div class="empty-state">
    <p>No records found.</p>
    {% if search %}
    <p style="margin-top:.5rem">Try a different search term or <a href="/{{ model_name }}/">clear filters</a>.</p>
    {% else %}
    <p style="margin-top:.5rem"><a href="/{{ model_name }}/create">Create the first {{ model_name }} record</a>.</p>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}