<!DOCTYPE html>
<html lang="ko" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>회원탈퇴 요청 | 신라 AMP</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    };
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white min-h-screen flex items-center justify-center px-4 font-sans">

  <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md transition-all">
    <div class="text-center mb-6">
      <a href="{% url 'main' %}" class="text-3xl font-bold tracking-tight text-white hover:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer">신라 AMP</a>
      <p class="text-sm text-gray-400 mt-2">회원탈퇴 요청</p>
    </div>

    <!-- 경고 메시지 -->
    <div class="bg-red-600 bg-opacity-20 border border-red-500 p-4 rounded-xl mb-6">
      <div class="flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <h3 class="text-sm font-medium text-red-300 mb-1">탈퇴 시 주의사항</h3>
          <div class="text-xs text-red-200 space-y-1">
            <p>• 회원탈퇴 시 계정이 완전히 삭제됩니다</p>
            <p>• 탈퇴 후 재가입 시 기존 정보가 초기화됩니다</p>
            <p>• 탈퇴 승인은 관리자가 처리합니다</p>
          </div>
        </div>
      </div>
    </div>

    {% if messages %}
      {% for message in messages %}
        <div class="p-4 rounded-lg mb-4 {% if message.tags == 'error' %}bg-red-600 text-white{% elif message.tags == 'success' %}bg-green-600 text-white{% else %}bg-blue-600 text-white{% endif %}">
          {{ message }}
        </div>
      {% endfor %}
    {% endif %}

    <form method="POST" class="space-y-6">
      {% csrf_token %}
      
      {% if form.errors %}
        <div class="text-red-400 text-sm mb-4">
          {% for field, errors in form.errors.items %}
            {% for error in errors %}
              <div>{{ error }}</div>
            {% endfor %}
          {% endfor %}
        </div>
      {% endif %}

      <!-- 탈퇴 확인 체크박스 -->
      <div class="bg-gray-700 bg-opacity-50 p-4 rounded-xl border border-gray-600">
        <div class="flex items-start space-x-3">
          {{ form.confirm_withdrawal }}
          <div class="flex-1">
            <label for="{{ form.confirm_withdrawal.id_for_label }}" class="block text-sm font-medium text-white cursor-pointer">
              위 주의사항을 모두 확인했으며, 회원탈퇴를 요청합니다
            </label>
            <p class="text-xs text-gray-400 mt-1">체크 시 탈퇴 요청이 관리자에게 전송됩니다.</p>
          </div>
        </div>
      </div>

      <!-- 버튼들 -->
      <div class="space-y-3">
        <button type="submit" class="w-full py-3 bg-red-600 hover:bg-red-700 active:bg-red-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
          탈퇴 요청 제출
        </button>
        
        <a href="{% url 'accounts:custom_profile_edit' %}" class="block w-full py-3 bg-gray-600 hover:bg-gray-700 active:bg-gray-800 rounded-xl text-white font-semibold text-base text-center transition duration-200 shadow-md hover:shadow-lg">
          취소
        </a>
      </div>
    </form>

  </div>

</body>
</html>
