{% load static %}
<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ page_title|default:site_name }}{% endblock %}</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Yitao-Ren Gallery - 现代摄影作品展示网站">
    <meta name="keywords" content="摄影,画廊,艺术作品,现代艺术">
    <meta name="author" content="Yitao-Ren Gallery">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{% block og_title %}{{ page_title|default:site_name }}{% endblock %}">
    <meta property="og:description" content="Yitao-Ren Gallery - 现代摄影作品展示网站">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{% block twitter_title %}{{ page_title|default:site_name }}{% endblock %}">
    <meta name="twitter:description" content="Yitao-Ren Gallery - 现代摄影作品展示网站">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Playfair+Display&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://gallery.lizexua.com/static/dist/styles.css">

    <!-- Custom CSS -->
    <style>
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }
        ::-webkit-scrollbar-thumb {
            background: #3b82f6;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #2563eb;
        }

        /* 图片懒加载样式 */
        .lazy-image {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .lazy-image.loaded {
            opacity: 1;
        }

        /* 页面过渡动画 */
        .page-transition {
            animation: fadeIn 0.3s ease-in-out;
        }

        /* 网格项悬停效果 */
        .grid-item {
            transition: all 0.3s ease;
        }
        .grid-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        }

        /* 导航栏下划线动画 */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
    </style>

    {% block extra_css %}{% endblock %}
</head>
<body class="bg-dark text-gray-100 font-sans min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-black/80 backdrop-blur-sm z-50 border-b border-gray-800">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <a href="{% url 'index' %}" class="text-xl font-serif font-bold uppercase tracking-wider hover:text-blue-400 transition-colors">
                    YITAO-REN GALLERY
                </a>

                <!-- 导航链接 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="{% url 'index' %}" class="nav-link text-gray-300 hover:text-blue-400 transition-colors">
                        Gallery
                    </a>

                    <!-- 分类下拉菜单 -->
                    {% if categories %}
                    <div class="relative group">
                        <button class="nav-link text-gray-300 hover:text-blue-400 transition-colors flex items-center">
                            Categories
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-dark-card rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 border border-gray-800">
                            {% for category in categories %}
                            <a href="{% url 'category' category.slug %}" class="block px-4 py-3 text-gray-300 hover:bg-gray-800 hover:text-blue-400 transition-colors border-b border-gray-800 last:border-b-0">
                                {{ category.name }}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <a href="{% url 'about' %}" class="nav-link text-gray-300 hover:text-blue-400 transition-colors">
                        About
                    </a>
                </div>

                <!-- 用户状态（桌面端） -->
                <div class="hidden md:flex items-center space-x-4">
                    {% if user.is_authenticated %}
                        <!-- 已登录状态 -->
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
                                <span class="text-white text-sm font-medium">{{ user.username|first|upper }}</span>
                            </div>
                            <span class="text-gray-300 text-sm">{{ user.username }}</span>
                            <a href="{% url 'logout' %}"
                               class="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition duration-200">
                                登出
                            </a>
                        </div>
                    {% else %}
                        <!-- 未登录状态 -->
                        <a href="{% url 'login' %}"
                           class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition duration-200">
                            登录
                        </a>
                    {% endif %}
                </div>

                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-blue-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>

            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="md:hidden mt-3 hidden">
                <div class="flex flex-col space-y-3">
                    <a href="{% url 'index' %}" class="text-gray-300 hover:text-blue-400 transition-colors py-2">
                        Gallery
                    </a>

                    {% if categories %}
                    <div class="border-t border-gray-800 pt-2">
                        <div class="text-gray-400 text-sm mb-2">Categories</div>
                        {% for category in categories %}
                        <a href="{% url 'category' category.slug %}" class="block text-gray-300 hover:text-blue-400 transition-colors py-1 pl-4">
                            {{ category.name }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <a href="{% url 'about' %}" class="text-gray-300 hover:text-blue-400 transition-colors py-2 border-t border-gray-800">
                        About
                    </a>

                    <!-- 用户状态（移动端） -->
                    <div class="border-t border-gray-800 pt-4">
                        {% if user.is_authenticated %}
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center mr-3">
                                        <span class="text-white text-sm font-medium">{{ user.username|first|upper }}</span>
                                    </div>
                                    <span class="text-gray-300 text-sm">{{ user.username }}</span>
                                </div>
                                <a href="{% url 'logout' %}"
                                   class="px-3 py-1.5 text-sm bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition duration-200">
                                    登出
                                </a>
                            </div>
                        {% else %}
                            <a href="{% url 'login' %}"
                               class="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition duration-200">
                                登录
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow pt-16 page-transition">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="bg-black/50 border-t border-gray-800 mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="text-center">
                <div class="text-gray-400 text-sm mb-2">
                    {{ copyright_text }}
                </div>
                <div class="text-gray-500 text-xs">
                    All artworks are copyrighted by their respective owners.
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

        // 图片懒加载
        document.addEventListener('DOMContentLoaded', function() {
            const lazyImages = document.querySelectorAll('.lazy-image');

            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.classList.add('loaded');
                        observer.unobserve(img);
                    }
                });
            });

            lazyImages.forEach(img => imageObserver.observe(img));
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 页面加载动画
        window.addEventListener('load', function() {
            document.body.classList.add('loaded');
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>