{% extends "base.html" %}

{% block content %}
  <h1 class="text-xl font-bold">프롬프트 등록</h1>
  <p class="mt-2 text-sm text-gray-600">
    회원가입 없이 바로 등록할 수 있어요. 닉네임은 쿠키에 저장됩니다.
  </p>

  {% if error %}
    <div class="mt-4 p-3 rounded border bg-red-50 text-sm text-red-700">
      {{ error }}
    </div>
  {% endif %}

  <form action="/new" method="post" class="mt-6 space-y-4">
    <div>
      <label class="block text-sm font-semibold mb-1">닉네임 (처음 1회만)</label>
      <input
        name="nickname"
        value="{{ nickname|default('') }}"
        placeholder="예: 민트초코"
        class="w-full px-3 py-2 rounded border bg-white focus:outline-none focus:ring"
      />
      <div class="mt-1 text-xs text-gray-500">비워도 되지만, 자동으로 익명 닉네임이 생성됩니다.</div>
    </div>

    <div>
      <label class="block text-sm font-semibold mb-1">카테고리</label>
      <select
        name="category_id"
        class="w-full px-3 py-2 rounded border bg-white focus:outline-none focus:ring"
        required
      >
        {% for c in categories %}
          <option value="{{ c.id }}">{{ c.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div>
      <label class="block text-sm font-semibold mb-1">제목</label>
      <input
        name="title"
        placeholder="예: 회의록 요약 프롬프트"
        class="w-full px-3 py-2 rounded border bg-white focus:outline-none focus:ring"
        required
      />
    </div>

    <div>
      <label class="block text-sm font-semibold mb-1">프롬프트 내용</label>
      <textarea
        name="content"
        rows="10"
        placeholder="여기에 프롬프트를 붙여넣으세요"
        class="w-full px-3 py-2 rounded border bg-white focus:outline-none focus:ring font-mono text-sm"
        required
      ></textarea>
    </div>

    <div>
      <label class="block text-sm font-semibold mb-1">설명 (선택)</label>
      <textarea
        name="description"
        rows="3"
        placeholder="언제/어떻게 쓰면 좋은지, 주의점 등"
        class="w-full px-3 py-2 rounded border bg-white focus:outline-none focus:ring text-sm"
      ></textarea>
    </div>

    <div class="flex items-center gap-2">
      <button class="px-4 py-2 rounded bg-gray-900 text-white hover:bg-gray-800">
        등록
      </button>
      <a href="/" class="px-4 py-2 rounded border bg-white hover:bg-gray-50">
        취소
      </a>
    </div>
  </form>
{% endblock %}