<!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-sm transition-all">
            <div class="text-center mb-6">
      <h1 class="text-3xl font-bold tracking-tight text-white">신라 AMP</h1>
      <p class="text-sm text-gray-400 mt-2">전화번호 인증을 통해 비밀번호를 재설정하세요</p>
    </div>

        {% if step == 1 %}
          <!-- 1단계: 전화번호 인증 -->
          <form method="POST" class="space-y-4">
            {% csrf_token %}
            {% if error %}
              <div class="text-red-400 text-sm mb-2">{{ error }}</div>
            {% endif %}
            {% if message %}
              <div class="text-green-400 text-sm mb-2">{{ message }}</div>
            {% endif %}

                         <div>
               <label for="{{ form1.phone.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form1.phone.label }}</label>
               {{ form1.phone }}
               {% if form1.phone.errors %}
                 <p class="text-sm text-red-400 mt-1">{{ form1.phone.errors.0 }}</p>
               {% endif %}
             </div>

            {% if code_sent %}
                             <div>
                 <label for="{{ form1.verification_code.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form1.verification_code.label }}</label>
                 {{ form1.verification_code }}
                 {% if form1.verification_code.errors %}
                   <p class="text-sm text-red-400 mt-1">{{ form1.verification_code.errors.0 }}</p>
                 {% endif %}
               </div>
            {% endif %}

                         <div class="flex space-x-3">
               {% if not code_sent %}
                 <button type="submit" name="action" value="send_code"
                   class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
                   인증번호 발송
                 </button>
               {% else %}
                 <button type="submit" name="action" value="verify_code"
                   class="w-full py-3 bg-green-600 hover:bg-green-700 active:bg-green-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
                   인증번호 확인
                 </button>
               {% endif %}
             </div>
          </form>

        {% elif step == 2 %}
          <!-- 2단계: 새 비밀번호 입력 -->
          <form method="POST" class="space-y-4">
            {% csrf_token %}
            {% if form2.errors %}
              <div class="text-red-400 text-sm mb-2">
                {% for field, errors in form2.errors.items %}
                  {% for error in errors %}
                    {{ error }}
                  {% endfor %}
                {% endfor %}
              </div>
            {% endif %}

            <div class="text-center mb-4">
              <p class="text-sm text-gray-400">전화번호: {{ phone }}</p>
            </div>

                         <div>
               <label for="{{ form2.new_password1.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form2.new_password1.label }}</label>
               {{ form2.new_password1 }}
               {% if form2.new_password1.errors %}
                 <p class="text-sm text-red-400 mt-1">{{ form2.new_password1.errors.0 }}</p>
               {% endif %}
             </div>

             <div>
               <label for="{{ form2.new_password2.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form2.new_password2.label }}</label>
               {{ form2.new_password2 }}
               {% if form2.new_password2.errors %}
                 <p class="text-sm text-red-400 mt-1">{{ form2.new_password2.errors.0 }}</p>
               {% endif %}
             </div>

             <button type="submit"
               class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
               비밀번호 재설정
             </button>
          </form>
        {% endif %}

            <div class="mt-6 text-center text-sm">
      <a href="{% url 'account_login' %}" class="text-blue-400 hover:text-blue-500 transition">
        로그인으로 돌아가기
      </a>
    </div>
  </div>
</body>
</html> 