{%- import "utils.html" as utils with context -%}
{% extends "layout.html" %}
{% block content %}
<div class="box">
    <div class"indieauth-box">
        {% if client.logo %}
        <div class="indieauth-logo">
            <img src="{{client.logo | media_proxy_url }}" alt="{{ client.name }} logo">
        </div>
        {% endif %}
        <div class="indieauth-details">
            <div>
                {% if client.url %}
                    <a class="scolor" href="{{ client.url }}">{{ client.name }}</a>
                {% else %}
                    <span class="scolor">{{ client.name }}</span>
                {% endif %}
                <p>wants you to login{% if me %} as <strong class="lcolor">{{ me }}</strong>{% endif %} with the following redirect URI: <code>{{ redirect_uri }}</code>.</p>


                <form method="POST" action="{{ url_for('indieauth_flow') }}" class="form">
                    {{ utils.embed_csrf_token() }}
                    {% if scopes %}
                    <h3>Scopes</h3>
                    <ul>
                    {% for scope in scopes %}
                    <li><input type="checkbox" name="scopes" value="{{scope}}" id="scope-{{scope}}"><label for="scope-{{scope}}">{{ scope }}</label>
                    </li>
                    {% endfor %}
                    </ul>
                    {% endif %}
                    <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
                    <input type="hidden" name="state" value="{{ state }}">
                    <input type="hidden" name="client_id" value="{{ client_id }}">
                    <input type="hidden" name="me" value="{{ me }}">
                    <input type="hidden" name="response_type" value="{{ response_type }}">
                    <input type="hidden" name="code_challenge" value="{{ code_challenge }}">
                    <input type="hidden" name="code_challenge_method" value="{{ code_challenge_method }}">
                    <input type="submit" value="login">
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}