{% 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-8">
    <!-- 헤더와 다크모드 토글 -->
      <div class="flex justify-between items-center mb-6">
        <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">
                <!-- 모바일: 다크모드 토글 버튼과 햄버거 버튼을 가로로 배치 -->
                <div class="sm:hidden flex items-center space-x-2">
                  <!-- 모바일: 다크모드 토글 버튼 (햄버거 버튼 왼쪽) -->
                  <button id="theme-toggle-mobile" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="테마 변경">
                    <!-- 라이트 모드 아이콘 (다크모드일 때 보임) -->
                    <svg id="theme-toggle-light-icon-mobile" class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
                    </svg>
                    <!-- 다크 모드 아이콘 (라이트모드일 때 보임) -->
                    <svg id="theme-toggle-dark-icon-mobile" class="w-5 h-5 text-gray-800 dark:text-gray-200 hidden" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                    </svg>
                  </button>
                  <!-- 햄버거 버튼 (모바일에서만 보임) -->
                  <button id="mobile-menu-button" class="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>
                <!-- 모바일 드롭다운 메뉴 -->
                <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 items-center space-x-3 mt-1 sm:mt-0">
                  <a href="{% url 'account_logout' %}" class="text-red-400 hover:text-red-500">로그아웃</a>
                  <!-- 데스크탑: 다크모드 토글 버튼 (로그아웃 오른쪽) -->
                  <button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="테마 변경">
                    <!-- 라이트 모드 아이콘 (다크모드일 때 보임) -->
                    <svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
                    </svg>
                    <!-- 다크 모드 아이콘 (라이트모드일 때 보임) -->
                    <svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-800 dark:text-gray-200 hidden" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                    </svg>
                  </button>
                </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 class="flex justify-center">
      <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>

        {% if messages %}
          {% for message in messages %}
            <div class="p-4 rounded-lg {% if message.tags == 'success' %}bg-green-600{% else %}bg-red-600{% endif %} text-white mb-4">
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}

        <form method="POST" enctype="multipart/form-data" 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 class="block mb-1 text-sm text-gray-300">이름</label>
            {{ form.full_name }}
          </div>

          <div>
            <label class="block mb-1 text-sm text-gray-300">전화번호</label>
            <input type="text" value="{{ user.username }}" readonly 
                   class="w-full px-4 py-3 rounded-xl bg-gray-600 bg-opacity-80 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
          </div>

          {% if form.instance.생년월일 %}
            <div>
              <label class="block mb-1 text-sm text-gray-300">생년월일</label>
              <input type="text" value="{{ form.instance.생년월일|date:'Y-m-d' }}" readonly 
                     class="w-full px-4 py-3 rounded-xl bg-gray-600 bg-opacity-80 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
            </div>
          {% endif %}

          {% if form.instance.TITLE %}
            <div>
              <label class="block mb-1 text-sm text-gray-300">TITLE</label>
              <input type="text" value="{{ form.instance.TITLE }}" readonly 
                     class="w-full px-4 py-3 rounded-xl bg-gray-600 bg-opacity-80 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
            </div>
          {% endif %}

          <!-- 편집 가능한 필드들 -->
          <div>
            <label for="{{ form.소속.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.소속.label }}</label>
            {{ form.소속 }}
          </div>
          <div>
            <label for="{{ form.직책.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.직책.label }}</label>
            {{ form.직책 }}
          </div>
          <div>
            <label for="{{ form.주소.id_for_label }}" class="block mb-1 text-sm text-gray-300">{{ form.주소.label }}</label>
            {{ form.주소 }}
          </div>
          <div>
            <label for="{{ form.사진.id_for_label }}" class="block mb-1 text-sm text-gray-300">프로필 사진</label>
            {{ form.사진 }}
            
            {% if form.instance.사진 and form.instance.사진.url %}
              <div class="mt-2">
                <img id="profile-preview" src="{{ form.instance.사진.url }}" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
              </div>
            {% else %}
              <div class="mt-2">
                <img id="profile-preview" src="/static/B_main/images/default_user.png" alt="프로필 사진 미리보기" class="w-24 h-24 rounded-full object-cover border-2 border-gray-500" />
              </div>
            {% endif %}
          </div>

          <!-- 키워드 섹션 -->
          <div class="border-t border-gray-600 pt-4">
            <h3 class="text-lg font-semibold text-blue-400 mb-3">검색 키워드</h3>
            <p class="text-sm text-gray-400 mb-4">다른 사람들이 당신을 찾을 수 있도록 키워드를 설정하세요</p>
            
            <div class="mb-3">
              {{ form.keyword1 }}
            </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>

        <!-- 비밀번호 변경 섹션 -->
        <div class="mt-6 pt-6 border-t border-gray-600">
          <div class="text-center">
            
                          <div class="space-y-3">
                <a href="{% url 'accounts:password_change_logged_in' %}"
                   class="block w-full px-6 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg text-white font-medium text-sm transition duration-200 shadow-md hover:shadow-lg">
                  비밀번호 변경
                </a>
              </div>
          </div>
        </div>

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

<script>
  // 사진 업로드 시 미리보기
  document.querySelector('input[type=file][name$=사진]').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(ev) {
        document.getElementById('profile-preview').src = ev.target.result;
      };
      reader.readAsDataURL(file);
    }
  });

  // 다크모드 토글 스크립트
  const themeToggle = document.getElementById('theme-toggle');
  const themeToggleMobile = document.getElementById('theme-toggle-mobile');
  const lightIcon = document.getElementById('theme-toggle-light-icon');
  const darkIcon = document.getElementById('theme-toggle-dark-icon');
  const lightIconMobile = document.getElementById('theme-toggle-light-icon-mobile');
  const darkIconMobile = document.getElementById('theme-toggle-dark-icon-mobile');
  
  // 아이콘 초기 설정 함수
  function updateIcons() {
    const isDark = document.documentElement.classList.contains('dark');
    
    if (isDark) {
      // 다크모드일 때
      if (lightIcon) lightIcon.classList.remove('hidden');
      if (darkIcon) darkIcon.classList.add('hidden');
      if (lightIconMobile) lightIconMobile.classList.remove('hidden');
      if (darkIconMobile) darkIconMobile.classList.add('hidden');
    } else {
      // 라이트모드일 때
      if (lightIcon) lightIcon.classList.add('hidden');
      if (darkIcon) darkIcon.classList.remove('hidden');
      if (lightIconMobile) lightIconMobile.classList.add('hidden');
      if (darkIconMobile) darkIconMobile.classList.remove('hidden');
    }
  }
  
  // 초기 아이콘 설정
  updateIcons();
  
  // 테마 토글 함수
  function toggleTheme() {
    const isDark = document.documentElement.classList.contains('dark');
    
    if (isDark) {
      // 라이트 모드로 전환
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      // 다크 모드로 전환
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
    
    updateIcons();
  }
  
  // 데스크탑 토글 버튼 클릭 이벤트
  if (themeToggle) {
    themeToggle.addEventListener('click', toggleTheme);
  }
  
  // 모바일 토글 버튼 클릭 이벤트
  if (themeToggleMobile) {
    themeToggleMobile.addEventListener('click', toggleTheme);
  }
</script>
</body>
</html>
