{% 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://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="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full text-center">
      <!-- 로고/제목 -->
      <div class="mb-8">
        <a href="/" class="text-2xl font-bold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
          신라대학교 AMP 제8기
        </a>
      </div>
      
      <!-- 500 아이콘 -->
      <div class="mb-8">
        <div class="w-32 h-32 mx-auto bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
          <svg class="w-16 h-16 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
        </div>
        <h1 class="text-6xl font-bold text-red-300 dark:text-red-600 mb-2">500</h1>
      </div>
      
      <!-- 에러 메시지 -->
      <div class="mb-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
          서버 내부 오류
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
          서버에서 오류가 발생했습니다.<br>
          잠시 후 다시 시도해주시거나 관리자에게 문의해주세요.
        </p>
      </div>
      
      <!-- 액션 버튼들 -->
      <div class="space-y-4">
        
        
        <button 
          onclick="location.reload()" 
          class="inline-block w-full bg-gray-600 dark:bg-gray-700 text-white px-6 py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition-colors duration-200 font-semibold"
        >
          🔄 페이지 새로고침
        </button>
      </div>
      
      
      
      <!-- 푸터 -->
      <div class="mt-12 text-xs text-gray-500 dark:text-gray-400">
        <p>신라대학교 AMP 제8기</p>
        <p class="mt-1">문제가 지속되면 관리자에게 문의해주세요.</p>
      </div>
    </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');

    function updateThemeIcons() {
      if (document.documentElement.classList.contains('dark')) {
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
      } else {
        lightIcon.classList.add('hidden');
        darkIcon.classList.remove('hidden');
      }
    }

    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');
      }
      
      updateThemeIcons();
    }

    // 초기 아이콘 설정
    updateThemeIcons();

    // 토글 버튼 클릭 이벤트
    if (themeToggle) {
      themeToggle.addEventListener('click', toggleTheme);
    }
  </script>
</body>
</html>
