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

{% block title %}Manage Games - 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 Games</h1>
            <p class="text-muted mb-0">View and manage your game library</p>
        </div>
        <a href="{{ path_for('admin.games.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>Add New Game
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            {% if flash.getMessage('success') %}
                <div class="alert alert-success">
                    {{ flash.getMessage('success') | first }}
                </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 games..." 
                                   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="platform" class="form-select">
                            <option value="">All Platforms</option>
                            {% for platform in platforms %}
                                <option value="{{ platform }}" {{ filters.platform == platform ? 'selected' : '' }}>
                                    {{ platform }}
                                </option>
                            {% endfor %}
                        </select>
                    </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="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>
                        </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.games') }}" 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 }} games
                </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;">Cover</th>
                            <th>Title</th>
                            <th>Platform</th>
                            <th>Release Date</th>
                            <th>Rating</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for game in games %}
                            <tr>
                                <td>
                                    {% if game.cover_url %}
                                        <img src="{{ game.cover_url }}" alt="{{ game.title }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                                    {% else %}
                                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; border-radius: 4px;">
                                            <i class="bi bi-controller text-muted"></i>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="fw-medium">{{ game.title }}</div>
                                    <small class="text-muted">{{ game.developer ? game.developer : 'N/A' }}</small>
                                </td>
                                <td>{{ game.platform ? game.platform : 'N/A' }}</td>
                                <td>{{ game.release_date ? game.release_date|date('Y') : 'N/A' }}</td>
                                <td>
                                    {% if game.rating %}
                                        <span class="badge bg-primary">{{ game.rating|number_format(1) }}/5</span>
                                    {% else %}
                                        <span class="text-muted">N/A</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ path_for('admin.games.edit', {id: game.id}) }}" class="btn btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ path_for('admin.games.delete', {id: game.id}) }}" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this game?');">
                                            <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 games found. <a href="{{ path_for('admin.games.create') }}">Add your first game</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.games', {}, {'page': pagination.current - 1, 'search': filters.search, 'platform': filters.platform, 'genre': filters.genre, '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.games', {}, {'page': 1, 'search': filters.search, 'platform': filters.platform, 'genre': filters.genre, '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.games', {}, {'page': i, 'search': filters.search, 'platform': filters.platform, 'genre': filters.genre, '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.games', {}, {'page': pagination.total, 'search': filters.search, 'platform': filters.platform, 'genre': filters.genre, '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.games', {}, {'page': pagination.current + 1, 'search': filters.search, 'platform': filters.platform, 'genre': filters.genre, 'sort': filters.sort}) }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
{% endblock %}