MediaCollectorLibary/resources/views/actor/index.twig

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

{% block content %}
<!-- Hero Section -->
<div class="relative">
    <div class="h-48 md:h-64 relative overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
        <div class="absolute inset-0 bg-gradient-to-r from-purple-900/90 via-blue-900/70 to-indigo-900/90"></div>

        <!-- Hero Content -->
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="text-center text-white">
                <h1 class="text-3xl md:text-5xl font-bold mb-2">Actors & Performers</h1>
                <p class="text-lg md:text-xl opacity-90 mb-4">{{ pagination.total_items }} performer{{ pagination.total_items != 1 ? 's' : '' }}</p>

                <!-- Pagination in Hero -->
                {% if pagination.total_pages > 0 %}
                <div class="flex items-center justify-center space-x-2">
                    <!-- Previous Button -->
                    {% if pagination.has_prev %}
                    <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ pagination.prev_page }}"
                       class="px-3 py-2 text-sm font-medium text-white bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg hover:bg-white/30 transition-colors flex items-center">
                        <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 19l-7-7 7-7"/>
                        </svg>
                        Prev
                    </a>
                    {% else %}
                    <span class="px-3 py-2 text-sm font-medium text-white/50 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg cursor-not-allowed flex items-center">
                        <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 19l-7-7 7-7"/>
                        </svg>
                        Prev
                    </span>
                    {% endif %}

                    <!-- Page Info -->
                    <span class="px-4 py-2 text-sm font-medium text-white bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg">
                        Page {{ pagination.current_page }} of {{ pagination.total_pages }}
                    </span>

                    <!-- Next Button -->
                    {% if pagination.has_next %}
                    <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ pagination.next_page }}"
                       class="px-3 py-2 text-sm font-medium text-white bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg hover:bg-white/30 transition-colors flex items-center">
                        Next
                        <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </a>
                    {% else %}
                    <span class="px-3 py-2 text-sm font-medium text-white/50 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg cursor-not-allowed flex items-center">
                        Next
                        <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Search and Filters Bar -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
        <form method="GET" class="space-y-4">
            <!-- Search Bar -->
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search Actors</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        <input type="text" name="search" id="search" value="{{ search }}" placeholder="Search by actor name..."
                               class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                <!-- Sort Options -->
                <div class="md:w-48">
                    <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                    <select name="sort" id="sort" class="block w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                        {% for value, label in sort_options %}
                        <option value="{{ value }}" {{ sort == value ? 'selected' : '' }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- Filter Checkboxes -->
            <div class="flex flex-wrap gap-6">
                <div class="flex items-center">
                    <input type="checkbox" name="has_movies" value="1" id="has_movies" {{ filters.has_movies == '1' ? 'checked' : '' }}
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="has_movies" class="ml-2 text-sm text-gray-700 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-blue-500" 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>
                        Has Movies
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" name="has_tv_shows" value="1" id="has_tv_shows" {{ filters.has_tv_shows == '1' ? 'checked' : '' }}
                           class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                    <label for="has_tv_shows" class="ml-2 text-sm text-gray-700 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                        Has TV Shows
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" name="has_adult_videos" value="1" id="has_adult_videos" {{ filters.has_adult_videos == '1' ? 'checked' : '' }}
                           class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                    <label for="has_adult_videos" class="ml-2 text-sm text-gray-700 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                        Has Adult Videos
                    </label>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-2">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    Search & Filter
                </button>
                <a href="{{ path_for('actors.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Clear Filters
                </a>
            </div>
        </form>
    </div>

    {% if actors %}
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6 text-center">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="text-purple-600" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900 mb-1">{{ actors|length }}</div>
                <div class="text-gray-600">Total Performers</div>
            </div>

            {% set totalMovies = 0 %}
            {% set totalShows = 0 %}
            {% set totalAdult = 0 %}
            {% for actor in actors %}
                {% set totalMovies = totalMovies + actor.movie_count %}
                {% set totalShows = totalShows + actor.tv_show_count %}
                {% set totalAdult = totalAdult + actor.adult_video_count %}
            {% endfor %}

            <div class="bg-white rounded-xl shadow-lg p-6 text-center">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="text-blue-600" width="24" height="24" 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>
                <div class="text-2xl font-bold text-gray-900 mb-1">{{ totalMovies }}</div>
                <div class="text-gray-600">Movies</div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 text-center">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="text-green-600" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900 mb-1">{{ totalShows }}</div>
                <div class="text-gray-600">TV Shows</div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 text-center">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="text-red-600" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                    </svg>
                </div>
                <div class="text-2xl font-bold text-gray-900 mb-1">{{ totalAdult }}</div>
                <div class="text-gray-600">Adult Videos</div>
            </div>
        </div>

        <!-- Actors Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-6">
            {% for actor in actors %}
            <a href="{{ path_for('actors.show', {'id': actor.id}) }}" class="group">
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105">
                    <!-- Actor Avatar -->
                    <div class="aspect-square bg-gray-200">
                        {% if actor.thumbnail_path %}
                        <img src="{% if '/images/' in actor.thumbnail_path %}{{ actor.thumbnail_path }}{% else %}/images/{{ actor.thumbnail_path }}{% endif %}" alt="{{ actor.name }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                        {% else %}
                        <div class="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                            <span class="text-2xl md:text-3xl font-bold text-white">{{ actor.name|first|upper }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Actor Info -->
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900 text-sm leading-tight mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">{{ actor.name }}</h3>

                        <!-- Media Counts -->
                        <div class="space-y-1">
                            {% if actor.movie_count > 0 %}
                            <div class="flex items-center text-xs text-gray-600">
                                <svg class="w-3 h-3 mr-1 text-blue-500" 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>
                                {{ actor.movie_count }} Movie{{ actor.movie_count != 1 ? 's' : '' }}
                            </div>
                            {% endif %}

                            {% if actor.tv_show_count > 0 %}
                            <div class="flex items-center text-xs text-gray-600">
                                <svg class="w-3 h-3 mr-1 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                                {{ actor.tv_show_count }} Show{{ actor.tv_show_count != 1 ? 's' : '' }}
                            </div>
                            {% endif %}

                            {% if actor.adult_video_count > 0 %}
                            <div class="flex items-center text-xs text-gray-600">
                                <svg class="w-3 h-3 mr-1 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                                </svg>
                                {{ actor.adult_video_count }} Adult
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if pagination.total_pages > 1 %}
        <div class="mt-12 flex items-center justify-between">
            <div class="text-sm text-gray-700">
                Showing {{ (pagination.current_page - 1) * pagination.per_page + 1 }} to {{ min(pagination.current_page * pagination.per_page, pagination.total_items) }} of {{ pagination.total_items }} performers
            </div>

            <div class="flex items-center space-x-2">
                <!-- Previous Button -->
                {% if pagination.has_prev %}
                <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ pagination.prev_page }}"
                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors flex items-center">
                    <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 19l-7-7 7-7"/>
                    </svg>
                    Previous
                </a>
                {% else %}
                <span class="px-3 py-2 text-sm font-medium text-gray-300 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed flex items-center">
                    <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 19l-7-7 7-7"/>
                    </svg>
                    Previous
                </span>
                {% endif %}

                <!-- Page Numbers -->
                {% set start_page = max(1, pagination.current_page - 2) %}
                {% set end_page = min(pagination.total_pages, pagination.current_page + 2) %}

                {% if start_page > 1 %}
                <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page=1"
                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors">1</a>
                {% if start_page > 2 %}
                <span class="px-2 py-2 text-sm font-medium text-gray-500">...</span>
                {% endif %}
                {% endif %}

                {% for page_num in start_page..end_page %}
                {% if page_num == pagination.current_page %}
                <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-lg">{{ page_num }}</span>
                {% else %}
                <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ page_num }}"
                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors">{{ page_num }}</a>
                {% endif %}
                {% endfor %}

                {% if end_page < pagination.total_pages %}
                {% if end_page < pagination.total_pages - 1 %}
                <span class="px-2 py-2 text-sm font-medium text-gray-500">...</span>
                {% endif %}
                <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ pagination.total_pages }}"
                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors">{{ pagination.total_pages }}</a>
                {% endif %}

                <!-- Next Button -->
                {% if pagination.has_next %}
                <a href="{{ path_for('actors.index') }}?{% for key, value in app.request.query %}{{ key }}={{ value }}{% if not loop.last %}&{% endif %}{% endfor %}{% if app.request.query|length > 0 %}&{% endif %}page={{ pagination.next_page }}"
                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-colors flex items-center">
                    Next
                    <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
                {% else %}
                <span class="px-3 py-2 text-sm font-medium text-gray-300 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed flex items-center">
                    Next
                    <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </span>
                {% endif %}
            </div>
        </div>
        {% endif %}
    {% else %}
        <!-- Empty State -->
        <div class="text-center py-16">
            <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">No Performers Found</h3>
            <p class="text-gray-600 max-w-md mx-auto">Performers will appear here once you sync content from your media sources. Import movies, TV shows, or adult videos to start building your actor database.</p>
        </div>
    {% endif %}
</div>
{% endblock %}