{% extends "base.html" %}
{% block title %}Game List — Admin — {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3><i class="bi bi-list"></i> Games</h3>
    <div class="d-flex gap-2">
        <a href="{{ url_for('games_admin.add_game') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-circle"></i> Add Game
        </a>
        <a href="{{ url_for('games_admin.list_categories') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-tags"></i> Categories
        </a>
        <form method="post" action="{{ url_for('games_admin.renumber_games') }}" style="display:inline;"
              onsubmit="return confirm('Renumber every game? Submenu categories\' games get a clean 1/2/3/... sequence; top-level/inline games get a gapped 10/20/30/... sequence. This changes the number players type to pick a door -- update any hand-made ANSI door-menu art to match afterwards.');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-primary" title="Auto-renumber all games">
                <i class="bi bi-sort-numeric-down"></i> Renumber
            </button>
        </form>
        <a href="{{ url_for('games_admin.dashboard') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-arrow-left"></i> Dashboard
        </a>
    </div>
</div>

<p class="small" style="color:#888;">
    <i class="bi bi-info-circle"></i>
    The <strong>#</strong> column is the exact number a player types in the terminal door menu to
    pick that game -- it's <code>Sort Order</code>, not a recomputed position, so it only changes
    when you change it (directly, by dragging, or via Renumber). Safe to hardcode into custom ANSI
    door-menu art. Drag the <i class="bi bi-grip-vertical"></i> handle to reorder within a category;
    dropping writes new Sort Order values automatically -- gapped (10/20/30/...) for a top-level or
    inline category, clean (1/2/3/...) for a <span class="badge" style="background:#003366;color:#88ccff;">submenu</span> category.
</p>

{% for slug in cat_order %}
{% set cat_games = grouped[slug] %}
{% set cat_label = cat_names.get(slug, slug|capitalize) %}
{% set is_submenu = cat_as_submenu.get(slug, False) %}
<div class="card mb-2">
    <div class="card-header d-flex justify-content-between align-items-center"
         style="cursor:pointer;" data-bs-toggle="collapse" data-bs-target="#cat-{{ loop.index }}">
        <span>
            <i class="bi bi-chevron-down"></i>
            <strong>{{ cat_label }}</strong>
            <span class="badge" style="background:#333;">{{ cat_games|length }}</span>
            {% if is_submenu %}
            <span class="badge" style="background:#003366;color:#88ccff;" title="Rendered as a single submenu entry in the terminal door menu">submenu</span>
            {% endif %}
        </span>
        <form method="post" action="{{ url_for('games_admin.renumber_games') }}"
              onclick="event.stopPropagation();"
              onsubmit="return confirm('Renumber every game in {{ cat_label }} to a clean {{ "1/2/3/..." if is_submenu else "10/20/30/..." }} sequence? Only this category is affected. This changes the number players type to pick a door -- update any hand-made ANSI door-menu art to match afterwards.');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="category" value="{{ slug }}">
            <button type="submit" class="btn btn-sm btn-outline-primary" title="Renumber only this category's games">
                <i class="bi bi-sort-numeric-down"></i> Renumber
            </button>
        </form>
    </div>
    <div class="collapse show" id="cat-{{ loop.index }}">
        <div class="card-body p-0">
            <table class="table table-striped table-sm mb-0 sortable-games" data-category="{{ slug }}">
                <thead>
                    <tr>
                        <th style="width:2em;"></th>
                        <th style="width:4em;">#</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Min Level</th>
                        <th>Plays</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for game in cat_games %}
                    <tr data-game-id="{{ game.id }}">
                        <td class="drag-handle" style="cursor:grab;"><i class="bi bi-grip-vertical"></i></td>
                        <td><code>{{ game.sort_order }}</code></td>
                        <td>
                            <i class="bi {{ game.icon or 'bi-controller' }}"></i>
                            {{ game.name }}
                        </td>
                        <td><small>{{ game.game_type }}</small></td>
                        <td>{{ game.min_access_level or 0 }}</td>
                        <td>{{ game.play_count or 0 }}</td>
                        <td>
                            <span class="badge"
                                  style="background:{% if game.is_active %}#003300{% else %}#330000{% endif %};color:{% if game.is_active %}#00ff00{% else %}#ff0000{% endif %};">
                                {% if game.is_active %}Active{% else %}Inactive{% endif %}
                            </span>
                        </td>
                        <td>
                            <a href="{{ url_for('games.detail', slug=game.slug) }}"
                               class="btn btn-sm btn-primary" title="View">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{{ url_for('games_admin.edit_game', game_id=game.id) }}"
                               class="btn btn-sm btn-primary" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form method="post"
                                  action="{{ url_for('games_admin.delete_game', game_id=game.id) }}"
                                  style="display:inline;"
                                  onsubmit="return confirm('Delete {{ game.name }}?');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-sm"
                                        style="background:#330000;border:1px solid #ff0000;color:#ff0000;"
                                        title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% else %}
<p class="text-center" style="color:#007700;">No games yet.</p>
{% endfor %}
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
    document.querySelectorAll('table.sortable-games tbody').forEach(function (tbody) {
        new Sortable(tbody, {
            handle: '.drag-handle',
            animation: 150,
            onEnd: function () {
                var order = Array.from(tbody.querySelectorAll('tr[data-game-id]'))
                    .map(function (tr) { return parseInt(tr.getAttribute('data-game-id'), 10); });
                fetch("{{ url_for('games_admin.reorder_games') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrf
                    },
                    body: JSON.stringify({order: order})
                }).then(function (resp) {
                    if (resp.ok) {
                        location.reload();
                    }
                });
            }
        });
    });
});
</script>
{% endblock %}