{% extends "base.html" %}

{% block title %}Authorize {{ application_name }} — allowthem{% endblock %}

{% block body %}
<div class="flex min-h-screen items-center justify-center px-4 py-12">
    <div class="w-full max-w-md space-y-6">
        {# Application identity #}
        <div class="text-center space-y-3">
            {% if logo_url and logo_url is startingwith("https://") %}
            <img src="{{ logo_url }}" alt="{{ application_name }}"
                 class="mx-auto h-16 w-16 rounded-lg object-contain">
            {% endif %}
            <h1 class="text-xl font-semibold text-gray-900">
                {{ application_name }}
            </h1>
            <p class="text-sm text-gray-500">
                wants access to your account
            </p>
        </div>

        {# Scope list #}
        <div class="rounded-lg border border-gray-200 bg-white p-4">
            <p class="text-sm font-medium text-gray-700 mb-3">
                This will allow {{ application_name }} to:
            </p>
            <ul class="space-y-2">
                {% for item in scope_items %}
                <li class="flex items-start space-x-2 text-sm text-gray-600">
                    <span class="mt-0.5 text-green-500">&#10003;</span>
                    <span>{{ item.description }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>

        {# Consent form #}
        <form method="post" action="/oauth/authorize" class="space-y-3">
            {# Hidden authorize params #}
            <input type="hidden" name="client_id" value="{{ client_id }}">
            <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
            <input type="hidden" name="response_type" value="{{ response_type }}">
            <input type="hidden" name="scope" value="{{ scope }}">
            <input type="hidden" name="state" value="{{ state_param }}">
            <input type="hidden" name="code_challenge" value="{{ code_challenge }}">
            <input type="hidden" name="code_challenge_method"
                   value="{{ code_challenge_method }}">
            {% if nonce %}
            <input type="hidden" name="nonce" value="{{ nonce }}">
            {% endif %}
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

            <button type="submit" name="consent" value="approve"
                    class="at-btn-primary w-full rounded-lg px-4 py-2.5 text-sm font-medium
                           text-white focus:outline-none focus:ring-2
                           focus:ring-offset-2">
                Allow
            </button>

            <button type="submit" name="consent" value="deny"
                    class="w-full rounded-lg border border-gray-300 bg-white
                           px-4 py-2.5 text-sm font-medium text-gray-700
                           hover:bg-gray-50 focus:outline-none focus:ring-2
                           focus:ring-gray-500 focus:ring-offset-2">
                Deny
            </button>
        </form>

        <p class="text-center text-xs text-gray-400">
            Authorizing will redirect you to {{ redirect_uri }}
        </p>
    </div>
</div>
{% endblock %}