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

{#
  Movie Card Component

  Parameters:
  - movie: The movie object with all properties
  - view_mode: 'grid', 'list', or 'covers' (optional, defaults to 'grid')
  - show_rating: Whether to show rating (optional, defaults to true)
  - show_runtime: Whether to show runtime (optional, defaults to true)
  - show_genres: Whether to show genre tags (optional, defaults to true)
  - show_watched: Whether to show watched status (optional, defaults to true)
#}

{% set view_mode = view_mode|default('grid') %}
{% set show_rating = show_rating|default(true) %}
{% set show_runtime = show_runtime|default(true) %}
{% set show_genres = show_genres|default(true) %}
{% set show_watched = show_watched|default(true) %}

{% if view_mode == 'list' %}
<!-- List View Card -->
<li class="px-4 py-3">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            {% if movie.poster_url %}
            <img class="rounded mr-3" style="width: 64px; height: 96px; object-fit: cover;" src="/images/{{ movie.poster_url }}" alt="{{ movie.title }}">
            {% else %}
            <div class="bg-gray-100 rounded mr-3 flex items-center justify-center" style="width: 64px; height: 96px;">
                <svg class="text-gray-600" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2h4a1 1 0 010 2h-1v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6H3a1 1 0 010-2h4z"/>
                </svg>
            </div>
            {% endif %}
            <div class="flex-1">
                <h3 class="text-sm font-semibold mb-1">
                    <a href="{{ path_for('movies.show', {'id': movie.id}) }}" class="no-underline text-gray-900 hover:text-blue-600">
                        {{ movie.title }}
                    </a>
                </h3>
                <div class="flex items-center gap-3 text-sm text-gray-600">
                    {% if movie.release_date %}
                    <span>{{ movie.release_date|date('Y') }}</span>
                    {% endif %}
                    {% if show_rating and movie.rating %}
                    <span>⭐ {{ movie.rating }}/10</span>
                    {% endif %}
                    {% if show_runtime and movie.runtime_minutes %}
                    <span>{{ (movie.runtime_minutes / 60)|round(1) }}h {{ movie.runtime_minutes % 60 }}m</span>
                    {% endif %}
                    <span>{{ movie.source_name }}</span>
                </div>
            </div>
        </div>
        <div class="flex gap-2">
            {% if show_watched and movie.watched %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                Watched
            </span>
            {% endif %}
            {% if movie.is_favorite %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                Favorite
            </span>
            {% endif %}
        </div>
    </div>
</li>

{% elseif view_mode == 'covers' %}
<!-- Cover View Card -->
<div class="group relative bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
    {% if movie.poster_url %}
    <div class="relative aspect-[2/3] overflow-hidden">
        <img src="/images/{{ movie.poster_url }}" alt="{{ movie.title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        <!-- Overlay with movie info -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <div class="absolute bottom-0 left-0 right-0 p-3">
                {% if show_rating and movie.rating %}
                <div class="flex items-center mb-2">
                    <svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-white text-sm font-medium">{{ movie.rating }}</span>
                </div>
                {% endif %}
                {% if show_watched and movie.watched %}
                <div class="flex items-center mb-1">
                    <svg class="w-3 h-3 text-green-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                    <span class="text-green-400 text-xs">Watched</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 aspect-[2/3] min-h-[200px]">
        <svg class="text-gray-400 w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2h4a1 1 0 010 2h-1v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6H3a1 1 0 010-2h4z"/>
        </svg>
    </div>
    {% endif %}
    <div class="p-4">
        <h6 class="text-sm font-bold truncate mb-1" title="{{ movie.title }}">
            <a href="{{ path_for('movies.show', {'id': movie.id}) }}" class="no-underline text-gray-900 hover:text-blue-600 transition-colors">
                {{ movie.title }}
            </a>
        </h6>
        {% if movie.release_date %}
        <p class="text-xs text-gray-600 font-medium">{{ movie.release_date|date('Y') }}</p>
        {% endif %}
        {% if show_genres and movie.genre %}
        <div class="mt-2">
            {% for genre in movie.genre|split(',')|slice(0, 2) %}
            <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium mr-1 mb-1">{{ genre|trim }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>

{% else %}
<!-- Grid View Card (Default) -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 h-full">
    <div class="p-4">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                {% if movie.poster_url %}
                <img class="rounded" style="width: 64px; height: 96px; object-fit: cover;" src="/images/{{ movie.poster_url }}" alt="{{ movie.title }}">
                {% else %}
                <div class="bg-gray-100 rounded flex items-center justify-center" style="width: 64px; height: 96px;">
                    <svg class="text-gray-600" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2h4a1 1 0 010 2h-1v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6H3a1 1 0 010-2h4z"/>
                    </svg>
                </div>
                {% endif %}
            </div>
            <div class="ml-3 flex-1">
                <h5 class="text-lg font-semibold mb-1">
                    <a href="{{ path_for('movies.show', {'id': movie.id}) }}" class="no-underline text-gray-900 hover:text-blue-600">
                        {{ movie.title }}
                    </a>
                </h5>
                <div class="flex items-center gap-2 text-sm text-gray-600 mb-2">
                    {% if movie.release_date %}
                    <span>{{ movie.release_date|date('Y') }}</span>
                    {% endif %}
                    {% if show_rating and movie.rating %}
                    <span>⭐ {{ movie.rating }}/10</span>
                    {% endif %}
                </div>
                {% if movie.source_name %}
                <p class="text-sm text-gray-600 mb-2">
                    {{ movie.source_name }}
                </p>
                {% endif %}
            </div>
        </div>
        {% if movie.overview %}
        <div class="mt-3">
            <p class="text-sm text-gray-600" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                {{ movie.overview|slice(0, 150) }}{% if movie.overview|length > 150 %}...{% endif %}
            </p>
        </div>
        {% endif %}
        <div class="mt-3 flex justify-between items-center text-sm text-gray-600">
            {% if show_runtime and movie.runtime_minutes %}
            <span>{{ (movie.runtime_minutes / 60)|round(1) }}h {{ movie.runtime_minutes % 60 }}m</span>
            {% endif %}
            <div class="flex gap-1">
                {% if show_watched and movie.watched %}
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Watched
                </span>
                {% endif %}
                {% if movie.is_favorite %}
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    Favorite
                </span>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}