{% extends "main/main.html" %}
{% block content %}
<div class="mb-6">
  <h1 class="text-3xl font-bold text-slate-800">Documents</h1>
  <p class="text-slate-500 mt-1">Download available documents and files.</p>
</div>

{% if daftar.items %}
<div class="space-y-3">
  {% for d in daftar.items %}
  <div class="flex items-center gap-4 bg-white rounded-xl shadow-card p-4">
    <div class="shrink-0 h-12 w-12 rounded-lg bg-brand-50 text-brand-600 flex items-center justify-center text-xl">
      <i class="fas fa-file-alt"></i>
    </div>
    <div class="min-w-0 flex-grow">
      <a href="{{ url_for('main.detaildokumen', slug=d.slug) }}" class="font-semibold text-slate-700 hover:text-brand-600 transition line-clamp-1">{{ d.judul }}</a>
      {% if d.deskripsi %}<p class="text-xs text-slate-400 line-clamp-1">{{ d.deskripsi }}</p>{% endif %}
      <p class="text-xs text-slate-400 mt-0.5">{{ d.tipe or '-' }}{% if d.ukuran %} · {{ d.ukuran }}{% endif %} · {{ d.tanggaldibuat.strftime('%d %B %Y') }}</p>
    </div>
    <a href="{{ url_for('main.unduhdokumen', iddokumen=d.id) }}" class="btn-primary shrink-0 text-sm"><i class="fas fa-download"></i> Download</a>
  </div>
  {% endfor %}
</div>

<div class="mt-8 flex justify-center gap-2 text-sm">
  {% if daftar.has_prev %}
  <a href="{{ url_for('main.dokumen', halaman=daftar.prev_num) }}" class="px-3 py-1.5 rounded-lg bg-white shadow-card text-brand-600 hover:bg-brand-50">« Previous</a>
  {% endif %}
  <span class="px-3 py-1.5 text-slate-500">Page {{ daftar.page }} of {{ daftar.pages }}</span>
  {% if daftar.has_next %}
  <a href="{{ url_for('main.dokumen', halaman=daftar.next_num) }}" class="px-3 py-1.5 rounded-lg bg-white shadow-card text-brand-600 hover:bg-brand-50">Next »</a>
  {% endif %}
</div>
{% else %}
<div class="text-center py-20 text-slate-400">
  <i class="fas fa-folder-open fa-3x mb-3"></i>
  <p>No documents published yet.</p>
</div>
{% endif %}
{% endblock content %}