{% extends "base.htm" %}

{% block content %}
<style>
/* "Currently:" 텍스트 숨기기 */
.help {
    display: none !important;
}

/* 파일 입력 필드 스타일링 */
input[type="file"] {
    border: 1px solid #4a5568;
    padding: 8px;
    border-radius: 4px;
    background-color: #2d3748;
    color: white;
    width: 100%;
}

input[type="file"]::-webkit-file-upload-button {
    background-color: #4299e1;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #3182ce;
}
</style>

<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white px-4">
  <div class="w-full max-w-md bg-gray-800 bg-opacity-90 p-8 rounded-xl shadow-xl space-y-6">
    <div class="text-center">
      <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 text-sm font-medium text-gray-300 mb-1">
            {{ 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 text-sm font-medium text-gray-300 mb-1">
              {{ 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="flex-1 py-3 bg-blue-600 hover:bg-blue-700 rounded-xl text-white font-semibold transition">
              인증번호 발송
            </button>
          {% else %}
            <button type="submit" name="action" value="verify_code"
                    class="flex-1 py-3 bg-green-600 hover:bg-green-700 rounded-xl text-white font-semibold transition">
              인증번호 확인
            </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 text-sm font-medium text-gray-300 mb-1">
            {{ 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 text-sm font-medium text-gray-300 mb-1">
            {{ 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 rounded-xl text-white font-semibold transition">
          비밀번호 변경
        </button>
      </form>
    {% endif %}

    <div class="text-center text-sm">
      <a href="{% url 'accounts:custom_profile_edit' %}" class="text-blue-400 hover:text-blue-500 transition">
        프로필 편집으로 돌아가기
      </a>
    </div>
  </div>
</div>
{% endblock %} 