{% extends "allianceauth/base-bs5.html" %}

{% load i18n %}
{% load oidc_tags %}
{% block page_title %}{{ page_title }}{% endblock %}
{% block extra_css %}
<style>
    .flex-container-main {
        margin-top: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .flex-container-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    .rounded-border {
        border-radius: 8px;
    }
    .portrait-overlap-left {
        margin-right: -10px;
    }
    .portrait-overlap-right {
        margin-left: -10px;
    }
    .link-icon-dim {
        opacity: 0.5;
    }
    .scope-heading {
        text-transform: uppercase;
    }
    .icon-gap {
        margin-right: 10px;
    }
    </style>
{% endblock %}

{% block content %}
    <div id="root">
        <div id="app">
            <div class="flex-container-main">
                {% if not error %}
                    <div>
                        <div class="card-body">
                            <form id="authorizationForm" method="post">
                                <div class="text-center">
                                    <img class="rounded-border portrait-overlap-left" width="128px" height="128px" src="{{ request.user.profile.main_character.portrait_url_256 }}" alt="{% translate 'Character portrait' %}"/>
                                    <i class="fa-solid fa-link fa-fw link-icon-dim"></i>
                                    <img class="rounded-border portrait-overlap-right" width="128px" height="128px" src="{{ application.logo_url|safe_image_url }}" alt="{{ application.name }}"/>
                                </div>
                                <h3 class="text-center">{{ application.name }} </h3>
                                <p class="text-center">{% translate 'is requesting access to your Alliance Auth User data' %}</p>
                                <p class="small text-center">{% translate "Logged in as:" %} <span class="badge text-bg-secondary">{{ request.user.profile.main_character }} [ {{ request.user.profile.main_character.corporation_ticker }} ]</span></p>
                                <hr>
                                {% csrf_token %}

                                {% for field in form %}
                                    {% if field.is_hidden %}
                                        {{ field }}
                                    {% endif %}
                                {% endfor %}
                                    <p class="small text-bold text-center text-muted scope-heading">{% trans "The application is requesting the following" %}</p>
                                    {% for scope in scopes_descriptions %}
                                        <p><i class="fa-solid fa-check-circle text-success icon-gap"></i> {{ scope }}</p>
                                    {% endfor %}
                                    <!--<div class="flex-container-controls"><p><i class="fas fa-times-circle text-danger"></i></p><p>Characters and Alts</p></div>-->
                                {{ form.errors }}
                                {{ form.non_field_errors }}
                                <hr>

                                <p class="small text-muted"><i class="fa-solid fa-link fa-fw icon-gap"></i>{% trans 'You will be redirected back to the application after authorization' %}</p>
                                <p class="small text-muted"><i class="fa-solid fa-user-shield fa-fw icon-gap"></i>{% trans 'This Application cannot access other data within Alliance Auth!' %}</p>

                                <hr>

                                <div class="flex-container-controls">
                                        <input type="submit" class="btn btn-lg btn-secondary" value="{% trans 'Cancel' %}"/>
                                        <input type="submit" class="btn btn-lg btn-info" name="allow" value="{% trans 'Authorize' %}"/>
                                </div>
                            </form>
                        </div>
                    </div>
                {% else %}
                    <h2>{% translate "Error:" %} {{ error.error }}</h2>
                    <p>{{ error.description }}</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}