{% extends "base.html" %}

{% block content %}
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">战队阵容库</h2>
        <a href="{{ url_for('teams.create') }}" class="px-4 py-2 bg-yrtv-600 text-white rounded hover:bg-yrtv-500">
            新建阵容
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for lineup in lineups %}
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ lineup.name }}</h3>
            <p class="text-sm text-gray-500 mb-4">{{ lineup.description }}</p>
            
            <div class="flex -space-x-2 overflow-hidden mb-4">
                {% for p in lineup.players %}
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-800" 
                     src="{{ p.avatar_url or 'https://via.placeholder.com/32' }}" 
                     alt="{{ p.username }}"
                     title="{{ p.username }}">
                {% endfor %}
            </div>
            
            <a href="{{ url_for('teams.detail', lineup_id=lineup.id) }}" class="text-sm text-yrtv-600 hover:text-yrtv-800 font-medium">
                查看分析 &rarr;
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}