{% extends "base.html" %}
{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-xl font-semibold">Posts ({{ posts|length }})</h1>
  <a href="/" class="text-sm text-blue-600 hover:underline">← dashboard</a>
</div>

<div class="bg-white rounded-lg shadow divide-y">
  {% for p in posts %}
  <div id="post-{{ p.ref }}" class="p-4 flex items-center gap-4">
    <div class="text-xs text-slate-400 w-24 shrink-0">{{ p.date }}</div>
    <div class="flex-1 min-w-0">
      <div class="font-medium truncate">{{ p.title or p.slug }}</div>
      <div class="text-xs text-slate-500">
        {% for lang in p.languages %}
        <span class="stage-pill bg-slate-100 text-slate-700">{{ lang }}</span>
        {% endfor %}
        {% if p.image %}
        <span class="stage-pill bg-indigo-100 text-indigo-700">image</span>
        {% endif %}
      </div>
    </div>
    <a href="/{{ p.date.replace('-', '/') }}/{{ p.slug }}/" target="_blank"
       class="text-xs text-blue-600 hover:underline">view</a>
    <button class="text-xs text-rose-600 hover:underline"
            hx-delete="/posts/{{ p.ref }}"
            hx-target="#post-{{ p.ref }}"
            hx-swap="outerHTML"
            hx-confirm="정말 이 포스트를 삭제할까요? (git revert 커밋이 생성됩니다)">delete</button>
  </div>
  {% else %}
  <div class="p-6 text-slate-400 text-sm">아직 포스트가 없습니다.</div>
  {% endfor %}
</div>
{% endblock %}