{% extends "base.html" %}
{% block title %}管理者ログイン - わせます9期ブログ{% endblock %}
{% block body %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="text-center mb-8">
      <h1 class="text-2xl font-bold text-[#bf283a] dark:text-[#f08090] mb-1">わせます9期ブログ</h1>
      <p class="text-sm text-gray-400 dark:text-gray-500">管理者ログイン</p>
    </div>
    <form method="post" action="/admin/login" class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-6 space-y-4 border dark:border-gray-700">
      {% if error %}
        <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-600 dark:text-red-400 rounded-lg px-4 py-2 text-sm">{{ error }}</div>
      {% endif %}
      <div>
        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">合言葉</label>
        <input type="text" name="password" autofocus
               class="w-full border dark:border-gray-600 rounded-xl px-4 py-3 text-base bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#e09099]"
               placeholder="合言葉を入力">
      </div>
      <button type="submit"
              class="w-full bg-[#bf283a] text-white py-3 rounded-xl font-bold text-base hover:bg-[#a01f2f] transition">
        ログイン
      </button>
    </form>
    <div class="text-center mt-4">
      <a href="/" class="text-sm text-gray-400 dark:text-gray-500 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← ブログに戻る</a>
    </div>
  </div>
</div>
{% endblock %}