{% load i18n %}
{% load static %}
{% load scope_tags %}

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

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

        <link rel="stylesheet" href="{% static 'aagdpr/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css' %}" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==">
        <script src="{% static 'aagdpr/ajax/libs/jquery/3.7.1/jquery.slim.min.js' %}" integrity="sha512-sNylduh9fqpYUK5OYXWcBleGzbZInWj8yCJAU57r1dpSK9tP2ghf/SRYCMj+KsslFkCOt3TvJrX2AV/Gc3wOqA=="></script>
        <script src="{% static 'aagdpr/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js' %}" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="></script>
        <link rel="stylesheet" href="{% static 'aagdpr/ajax/libs/font-awesome/5.15.4/css/all.min.css' %}" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==">

        <style>
            .character-image{
                width: 110px;
                height: auto;
            }

            @media (min-width: 550px) {
                .character-image {
                    width: 175px;
                }
            }
            /* sm */
            @media (min-width: 768px) {
                .character-image {
                    width: 210px;
                }
                .sso-card{
                    width: auto;
                }
            }
        </style>
    </head>
    <body class="bg-dark">
        <div class="container-fluid mt-5">
            <h3 class="text-light font-weight-light text-center">{% trans "Select Character" %}</h3><br>
            <div class="mt-2">
                <div class="col-lg-10 offset-lg-1 col-md-12" style="padding-left: 0 !important; padding-right: 0 !important;">
                    <div class="card text-white bg-secondary">
                        <div class="card-header text-center">{% trans "Scopes Requested" %}</div>
                        <div class="card-body align-middle text-center">
                            {% for scope in scopes %}<span class="badge badge-dark">{{ scope|scope_friendly_name }}</span> {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="col-lg-10 offset-lg-1 col-md-12 container" style="padding-left: 0 !important; padding-right: 0 !important;">
                <div class="d-flex flex-wrap justify-content-center">
                    {% if tokens|length > 14 %}
                        <form method="post">
                            <div class="card text-white bg-secondary m-2 sso-card">
                                <div class="card-header text-center">{% trans "New Character" %}</div>
                                <div class="card-body text-center  d-none d-sm-block">
                                    <input type="image" formmethod="post" class="ra-avatar img-responsive character-image rounded-lg"
                                        src="https://images.evetech.net/characters/1/portrait?size=256">
                                        </div>
                                <div class="card-footer">
                                        {% csrf_token %}
                                        <input type="hidden" name="_add" value="True">
                                        <a href="#" type="submit" class="m-1">
                                            <input type="image" name="go" src="{% static 'esi\img\EVE_SSO_Login_Buttons_Small_Black.png'%}"
                                                alt="{% trans "Add Token" %}">
                                        </a>
                                </div>
                            </div>
                        </form>
                    {% endif %}
                    {% for token in tokens|dictsort:"character_name" %}
                        <form method="post">
                            {% csrf_token %}
                            <div class="card text-white bg-secondary m-2 mw-50">
                                <div class="card-header text-center">{{ token.character_name }}</div>
                                <div class="card-body text-center ">
                                    <input type="image" formmethod="post" class="ra-avatar img-responsive character-image rounded-lg"
                                        src="https://images.evetech.net/characters/{{ token.character_id }}/portrait?size=256">
                                </div>
                                <div class="card-footer">
                                        <input type="hidden" name="_token" value="{{ token.pk }}">
                                        <button class="btn btn-success w-100" type="submit" title="{% trans "Select" %}" formmethod="post">
                                            {% trans "Select" %}
                                        </button>
                                </div>
                            </div>
                        </form>
                    {% endfor %}
                    <form method="post">
                        {% csrf_token %}
                        <div class="card text-white bg-secondary m-2 sso-card">
                            <div class="card-header text-center">{% trans "New Character" %}</div>
                            <div class="card-body text-center  d-none d-sm-block">
                                <input type="image" formmethod="post" class="ra-avatar img-responsive character-image rounded-lg"
                                    src="https://images.evetech.net/characters/1/portrait?size=256">
                            </div>
                            <div class="card-footer">
                                    <input type="hidden" name="_add" value="True">
                                    <a href="#" type="submit" class="m-1">
                                        <input type="image" name="go" src="{% static 'esi\img\EVE_SSO_Login_Buttons_Small_Black.png'%}"
                                            alt="{% trans "Add Token" %}">
                                    </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
