{% 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">
      <h1 class="text-3xl font-bold">신라대학교 AMP 제8기</h1>
      
      <!-- 다크모드 토글 버튼 -->
      <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 duration-200"
        aria-label="다크모드 토글"
      >
        <!-- 라이트 모드 아이콘 (다크모드일 때 표시) -->
        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" 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" 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 class="mb-6">
      <input 
        id="search-input"
        type="text" 
        name="search"
        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:500ms"
        hx-target="#card-container"
        hx-include="#search-input"
        autocomplete="off"
      >
    </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>

  <script>
    // 다크모드 토글 스크립트
    const themeToggle = document.getElementById('theme-toggle');
    const lightIcon = document.getElementById('theme-toggle-light-icon');
    const darkIcon = document.getElementById('theme-toggle-dark-icon');
    
    // 저장된 테마 확인
    const savedTheme = localStorage.getItem('theme');
    
    // 아이콘 초기 설정
    if (savedTheme === 'light') {
      lightIcon.classList.add('hidden');
      darkIcon.classList.remove('hidden');
    } else {
      // 다크모드 (기본값)
      lightIcon.classList.remove('hidden');
      darkIcon.classList.add('hidden');
    }
    
    // 토글 버튼 클릭 이벤트
    themeToggle.addEventListener('click', () => {
      const isDark = document.documentElement.classList.contains('dark');
      
      if (isDark) {
        // 라이트 모드로 전환
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
        lightIcon.classList.add('hidden');
        darkIcon.classList.remove('hidden');
      } else {
        // 다크 모드로 전환
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
      }
    });
  </script>
</body>
</html>