{% load static %}
<!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 제8기</title>
  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
  </script>
  <!-- 다크모드 초기 설정 스크립트 (FOUC 방지) -->
  <script>
    (function() {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'light') {
        document.documentElement.classList.remove('dark');
      }
    })();
  </script>
</head>
<body class="bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
<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="bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
  <!-- 헤더 -->
  <div class="max-w-5xl mx-auto px-4 py-4">
    <div class="flex justify-between items-center">
      <h1 class="text-3xl font-bold">신라대학교 AMP 제8기</h1>
      <div class="space-x-4 text-sm">
        {% if user.is_authenticated %}
          <div class="flex flex-col items-end sm:items-center sm:flex-row sm:space-x-4 space-y-1 sm:space-y-0">
            <!-- 데스크탑에서만 환영 메시지 표시 -->
            <span class="hidden sm:block text-sm text-gray-700 dark:text-gray-200 font-semibold">
              {% if user.is_superuser %}
                <a href="{% url 'accounts:custom_profile_edit' %}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">{{ user.username }} 님</a>, 환영합니다!
              {% else %}
                <a href="{% url 'accounts:custom_profile_edit' %}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">{{ user.person.이름 }} 님</a>, 환영합니다!
              {% endif %}
            </span>
            <!-- 모바일: 햄버거 메뉴, 데스크탑: 버튼 노출 -->
            <div class="relative">
              <!-- 햄버거 버튼 (모바일에서만 보임) -->
              <button id="mobile-menu-button" class="sm:hidden flex items-center px-2 py-1 border rounded text-gray-700 dark:text-gray-200 border-gray-400 dark:border-gray-600 focus:outline-none" aria-label="메뉴 열기">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
              </button>
              <!-- 모바일 드롭다운 메뉴 -->
              <div id="mobile-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 border border-gray-200 dark:border-gray-700">
                <!-- 모바일에서 환영 메시지 표시 -->
                <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200 font-semibold border-b border-gray-200 dark:border-gray-700">
                  {% if user.is_superuser %}
                    <a href="{% url 'accounts:custom_profile_edit' %}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">{{ user.username }} 님</a>, 환영합니다!
                  {% else %}
                    <a href="{% url 'accounts:custom_profile_edit' %}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">{{ user.person.이름 }} 님</a>, 환영합니다!
                  {% endif %}
                </div>
                <a href="{% url 'account_logout' %}" class="block px-4 py-2 text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700">로그아웃</a>
              </div>
              <!-- 데스크탑 버튼 (sm 이상에서만 보임) -->
              <div class="hidden sm:flex space-x-3 mt-1 sm:mt-0">
                <a href="{% url 'account_logout' %}" class="text-red-400 hover:text-red-500">로그아웃</a>
              </div>
            </div>
            <script>
              // 햄버거 메뉴 토글 스크립트
              document.addEventListener('DOMContentLoaded', function() {
                const btn = document.getElementById('mobile-menu-button');
                const menu = document.getElementById('mobile-menu-dropdown');
                if (btn && menu) {
                  btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    menu.classList.toggle('hidden');
                  });
                  // 메뉴 외부 클릭 시 닫기
                  document.addEventListener('click', function(e) {
                    if (!menu.classList.contains('hidden')) {
                      menu.classList.add('hidden');
                    }
                  });
                  // 메뉴 클릭 시 닫히지 않도록
                  menu.addEventListener('click', function(e) {
                    e.stopPropagation();
                  });
                }
              });
            </script>
          </div>
        {% elif request.session.authenticated %}
          <a href="{% url 'session_logout' %}" class="text-red-400 hover:text-red-500">로그아웃</a>
        {% else %}
          <a href="{% url 'account_login' %}" class="text-blue-400 hover:text-blue-500">로그인</a>
          <a href="{% url 'account_signup' %}" class="text-green-400 hover:text-green-500">회원가입</a>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- 강제 비밀번호 설정 폼 - 화면 중앙 배치 -->
  <div class="flex items-center justify-center min-h-[calc(100vh-120px)]">
    <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">
          <h2 class="text-2xl font-bold tracking-tight text-white">비밀번호 설정</h2>
          <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.new_password1.id_for_label }}" class="block text-sm font-medium text-gray-300 mb-1">
              {{ form.new_password1.label }}
            </label>
            {{ form.new_password1 }}
            {% if form.new_password1.errors %}
              <p class="text-sm text-red-400 mt-1">{{ form.new_password1.errors.0 }}</p>
            {% endif %}
          </div>

          <div>
            <label for="{{ form.new_password2.id_for_label }}" class="block text-sm font-medium text-gray-300 mb-1">
              {{ form.new_password2.label }}
            </label>
            {{ form.new_password2 }}
            {% if form.new_password2.errors %}
              <p class="text-sm text-red-400 mt-1">{{ form.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>
      </div>
    </div>
  </div>
</div>
</body>
</html> 