<!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>

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

      <div>
        <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.name.label }}</label>
        {{ form.name }}
      </div>

      <div>
        <label for="{{ form.phone.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.phone.label }}</label>
        {{ form.phone }}
      </div>

      <div>
        <label for="{{ form.verification_code.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.verification_code.label }}</label>
        {{ form.verification_code }}
      </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>

    <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>

  <script>
    // 이름 선택 시 전화번호 자동 입력
    document.getElementById('{{ form.name.id_for_label }}').addEventListener('change', function() {
      const name = this.value;
      const phoneField = document.getElementById('{{ form.phone.id_for_label }}');
      
      if (name) {
        // AJAX로 전화번호 가져오기
        fetch(`/send-verification-code/`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
          },
          body: JSON.stringify({
            name: name,
            phone: phoneField.value
          })
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // 전화번호 자동 입력 (실제로는 서버에서 가져와야 함)
            const phoneMap = {
              '김봉수': '010-3343-3319',
              '강유천': '010-9845-4512',
              '김기재': '010-1234-5678',
              '박성호': '010-2345-6789',
              '이영희': '010-3456-7890',
              '최정현': '010-4567-8901',
              '정석민': '010-5678-9012',
              '황태욱': '010-6789-0123',
              '임창섭': '010-7890-1234',
              '서강섭': '010-8901-2345'
            };
            phoneField.value = phoneMap[name] || '';
          }
        });
      }
    });
  </script>

</body>
</html> 