{% extends "base.html" %}

{% block content %}
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">地图情报</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for map in maps %}
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition cursor-pointer">
            <div class="h-40 bg-gray-300 flex items-center justify-center overflow-hidden">
                <!-- Use actual map images or fallback -->
                <img src="{{ url_for('static', filename='images/maps/' + map.name + '.jpg') }}" 
                     onerror="this.src='https://developer.valvesoftware.com/w/images/thumb/3/3d/De_mirage_radar_spectator.png/800px-De_mirage_radar_spectator.png'; this.style.objectFit='cover'; this.style.height='100%'; this.style.width='100%';"
                     alt="{{ map.title }}" class="w-full h-full object-cover">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ map.title }}</h3>
                <div class="mt-4 flex space-x-2">
                    <button class="px-3 py-1 bg-yrtv-100 text-yrtv-700 rounded text-sm hover:bg-yrtv-200">道具点位</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">战术板</button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}