{% 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>
        <div class="flex space-x-4">
            <!-- Sort Dropdown -->
            <div class="relative inline-block text-left">
                <select onchange="location = this.value;" class="border rounded px-2 py-1 dark:bg-slate-700 dark:text-white dark:border-slate-600">
                    <option value="{{ url_for('players.index', search=request.args.get('search', ''), sort='rating') }}" {% if sort_by == 'rating' %}selected{% endif %}>Sort by Rating</option>
                    <option value="{{ url_for('players.index', search=request.args.get('search', ''), sort='kd') }}" {% if sort_by == 'kd' %}selected{% endif %}>Sort by K/D</option>
                    <option value="{{ url_for('players.index', search=request.args.get('search', ''), sort='kast') }}" {% if sort_by == 'kast' %}selected{% endif %}>Sort by KAST</option>
                    <option value="{{ url_for('players.index', search=request.args.get('search', ''), sort='matches') }}" {% if sort_by == 'matches' %}selected{% endif %}>Sort by Matches</option>
                </select>
            </div>
            
            <form action="{{ url_for('players.index') }}" method="get" class="flex space-x-2">
                <input type="hidden" name="sort" value="{{ sort_by }}">
                <input type="text" name="search" placeholder="Search player..." class="border rounded px-2 py-1 dark:bg-slate-700 dark:text-white dark:border-slate-600" value="{{ request.args.get('search', '') }}">
                <button type="submit" class="px-3 py-1 bg-yrtv-600 text-white rounded hover:bg-yrtv-500">Search</button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {% for player in players %}
        <div class="bg-gray-50 dark:bg-slate-700 rounded-lg p-4 flex flex-col items-center hover:shadow-lg transition">
            <!-- Avatar -->
            {% if player.avatar_url %}
            <img class="h-20 w-20 rounded-full mb-4 object-cover border-4 border-white shadow-sm" src="{{ player.avatar_url }}" alt="{{ player.username }}">
            {% else %}
            <div class="h-20 w-20 rounded-full mb-4 bg-yrtv-100 flex items-center justify-center text-yrtv-600 font-bold text-2xl border-4 border-white shadow-sm">
                {{ player.username[:2] | upper if player.username else '??' }}
            </div>
            {% endif %}
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ player.username }}</h3>
            <p class="text-sm text-gray-500 mb-2">{{ player.steam_id_64 }}</p>
            
            <!-- Mini Stats -->
            <div class="grid grid-cols-3 gap-x-4 gap-y-2 text-xs text-gray-600 dark:text-gray-300 mb-4 w-full text-center">
                <div>
                    <span class="block font-bold">{{ "%.2f"|format(player.core_avg_rating2 or player.core_avg_rating or 0) }}</span>
                    <span class="text-gray-400">Rating</span>
                </div>
                <div>
                    <span class="block font-bold">{{ "%.2f"|format(player.core_avg_kd or 0) }}</span>
                    <span class="text-gray-400">K/D</span>
                </div>
                <div>
                    <span class="block font-bold">{{ "%.1f"|format((player.core_avg_kast or 0) * 100) }}%</span>
                    <span class="text-gray-400">KAST</span>
                </div>
            </div>
            
            <a href="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" class="mt-auto px-4 py-2 border border-transparent text-sm font-medium rounded-md text-yrtv-700 bg-yrtv-100 hover:bg-yrtv-200 dark:bg-slate-800 dark:text-yrtv-300 dark:hover:bg-slate-600 dark:border-slate-600">
                View Profile
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    <div class="mt-6 flex justify-between items-center">
        <div class="text-sm text-gray-700 dark:text-gray-400">
            Total {{ total }} players
        </div>
        <div class="flex space-x-2">
            {% if page > 1 %}
            <a href="{{ url_for('players.index', page=page-1, search=request.args.get('search', '')) }}" class="px-3 py-1 border rounded bg-white text-gray-700 hover:bg-gray-50 dark:bg-slate-700 dark:text-white dark:border-slate-600 dark:hover:bg-slate-600">Prev</a>
            {% endif %}
            {% if page < total_pages %}
            <a href="{{ url_for('players.index', page=page+1, search=request.args.get('search', '')) }}" class="px-3 py-1 border rounded bg-white text-gray-700 hover:bg-gray-50 dark:bg-slate-700 dark:text-white dark:border-slate-600 dark:hover:bg-slate-600">Next</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}