{% extends 'gallery/base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-serif font-bold mb-4 animate-fade-in">
            YITAO-REN GALLERY
        </h1>
        <p class="text-gray-400 max-w-2xl mx-auto">
            探索现代摄影艺术的视觉盛宴，每一幅作品都是时光的印记。
        </p>
    </div>

    <div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-4 space-y-4 animate-slide-up mx-auto">
        
        {% for artwork in artworks %}
            <div class="group relative overflow-hidden rounded-lg bg-dark-card break-inside-avoid mb-4 shadow-lg hover:shadow-xl transition-all duration-300">
                <a href="{% url 'artwork_detail' artwork.slug %}" class="block w-full">
                    <div class="relative w-full">
                        <img
                            data-src="{{ artwork.thumbnail.url|default:artwork.image.url }}"
                            alt="{{ artwork.title }}"
                            class="lazy-image w-full h-auto object-cover block"
                            loading="lazy"
                            style="width: 100%; display: block;"
                        >

                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <div class="transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 text-center p-4">
                                <h3 class="text-white text-lg font-semibold mb-2 drop-shadow-md">{{ artwork.title }}</h3>
                                {% if artwork.category %}
                                <span class="inline-block px-3 py-1 bg-blue-600/90 text-white text-xs rounded-full shadow-sm">
                                    {{ artwork.category.name }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="p-4 md:hidden bg-dark-card">
                        <h3 class="text-white font-semibold mb-1">{{ artwork.title }}</h3>
                        {% if artwork.category %}
                        <span class="text-blue-400 text-sm">{{ artwork.category.name }}</span>
                        {% endif %}
                    </div>
                </a>
            </div>
        {% empty %}
            <div class="break-inside-avoid w-full text-center py-16 bg-dark-card rounded-lg">
                <div class="text-gray-400 mb-4">
                    <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">暂无作品</h3>
                <p class="text-gray-400">画廊正在准备中...</p>
            </div>
        {% endfor %}
    
    </div> <div class="mt-16 pt-8 border-t border-gray-800">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-400 mb-2">{{ artworks.count }}</div>
                <div class="text-gray-400">作品总数</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-400 mb-2">{{ categories|length }}</div>
                <div class="text-gray-400">分类数量</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-400 mb-2">{{ total_views }}</div>
                <div class="text-gray-400">总浏览次数</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-400 mb-2">2025</div>
                <div class="text-gray-400">成立年份</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}