{% extends "dashboard/base.html" %}
{% load dash_extras %}

{% block header_actions %}
  {% if create_url %}
    <a href="{% url create_url %}" class="btn btn-primary btn-shine !py-2.5 !px-5 !text-xs">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      <span class="hidden sm:inline">Tambah</span>
    </a>
  {% endif %}
{% endblock %}

{% block content %}

{% if searchable %}
  <form method="get" class="reveal mb-5 flex gap-2">
    <input type="search" name="q" value="{{ query }}" placeholder="Cari {{ page_title|lower }}..."
           class="w-full max-w-md rounded-xl border border-white/10 bg-black/40 px-4 py-2.5 text-sm text-neutral-100 placeholder-neutral-500 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25">
    <button type="submit" class="btn btn-ghost !py-2.5 !px-5 !text-xs">Cari</button>
    {% if query %}<a href="{{ request.path }}" class="btn btn-ghost !py-2.5 !px-4 !text-xs">Reset</a>{% endif %}
  </form>
{% endif %}

{% if object_list %}
  <!-- Tabel (desktop) -->
  <div class="reveal card hidden overflow-hidden md:block">
    <div class="overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-white/10 text-xs uppercase tracking-wider text-neutral-500">
            {% for col in columns %}<th class="px-5 py-3.5 font-semibold">{{ col.label }}</th>{% endfor %}
            <th class="px-5 py-3.5 text-right font-semibold">Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for obj in object_list %}
            <tr class="border-b border-white/5 transition last:border-0 hover:bg-white/[0.03]">
              {% for col in columns %}
                <td class="px-5 py-3.5 align-middle">
                  {% get_attr obj col.field as val %}
                  {% if col.type == 'bool' %}
                    {% if val %}
                      <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/12 px-2.5 py-1 text-[0.68rem] font-bold uppercase text-emerald-400">Ya</span>
                    {% else %}
                      <span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-2.5 py-1 text-[0.68rem] font-bold uppercase text-neutral-500">Tidak</span>
                    {% endif %}
                  {% elif col.type == 'level' %}
                    <span class="flex items-center gap-2">
                      <span class="h-1.5 w-24 overflow-hidden rounded-full bg-white/8">
                        <span class="block h-full rounded-full bg-gradient-to-r from-gold-400 to-brand-500" style="width: {{ val }}%"></span>
                      </span>
                      <span class="text-xs text-neutral-500">{{ val }}%</span>
                    </span>
                  {% elif col.type == 'url' %}
                    <a href="{{ val }}" target="_blank" rel="noopener" class="text-brand-400 hover:text-gold-400">{{ val|truncatechars:42 }}</a>
                  {% elif col.type == 'date' %}
                    <span class="text-neutral-400">{{ val|date:"d M Y" }}</span>
                  {% elif col.type == 'strong' %}
                    <span class="font-semibold text-neutral-100">{{ val|truncatechars:52 }}</span>
                  {% else %}
                    <span class="text-neutral-400">{{ val|default:"—"|truncatechars:42 }}</span>
                  {% endif %}
                </td>
              {% endfor %}

              <td class="px-5 py-3.5">
                <div class="flex items-center justify-end gap-1.5">
                  {% if reorder_key %}
                    <form method="post" action="{% url 'dashboard:reorder' reorder_key obj.pk 'up' %}">{% csrf_token %}
                      <button type="submit" title="Naikkan" class="grid h-8 w-8 place-items-center rounded-lg text-neutral-500 transition hover:bg-white/5 hover:text-gold-400">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
                      </button>
                    </form>
                    <form method="post" action="{% url 'dashboard:reorder' reorder_key obj.pk 'down' %}">{% csrf_token %}
                      <button type="submit" title="Turunkan" class="grid h-8 w-8 place-items-center rounded-lg text-neutral-500 transition hover:bg-white/5 hover:text-gold-400">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                      </button>
                    </form>
                  {% endif %}
                  <a href="{% url update_url obj.pk %}" class="grid h-8 w-8 place-items-center rounded-lg text-neutral-400 transition hover:bg-brand-500/12 hover:text-brand-400" title="Edit">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                  </a>
                  <a href="{% url delete_url obj.pk %}" class="grid h-8 w-8 place-items-center rounded-lg text-neutral-400 transition hover:bg-red-500/12 hover:text-red-400" title="Hapus">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                  </a>
                </div>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Kartu (mobile) -->
  <div class="space-y-3 md:hidden">
    {% for obj in object_list %}
      <div class="reveal card p-4" data-delay="{{ forloop.counter0 }}0">
        {% for col in columns %}
          {% get_attr obj col.field as val %}
          <div class="flex items-start justify-between gap-3 {% if not forloop.first %}mt-2.5 border-t border-white/5 pt-2.5{% endif %}">
            <span class="shrink-0 text-xs font-semibold uppercase tracking-wide text-neutral-600">{{ col.label }}</span>
            <span class="min-w-0 text-right text-sm">
              {% if col.type == 'bool' %}
                <span class="rounded-full px-2 py-0.5 text-[0.65rem] font-bold uppercase {% if val %}bg-emerald-500/12 text-emerald-400{% else %}bg-white/5 text-neutral-500{% endif %}">{% if val %}Ya{% else %}Tidak{% endif %}</span>
              {% elif col.type == 'level' %}
                <span class="text-neutral-300">{{ val }}%</span>
              {% elif col.type == 'date' %}
                <span class="text-neutral-400">{{ val|date:"d M Y" }}</span>
              {% elif col.type == 'strong' %}
                <span class="font-semibold text-neutral-100">{{ val }}</span>
              {% else %}
                <span class="break-words text-neutral-400">{{ val|default:"—"|truncatechars:60 }}</span>
              {% endif %}
            </span>
          </div>
        {% endfor %}

        <div class="mt-4 flex gap-2 border-t border-white/5 pt-3.5">
          {% if reorder_key %}
            <form method="post" action="{% url 'dashboard:reorder' reorder_key obj.pk 'up' %}">{% csrf_token %}
              <button class="btn btn-ghost !py-2 !px-3 !text-xs">↑</button>
            </form>
            <form method="post" action="{% url 'dashboard:reorder' reorder_key obj.pk 'down' %}">{% csrf_token %}
              <button class="btn btn-ghost !py-2 !px-3 !text-xs">↓</button>
            </form>
          {% endif %}
          <a href="{% url update_url obj.pk %}" class="btn btn-ghost flex-1 !py-2 !text-xs">Edit</a>
          <a href="{% url delete_url obj.pk %}" class="btn btn-ghost !py-2 !px-4 !text-xs !text-red-400">Hapus</a>
        </div>
      </div>
    {% endfor %}
  </div>

  {% include "dashboard/partials/pagination.html" %}

{% else %}
  <div class="reveal card p-12 text-center">
    <p class="font-display text-5xl">📭</p>
    <p class="mt-4 font-display text-lg font-bold text-neutral-300">Belum ada data</p>
    <p class="mt-1.5 text-sm text-neutral-500">{% if query %}Tidak ada hasil untuk "{{ query }}".{% else %}Klik tombol tambah untuk membuat data pertama.{% endif %}</p>
    {% if create_url and not query %}
      <a href="{% url create_url %}" class="btn btn-primary btn-shine mt-6">Tambah Sekarang</a>
    {% endif %}
  </div>
{% endif %}

{% endblock %}