<!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 message %}
      <div class="text-green-400 text-sm mb-4 text-center">{{ message }}</div>
    {% endif %}

    {% if step == 1 %}
    <form method="POST" class="space-y-4" id="signup-form-step1">
      {% csrf_token %}
      <div>
        <label for="id_name" class="block mb-1 text-sm text-gray-300">이름</label>
        {{ form1.name }}
      </div>
      <div>
        <label for="id_phone" class="block mb-1 text-sm text-gray-300">전화번호 (대시 없이 입력)</label>
        <div class="flex gap-2">
          {{ form1.phone }}
          <button type="submit" name="action" value="send_code" id="send-code-btn"
            class="px-3 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-white font-semibold text-xs transition duration-200 shadow-md hover:shadow-lg"
            {% if code_sent %}disabled style="opacity:0.5;cursor:not-allowed;"{% endif %}>
            인증번호 발송
          </button>
        </div>
        {% if error %}
          <div class="text-red-400 text-sm mt-2">{{ error }}</div>
        {% endif %}
      </div>
      <div>
        <label for="id_verification_code" class="block mb-1 text-sm text-gray-300">인증번호</label>
        <div class="flex gap-2">
          {{ form1.verification_code }}
          <button type="submit" name="action" value="verify_code" id="verify-code-btn"
            class="px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-semibold text-xs transition duration-200 shadow-md hover:shadow-lg"
            {% if not code_sent %}disabled style="opacity:0.5;cursor:not-allowed;"{% endif %}>
            인증번호 확인
          </button>
        </div>
      </div>
    </form>
    {% elif step == 2 %}
    <form method="POST" class="space-y-4" id="signup-form-step2">
      {% 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>
        <label class="block mb-1 text-sm text-gray-300">이름</label>
        <input type="text" value="{{ name }}" readonly class="w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-gray-400 border border-gray-600" />
      </div>
      <div>
        <label class="block mb-1 text-sm text-gray-300">전화번호</label>
        <input type="text" value="{{ phone }}" readonly class="w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-gray-400 border border-gray-600" />
      </div>

      <div>
        <label for="id_password1" class="block mb-1 text-sm text-gray-300">Password</label>
        {{ form2.password1 }}
      </div>
      <div>
        <label for="id_password2" class="block mb-1 text-sm text-gray-300">Password (again)</label>
        {{ form2.password2 }}
      </div>
      
      <div class="bg-gray-700 bg-opacity-50 p-4 rounded-xl border border-gray-600">
        <div class="flex items-start space-x-4">
          {{ form2.privacy_agreement }}
          <div class="flex-1">
            <label for="{{ form2.privacy_agreement.id_for_label }}" class="block text-base font-semibold text-white cursor-pointer mb-2">
              {{ form2.privacy_agreement.label }}
            </label>
                         <div class="text-sm text-gray-300 leading-relaxed text-left mt-3 -ml-8">
               <div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-600 max-h-40 overflow-y-auto text-xs">
                <div class="text-gray-300 leading-relaxed">
                                     <p class="mb-2"><strong>1. 정보공개 동의</strong></p>
                   <p class="mb-2 text-left">다음 정보의 공개에 동의합니다:</p>
                   <ul class="list-disc list-inside space-y-1 text-gray-300 text-left mb-3">
                    <li>이름</li>
                    <li>생년월일</li>
                    <li>소속</li>
                    <li>직책</li>
                    <li>연락처</li>
                    <li>주소</li>
                    <li>사진</li>
                  </ul>
                  <p class="mb-3 text-yellow-300 font-medium text-left">※ 위 정보는 신라 AMP 제8기 수강생들 간에 공유됩니다.</p>
                  
                  <p class="mb-2"><strong>2. 개인정보처리방침 동의</strong></p>
                  <p class="mb-2"><strong>신라 AMP</strong>은 다음의 목적을 위하여 개인정보를 처리하고 있으며, 다음의 목적 이외의 용도로는 이용하지 않습니다.</p>
                  <ul class="list-disc list-inside space-y-1 mb-2">
                    <li>회원 가입의사 확인, 회원에 대한 서비스 제공에 따른 본인 식별·인증</li>
                    <li>회원자격 유지·관리, 서비스 이용에 따른 본인확인</li>
                    <li>신라 AMP 제8기 수강생들 간의 정보 공유 및 커뮤니케이션</li>
                    <li>서비스 이용에 대한 통계 및 분석</li>
                  </ul>
                  <p class="mb-2"><strong>수집하는 개인정보 항목:</strong></p>
                  <ul class="list-disc list-inside space-y-1 mb-2">
                    <li><strong>필수항목</strong>: 이름, 전화번호, 소속, 직책, 주소, 생년월일, 사진</li>
                  </ul>
                  <p class="mb-2"><strong>보유기간</strong>: 회원의 회원탈퇴 및 파기요청시 지체없이 파기</p>
                  <p class="text-yellow-300 font-medium">※ 자세한 내용은 <a href="{% url 'privacy_policy' %}" target="_blank" class="text-blue-400 hover:text-blue-300 underline">개인정보처리방침</a>을 참조하세요.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </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>