{% 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">
  <div class="max-w-5xl mx-auto px-4 py-8">
    <!-- 헤더와 다크모드 토글 -->
      <div class="flex justify-between items-center mb-6">
        <a href="{% url 'main' %}" class="text-3xl font-bold hover:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer">신라대학교 AMP 제8기</a>
        <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>

    <!-- Django 메시지 표시 -->
    {% if messages %}
      {% for message in messages %}
        <div class="mb-4 p-4 rounded-lg {% if message.tags == 'success' %}bg-green-600 text-white{% elif message.tags == 'error' %}bg-red-600 text-white{% elif message.tags == 'warning' %}bg-yellow-600 text-white{% else %}bg-blue-600 text-white{% endif %} shadow-lg message-alert">
          <div class="flex items-center justify-between">
            <span>{{ message }}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-white hover:text-gray-200 font-bold text-lg">&times;</button>
          </div>
        </div>
      {% endfor %}
      <script>
        // 메시지 자동 제거 (3초 후)
        document.addEventListener('DOMContentLoaded', function() {
          const messageAlerts = document.querySelectorAll('.message-alert');
          messageAlerts.forEach(function(alert) {
            setTimeout(function() {
              alert.style.transition = 'opacity 0.5s ease-out';
              alert.style.opacity = '0';
              setTimeout(function() {
                alert.remove();
              }, 500);
            }, 3000);
          });
        });
      </script>
    {% endif %}

    <!-- 검색창 -->
    <div class="mb-6">
      <input 
        id="search-input"
        type="text" 
        name="q"
        placeholder="검색..." 
        class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200"
        hx-get="/search/"
        hx-trigger="keyup changed delay:300ms"
        hx-target="#card-container"
        hx-include="#search-input"
        hx-indicator="#loading-indicator"
        autocomplete="off"
      >
      <!-- 로딩 인디케이터 -->
      <div id="loading-indicator" class="htmx-indicator flex justify-center items-center py-4">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
        <span class="ml-2 text-gray-600 dark:text-gray-400">검색 중...</span>
      </div>
    </div>

    <!-- 카드 목록 -->
    <div id="card-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {% for person in people %}
        {% include 'B_main/partials/card.htm' %}
      {% endfor %}
    </div>
  </div>

  <style>
    .htmx-indicator {
      display: none;
    }
    .htmx-request .htmx-indicator {
      display: flex;
    }
  </style>

  <script>
    // 다크모드 토글 스크립트
    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');
    
    // 저장된 테마 확인
    const savedTheme = localStorage.getItem('theme');
    
    // 아이콘 초기 설정 함수
    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>

  <!-- 👤 프로필 모달 컴포넌트 -->
  <div id="profile-modal" class="fixed inset-0 bg-black bg-opacity-70 dark:bg-black dark:bg-opacity-80 z-50 flex items-center justify-center hidden transition-opacity duration-300" onclick="closeProfileModal()">
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-2xl w-full mx-4 p-6" onclick="event.stopPropagation()">
      <!-- 닫기 버튼 -->
      <button 
        onclick="closeProfileModal()" 
        class="absolute top-4 right-4 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
        aria-label="닫기"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
      
      <!-- 프로필 내용 -->
      <div class="text-center">
        <!-- 이름 -->
        <h2 id="modal-name" class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4"></h2>
        
        <!-- 사진 -->
        <div class="mb-6">
          <img id="modal-photo" src="" alt="" class="max-w-full max-h-96 object-contain rounded-lg border-2 border-gray-200 dark:border-gray-600 mx-auto shadow-lg cursor-pointer" onclick="closeProfileModal()">
        </div>
        
        <!-- 소개글 -->
        <div id="modal-intro-section" class="hidden">
          <div id="modal-intro" class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-left"></div>
        </div>
        
        <!-- 소개글이 없을 때 메시지 -->
        <div id="modal-no-intro" class="text-gray-500 dark:text-gray-400 text-sm italic text-left">
          아직 소개글이 없습니다.
        </div>
      </div>
    </div>
  </div>

  <script>
    function openProfileModal(name, photoSrc, intro) {
      const modal = document.getElementById('profile-modal');
      const modalName = document.getElementById('modal-name');
      const modalPhoto = document.getElementById('modal-photo');
      const modalIntro = document.getElementById('modal-intro');
      const modalIntroSection = document.getElementById('modal-intro-section');
      const modalNoIntro = document.getElementById('modal-no-intro');
      
      // 이름 설정
      modalName.textContent = name;
      
      // 사진 설정
      modalPhoto.src = photoSrc;
      modalPhoto.alt = name + '의 사진';
      
      // 소개글 설정
      if (intro && intro.trim() !== '') {
        modalIntro.innerHTML = intro.replace(/\n/g, '<br>');
        modalIntroSection.classList.remove('hidden');
        modalNoIntro.classList.add('hidden');
      } else {
        modalIntroSection.classList.add('hidden');
        modalNoIntro.classList.remove('hidden');
      }
      
      // 모달 표시
      modal.classList.remove('hidden');
      // 스크롤 방지
      document.body.style.overflow = 'hidden';
    }

    function closeProfileModal() {
      const modal = document.getElementById('profile-modal');
      modal.classList.add('hidden');
      // 스크롤 복원
      document.body.style.overflow = 'auto';
    }

    // ESC 키로 모달 닫기
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape') {
        closeProfileModal();
      }
    });
  </script>
</body>
</html>