{% extends 'admin/layout.twig' %}

{% block title %}Manage Movies - Admin Panel - MediaLib{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Manage Movies</h1>
            <p class="text-muted mb-0">View and manage your movie library</p>
        </div>
        <a href="{{ path_for('admin.movies.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>Add New Movie
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            {% if flash.success %}
                <div class="alert alert-success">
                    {{ flash.success }}
                </div>
            {% endif %}

            <!-- Search and Filter Form -->
            <form method="get" class="mb-4">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="input-group">
                            <input type="text" 
                                   class="form-control" 
                                   name="search" 
                                   placeholder="Search movies..." 
                                   value="{{ filters.search }}">
                            <button class="btn btn-primary" type="submit">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select name="genre" class="form-select">
                            <option value="">All Genres</option>
                            {% for genre in genres %}
                                <option value="{{ genre }}" {{ filters.genre == genre ? 'selected' : '' }}>
                                    {{ genre }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="director" class="form-select">
                            <option value="">All Directors</option>
                            {% for director in directors %}
                                <option value="{{ director }}" {{ filters.director == director ? 'selected' : '' }}>
                                    {{ director }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="sort" class="form-select">
                            <option value="title_asc" {{ filters.sort == 'title_asc' ? 'selected' : '' }}>Title (A-Z)</option>
                            <option value="title_desc" {{ filters.sort == 'title_desc' ? 'selected' : '' }}>Title (Z-A)</option>
                            <option value="release_desc" {{ filters.sort == 'release_desc' ? 'selected' : '' }}>Newest First</option>
                            <option value="release_asc" {{ filters.sort == 'release_asc' ? 'selected' : '' }}>Oldest First</option>
                            <option value="rating_desc" {{ filters.sort == 'rating_desc' ? 'selected' : '' }}>Highest Rated</option>
                            <option value="rating_asc" {{ filters.sort == 'rating_asc' ? 'selected' : '' }}>Lowest Rated</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group w-100">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-funnel me-1"></i> Filter
                            </button>
                            <a href="{{ path_for('admin.movies') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Results Summary -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="text-muted">
                    Showing {{ pagination.from }} to {{ pagination.to }} of {{ pagination.total_items }} movies
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-list-ul me-1"></i> View
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="bi bi-grid-3x3-gap-fill me-2"></i>Grid</a></li>
                        <li><a class="dropdown-item active" href="#"><i class="bi bi-list-ul me-2"></i>List</a></li>
                    </ul>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 60px;">Poster</th>
                            <th>Title</th>
                            <th>Year</th>
                            <th>Rating</th>
                            <th>Runtime</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for movie in movies %}
                            <tr>
                                <td>
                                    {% if movie.poster_path %}
                                        <img src="{{ movie.poster_path }}" alt="{{ movie.title }}" style="width: 50px; height: 75px; object-fit: cover;">
                                    {% else %}
                                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 75px;">
                                            <i class="bi bi-film text-muted"></i>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>{{ movie.title }}</td>
                                <td>{{ movie.release_date|date('Y') }}</td>
                                <td>
                                    {% if movie.vote_average %}
                                        <span class="badge bg-primary">{{ movie.vote_average|number_format(1) }}/10</span>
                                    {% else %}
                                        <span class="text-muted">N/A</span>
                                    {% endif %}
                                </td>
                                <td>{{ movie.runtime ? movie.runtime ~ ' min' : 'N/A' }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ path_for('admin.movies.edit', {id: movie.id}) }}" class="btn btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ path_for('admin.movies.delete', {id: movie.id}) }}" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this movie?');">
                                            <input type="hidden" name="_METHOD" value="DELETE">
                                            <button type="submit" class="btn btn-outline-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="6" class="text-center py-4">
                                    <div class="text-muted">No movies found. <a href="{{ path_for('admin.movies.create') }}">Add your first movie</a></div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {% if pagination.total > 1 %}
                <nav class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if pagination.current > 1 %}
                            <li class="page-item">
                                <a class="page-link" 
                                   href="{{ path_for('admin.movies', {}, {
                                       'page': pagination.current - 1, 
                                       'search': filters.search, 
                                       'genre': filters.genre, 
                                       'director': filters.director, 
                                       'sort': filters.sort
                                   }) }}" 
                                   aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}
                        
                        {% set start = max(1, pagination.current - 2) %}
                        {% set end = min(pagination.total, pagination.current + 2) %}
                        
                        {% if start > 1 %}
                            <li class="page-item">
                                <a class="page-link" 
                                   href="{{ path_for('admin.movies', {}, {
                                       'page': 1, 
                                       'search': filters.search, 
                                       'genre': filters.genre, 
                                       'director': filters.director, 
                                       'sort': filters.sort
                                   }) }}">1</a>
                            </li>
                            {% if start > 2 %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            {% endif %}
                        {% endif %}
                        
                        {% for i in start..end %}
                            <li class="page-item {% if i == pagination.current %}active{% endif %}">
                                <a class="page-link" 
                                   href="{{ path_for('admin.movies', {}, {
                                       'page': i, 
                                       'search': filters.search, 
                                       'genre': filters.genre, 
                                       'director': filters.director, 
                                       'sort': filters.sort
                                   }) }}">
                                    {{ i }}
                                </a>
                            </li>
                        {% endfor %}
                        
                        {% if end < pagination.total %}
                            {% if end < pagination.total - 1 %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            {% endif %}
                            <li class="page-item">
                                <a class="page-link" 
                                   href="{{ path_for('admin.movies', {}, {
                                       'page': pagination.total, 
                                       'search': filters.search, 
                                       'genre': filters.genre, 
                                       'director': filters.director, 
                                       'sort': filters.sort
                                   }) }}">
                                    {{ pagination.total }}
                                </a>
                            </li>
                        {% endif %}
                        
                        {% if pagination.current < pagination.total %}
                            <li class="page-item">
                                <a class="page-link" 
                                   href="{{ path_for('admin.movies', {}, {
                                       'page': pagination.current + 1, 
                                       'search': filters.search, 
                                       'genre': filters.genre, 
                                       'director': filters.director, 
                                       'sort': filters.sort
                                   }) }}" 
                                   aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
{% endblock %}