MediaCollectorLibary/resources/views/components/game-card.twig

{#
  Game Card Component

  Parameters:
  - game: The game object with all properties
  - view_mode: 'grid', 'list', or 'covers' (optional, defaults to 'grid')
  - show_completion: Whether to show completion progress (optional, defaults to true)
  - show_platforms: Whether to show platform badges (optional, defaults to true)
  - show_genres: Whether to show genre tags (optional, defaults to true)
  - show_playtime: Whether to show playtime (optional, defaults to true)
#}

{% set view_mode = view_mode|default('grid') %}
{% set show_completion = show_completion|default(true) %}
{% set show_platforms = show_platforms|default(true) %}
{% set show_genres = show_genres|default(true) %}
{% set show_playtime = show_playtime|default(true) %}

{% if view_mode == 'list' %}
<!-- List View Card -->
<li class="group px-6 py-5 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 transition-all duration-200">
    <div class="flex justify-between items-center">
        <div class="flex items-center flex-1 min-w-0">
            <!-- Image Section -->
            <div class="relative flex-shrink-0 mr-4">
                {% if game.image_url %}
                <div class="w-16 h-16 rounded-lg overflow-hidden shadow-sm group-hover:shadow-md transition-shadow duration-200">
                    <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" src="/images/playnite/{{ game.image_url }}" alt="{{ game.title }}">
                </div>
                {% else %}
                <div class="w-16 h-16 bg-gradient-to-br from-slate-100 to-slate-200 rounded-lg flex items-center justify-center shadow-sm">
                    <svg class="text-slate-400 w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 %}

                <!-- Completion indicator -->
                {% if show_completion and game.max_completion > 0 %}
                <div class="absolute -top-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shadow-sm">
                    <span class="text-xs font-bold text-white">{{ game.max_completion }}%</span>
                </div>
                {% endif %}
            </div>

            <!-- Content Section -->
            <div class="flex-1 min-w-0">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <h3 class="text-lg font-bold text-gray-900 mb-1 truncate group-hover:text-blue-600 transition-colors">
                            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}" class="no-underline">
                                {{ game.title }}
                            </a>
                        </h3>

                        <!-- Platform and stats -->
                        <div class="flex items-center gap-4 text-sm text-gray-600 mb-2">
                            {% if show_platforms %}
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                </svg>
                                <span>{{ game.platform_count }} platform{{ game.platform_count > 1 ? 's' : '' }}</span>
                            </div>
                            {% endif %}

                            {% if show_playtime and game.total_playtime %}
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span>{{ game.total_playtime|format_duration }}</span>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Platforms -->
                        {% if show_platforms and game.platforms %}
                        <div class="flex flex-wrap gap-1 mb-2">
                            {% for platform in game.platforms|slice(0, 3) %}
                            <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
                                {{ platform }}
                            </span>
                            {% endfor %}
                            {% if game.platforms|length > 3 %}
                            <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
                                +{{ game.platforms|length - 3 }} more
                            </span>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>

                    <!-- Genres Section -->
                    {% if show_genres and game.genres %}
                    <div class="flex flex-wrap gap-1 ml-4 flex-shrink-0">
                        {% for genre in game.genres|slice(0, 2) %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-50 to-blue-100 text-blue-700 border border-blue-200">
                            {{ genre }}
                        </span>
                        {% endfor %}
                        {% if game.genres|length > 2 %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 border border-gray-200">
                            +{{ game.genres|length - 2 }}
                        </span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Quick action button -->
        <div class="ml-4 flex-shrink-0">
            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}"
               class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 hover:text-blue-700 transition-colors opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
                View
            </a>
        </div>
    </div>
</li>

{% elseif view_mode == 'covers' %}
<!-- Cover View Card -->
<div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden h-full transition-all duration-300 hover:scale-[1.05] hover:-translate-y-2">
    <!-- Cover Image -->
    <div class="relative overflow-hidden">
        {% if game.image_url %}
        <div class="aspect-[3/4] overflow-hidden">
            <img src="/images/playnite/{{ game.image_url }}" alt="{{ game.title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        {% else %}
        <div class="aspect-[3/4] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center">
            <div class="text-center">
                <svg class="text-slate-400 w-12 h-12 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 class="text-xs text-slate-500 font-medium">No Cover</div>
            </div>
        </div>
        {% endif %}

        <!-- Overlay with quick actions -->
        <div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}"
               class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 bg-white text-gray-900 px-3 py-2 rounded-lg font-medium text-sm shadow-lg hover:bg-blue-50 hover:text-blue-700">
                <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
                View
            </a>
        </div>

        <!-- Completion badge -->
        {% if show_completion and game.max_completion > 0 %}
        <div class="absolute top-2 right-2">
            <div class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow-sm">
                {{ game.max_completion }}%
            </div>
        </div>
        {% endif %}

        <!-- Platform count badge -->
        {% if show_platforms %}
        <div class="absolute bottom-2 left-2">
            <div class="bg-black bg-opacity-70 text-white text-xs font-medium px-2 py-1 rounded-full backdrop-blur-sm">
                {{ game.platform_count }}P
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Game Info -->
    <div class="p-4">
        <h3 class="text-sm font-bold text-gray-900 mb-1 line-clamp-2 group-hover:text-blue-600 transition-colors" title="{{ game.title }}">
            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}" class="no-underline">
                {{ game.title }}
            </a>
        </h3>

        <!-- Playtime indicator -->
        {% if show_playtime and game.total_playtime %}
        <div class="flex items-center text-xs text-gray-600 mb-2">
            <svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ game.total_playtime|format_duration }}
        </div>
        {% endif %}

        <!-- Platforms -->
        {% if show_platforms and game.platforms %}
        <div class="flex flex-wrap gap-1">
            {% for platform in game.platforms|slice(0, 2) %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-700">
                {{ platform }}
            </span>
            {% endfor %}
            {% if game.platforms|length > 2 %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-700">
                +{{ game.platforms|length - 2 }}
            </span>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

{% else %}
<!-- Grid View Card (Default) -->
<div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl border border-gray-100 h-full overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1">
    <!-- Image Section -->
    <div class="relative overflow-hidden">
        {% if game.image_url %}
        <div class="aspect-[4/3] overflow-hidden">
            <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" src="/images/playnite/{{ game.image_url }}" alt="{{ game.title }}">
        </div>
        {% else %}
        <div class="aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center">
            <div class="text-center">
                <svg class="text-slate-400 w-16 h-16 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 class="text-xs text-slate-500 font-medium">No Cover</div>
            </div>
        </div>
        {% endif %}

        <!-- Platform badge -->
        {% if show_platforms %}
        <div class="absolute top-3 right-3 z-10">
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-black bg-opacity-70 text-white backdrop-blur-sm">
                {{ game.platform_count }} platform{{ game.platform_count > 1 ? 's' : '' }}
            </span>
        </div>
        {% endif %}

        <!-- Overlay with quick actions -->
        <div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center z-20">
            <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}"
               class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 bg-white text-gray-900 px-4 py-2 rounded-lg font-medium text-sm shadow-lg hover:bg-blue-50 hover:text-blue-700">
                View Details
            </a>
        </div>
    </div>

    <!-- Content Section -->
    <div class="p-5">
        <div class="mb-3">
            <h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
                <a href="{{ path_for('games.show', {'game_key': game.game_key}) }}" class="no-underline">
                    {{ game.title }}
                </a>
            </h3>

            {% if show_platforms and game.platforms %}
            <div class="flex flex-wrap gap-1 mb-3">
                {% for platform in game.platforms|slice(0, 2) %}
                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
                    {{ platform }}
                </span>
                {% endfor %}
                {% if game.platforms|length > 2 %}
                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
                    +{{ game.platforms|length - 2 }} more
                </span>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Progress and Stats -->
        <div class="space-y-3">
            {% if show_completion and game.max_completion > 0 %}
            <div>
                <div class="flex justify-between items-center mb-1">
                    <span class="text-xs font-medium text-gray-600">Completion</span>
                    <span class="text-xs font-bold text-gray-900">{{ game.max_completion }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full transition-all duration-500" style="width: {{ game.max_completion }}%"></div>
                </div>
            </div>
            {% endif %}

            {% if show_playtime and game.total_playtime %}
            <div class="flex items-center justify-between">
                <div class="flex items-center text-xs text-gray-600">
                    <svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Playtime
                </div>
                <span class="text-xs font-semibold text-gray-900">{{ game.total_playtime|format_duration }}</span>
            </div>
            {% endif %}
        </div>

        <!-- Genres -->
        {% if show_genres and game.genres %}
        <div class="mt-4 flex flex-wrap gap-1">
            {% for genre in game.genres|slice(0, 2) %}
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-50 to-blue-100 text-blue-700 border border-blue-200">
                {{ genre }}
            </span>
            {% endfor %}
            {% if game.genres|length > 2 %}
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 border border-gray-200">
                +{{ game.genres|length - 2 }}
            </span>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endif %}