{% extends "auth/base.html" %}

{% block title %}Authorize - {{ site_name() }}{% endblock %}

{% block head %}
<style nonce="{{ csp_nonce() }}">
    .consent-container {
        max-width: 400px;
        margin: 2rem auto;
    }

    .scope-list {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
    }

    .scope-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--sk-color-border, #eee);
    }

    .scope-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    .scope-option input {
        flex: none;
        accent-color: #16a34a;
    }

    .scope-option:has(input:disabled) {
        cursor: default;
    }

    .scope-required-hint {
        display: block;
        font-size: 0.85em;
        font-style: normal;
        color: var(--sk-color-text-muted, #6b7280);
    }

    .client-name {
        font-weight: 600;
        color: var(--sk-color-primary, #2563eb);
    }

    .consent-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .consent-buttons button {
        flex: 1;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-allow {
        background: #16a34a;
        color: white;
    }

    .btn-allow:hover {
        background: #15803d;
    }

    .btn-deny {
        background: #e5e7eb;
        color: #374151;
    }

    .btn-deny:hover {
        background: #d1d5db;
    }
</style>
{% endblock %}

{% block content %}
<div class="consent-container">
    <article>
        <header>
            <h1>Authorize Application</h1>
        </header>

        <p>
            <span class="client-name">{{ display_name or client_id }}</span>
            wants to access your account.
        </p>

        <form method="post" action="/oauth/authorize">
            {{ csrf_field() }}

            {% if scope_descriptions %}
            <p>Choose what to allow:</p>
            <ul class="scope-list">
                {% for scope in scope_descriptions %}
                <li>
                    <label class="scope-option">
                        {% if scope.required %}
                        {# A disabled checkbox submits nothing, so the value
                           rides in a hidden field; the server re-asserts
                           required scopes regardless. #}
                        <input type="checkbox" checked disabled>
                        <input type="hidden" name="scope" value="{{ scope.name }}">
                        <span>{{ scope.description }}
                            <em class="scope-required-hint">Required — the other permissions depend on it</em>
                        </span>
                        {% else %}
                        <input type="checkbox" name="scope" value="{{ scope.name }}" checked>
                        <span>{{ scope.description }}</span>
                        {% endif %}
                    </label>
                </li>
                {% endfor %}
            </ul>
            {% elif scopes %}
            <p>Choose what to allow:</p>
            <ul class="scope-list">
                {% for scope in scopes %}
                <li>
                    <label class="scope-option">
                        <input type="checkbox" name="scope" value="{{ scope }}" checked>
                        <span>{{ scope }}</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
            {% endif %}

            <div class="consent-buttons">
                <button type="submit" name="action" value="deny" class="btn-deny">Deny</button>
                <button type="submit" name="action" value="allow" class="btn-allow">Allow</button>
            </div>
        </form>
    </article>
</div>
{% endblock %}