{% load theme_tags %}
{% load i18n %}
{% load scope_tags %}
{% load static %}
{% comment %}
Override of esi/select_token.html (django-esi), restyled for the Zima theme.

Kept theme-aware on purpose: the head pulls {% theme_css %} / {% theme_js %}
and {% theme_html_tags %} so the page renders in whichever Zima variant
(dark/light) the user selected, exactly like the rest of the dashboard --
rather than hard-coding a single colour mode. Only the character grid is
restyled (responsive Bootstrap 5 cards with square portraits).
{% endcomment %}
<!doctype html>
<html lang="en" {% theme_html_tags %}>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="{% translate "ESI Token Selection" %} - {{ SITE_NAME }}">

        {% include 'allianceauth/opengraph.html' %}
        {% include 'allianceauth/icons.html' %}

        <title>{% translate "ESI Token Selection" %} - {{ SITE_NAME }}</title>

        {% include 'bundles/auth-framework-css.html' %}
        {% theme_css %}
        {% include 'bundles/fontawesome.html' %}
        {% include 'bundles/jquery-js.html' %}
        {% include 'bundles/auth-framework-js.html' %}
        {% include 'custom_css/bundles/custom-css.html' %}
    </head>

    <body>
        <div class="container-lg py-5">
            <h1 class="fs-3 fw-light text-center mb-4">{% translate "Select Character" %}</h1>

            <div class="row justify-content-center mb-4">
                <div class="col-12 col-lg-10">
                    <div class="card">
                        <div class="card-header text-center">{% translate "Scopes Requested" %}</div>
                        <div class="card-body">
                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                {% for scope in scopes %}
                                    <span class="badge text-bg-primary">{{ scope|scope_friendly_name }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 g-3 justify-content-center">

                        <div class="col">
                            <form method="post" class="h-100">
                                {% csrf_token %}
                                <input type="hidden" name="_add" value="True">

                                <div class="card border-success h-100 d-flex flex-column">
                                    <div class="card-header text-center small">{% translate "New Character" %}</div>
                                    <div class="card-body">
                                        <button type="submit" class="btn p-0 border-0 bg-transparent w-100" title="{% translate 'Add Token' %}">
                                            <div class="ratio ratio-1x1">
                                                <img class="w-100 h-100 rounded object-fit-cover"
                                                    src="https://images.evetech.net/characters/1/portrait?size=256"
                                                    alt="{% translate 'New Character' %}">
                                            </div>
                                        </button>
                                        <div class="text-center mt-2 small text-success">+ {% translate "Add Token" %}</div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {% for token in tokens|dictsort:"character_name" %}
                            <div class="col">
                                <form method="post" class="h-100">
                                    {% csrf_token %}
                                    <input type="hidden" name="_token" value="{{ token.pk }}">

                                    <div class="card h-100 d-flex flex-column">
                                        <div class="card-header text-center small">
                                            <span class="d-block text-truncate" title="{{ token.character_name }}">{{ token.character_name }}</span>
                                        </div>
                                        <div class="card-body">
                                            <button type="submit" class="btn p-0 border-0 bg-transparent w-100" title="{% translate 'Select' %}">
                                                <div class="ratio ratio-1x1">
                                                    <img class="w-100 h-100 rounded object-fit-cover"
                                                        src="https://images.evetech.net/characters/{{ token.character_id }}/portrait?size=256"
                                                        alt="{{ token.character_name }}">
                                                </div>
                                            </button>
                                        </div>
                                        <div class="card-footer mt-auto">
                                            <button type="submit" class="btn btn-success w-100" title="{% translate 'Select' %}">{% translate "Select" %}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>

        {% theme_js %}
    </body>
</html>
