{% load i18n %}
{% load static %}
{% load scope_tags %}
{% load theme_tags %}
<!doctype html>
<html lang="en" {% theme_html_tags %}>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link rel="stylesheet" href="{% static 'aa_theme_xix/css/bootstrap.css' %}">
    <script src="{% static 'aa_theme_xix/js/bootstrap.js' %}"></script>
  </head>

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

      <!-- Scopes -->
      <div class="row justify-content-center mb-4">
        <div class="col-12 col-lg-10">
          <div class="card border-secondary">
            <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 bg-light">{{ scope|scope_friendly_name }}</span>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Cards grid -->
      <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">

            {# Always "New Character" at top #}
            <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 class="card-footer mt-auto">
                    <button type="submit" class="btn btn-outline-dark w-100">
                      <img
                        class="img-fluid"
                        src="{% static 'esi/img/EVE_SSO_Login_Buttons_Small_White.png' %}"
                        alt="{% translate 'Add Token' %}">
                    </button>
                  </div>
                </div>
              </form>
            </div>

            {# tokens #}
            {% 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 border-secondary 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 class="btn btn-success w-100" type="submit" title="{% translate 'Select' %}">
                        {% translate "Select" %}
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            {% endfor %}

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

    </div>
  </body>
</html>
