{% extends "base.html" %}
{% block title %}記事管理 - わせます9期ブログ{% endblock %}
{% block body %}
<div class="max-w-2xl mx-auto px-4 py-6">
  <div class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">📋 記事管理</h1>
      <a href="/" class="text-xs text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← ブログに戻る</a>
    </div>
    <div class="flex gap-2">
      <a href="/admin/new"
         class="bg-[#bf283a] text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-[#a01f2f] transition">
        ✏️ 新規記事
      </a>
      <form method="post" action="/admin/logout">
        <button type="submit" class="border dark:border-gray-600 px-4 py-2 rounded-xl text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition">
          ログアウト
        </button>
      </form>
    </div>
  </div>

  <div class="space-y-3">
    {% for a in articles %}
      {% set tags = get_tags(a) %}
      {% set is_draft = a.get("title","").startswith("【下書き】") %}
      <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4">
        <div class="flex justify-between items-start gap-2">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1">
              {% if is_draft %}
                <span class="text-[10px] whitespace-nowrap flex-shrink-0 bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-400 px-2 py-0.5 rounded-full font-bold">下書</span>
              {% else %}
                <span class="text-[10px] whitespace-nowrap flex-shrink-0 bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 px-2 py-0.5 rounded-full font-bold">公開</span>
              {% endif %}
              <span class="font-bold text-gray-800 dark:text-gray-100 text-sm truncate">{{ a.get("title","無題") }}</span>
            </div>
            <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{{ a.get("author","") }} ｜ ID: {{ a.get("id","") }}</p>
            <div>{% for t in tags %}<span class="tag-badge">#{{ t }}</span>{% endfor %}</div>
          </div>
          <div class="flex gap-2 flex-shrink-0">
            <a href="/admin/edit/{{ a.get('id','') }}"
               class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-blue-100 dark:hover:bg-blue-900/50 transition">
              📝 編集
            </a>
            <button onclick="confirmDelete(this.dataset.id, this.dataset.title)"
                    data-id="{{ a.get('id','') }}"
                    data-title="{{ a.get('title','') | e }}"
                    class="bg-red-50 dark:bg-red-900/30 text-red-500 dark:text-red-400 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-red-100 dark:hover:bg-red-900/50 transition">
              🗑️
            </button>
          </div>
        </div>
      </div>
    {% else %}
      <div class="text-center text-gray-400 dark:text-gray-500 py-16">記事がありません</div>
    {% endfor %}
  </div>
</div>

<!-- 削除確認モーダル -->
<div id="delete-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 w-80 shadow-2xl border dark:border-gray-700">
    <h2 class="font-bold text-gray-800 dark:text-gray-100 mb-2">削除の確認</h2>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">「<span id="delete-title" class="font-bold text-gray-700 dark:text-gray-200"></span>」を削除しますか？この操作は取り消せません。</p>
    <div class="flex gap-3">
      <button onclick="closeDeleteModal()" class="flex-1 border dark:border-gray-600 rounded-xl py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition">キャンセル</button>
      <button onclick="executeDelete()" class="flex-1 bg-red-500 text-white rounded-xl py-2 text-sm font-bold hover:bg-red-600 transition">削除する</button>
    </div>
  </div>
</div>

<script>
let deleteTargetId = null;
function confirmDelete(id, title) {
  deleteTargetId = id;
  document.getElementById('delete-title').textContent = title;
  document.getElementById('delete-modal').classList.remove('hidden');
}
function closeDeleteModal() {
  document.getElementById('delete-modal').classList.add('hidden');
  deleteTargetId = null;
}
async function executeDelete() {
  if (!deleteTargetId) return;
  const res = await fetch(`/api/article/${deleteTargetId}`, {method: 'DELETE'});
  const data = await res.json();
  if (data.success) { location.reload(); }
  else { alert('削除に失敗しました: ' + (data.error || '')); closeDeleteModal(); }
}
</script>
{% endblock %}