{% extends "layouts/app.twig" %}

{% block content %}
<div class="px-4 py-6 sm:px-0">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Games</h1>
        <div class="text-sm text-gray-500">
            {{ games|length }} games from {{ games|reduce((carry, game) => carry + game.platform_count, 0) }} platforms
        </div>
    </div>

    {% if games is empty %}
    <div class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-7 8h12a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">No games found</h3>
        <p class="mt-1 text-sm text-gray-500">Start syncing your gaming libraries to see your games here.</p>
    </div>
    {% else %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for game in games %}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        {% if game.image_url %}
                        <img class="h-12 w-12 rounded-lg object-cover" src="/images/playnite/{{ game.image_url }}" alt="{{ game.title }}">
                        {% else %}
                        <div class="h-12 w-12 rounded-lg bg-gray-200 flex items-center justify-center">
                            <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-7 8h12a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        {% endif %}
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-lg font-medium text-gray-900 truncate">
                            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}" class="hover:text-indigo-600">
                                {{ game.title }}
                            </a>
                        </h3>
                        <p class="text-sm text-gray-500">
                            {{ game.platform_count }} platform{{ game.platform_count > 1 ? 's' : '' }}
                            {% if game.platforms %}
                            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                {{ game.platforms|join(', ') }}
                            </span>
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center justify-between text-sm text-gray-500">
                        <span>{{ game.total_playtime|format_duration }} played</span>
                        {% if game.max_completion > 0 %}
                        <span>{{ game.max_completion }}% complete</span>
                        {% endif %}
                    </div>
                    {% if game.genres %}
                    <div class="mt-2 flex flex-wrap gap-1">
                        {% for genre in game.genres %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
                            {{ genre }}
                        </span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}