{% extends 'oauth2/master.twig' %}

{% block body %}
    <header class="oauth2-header"{% if auth.user.colour != 'inherit' %} style="background-color: {{ auth.user.colour }}"{% endif %}>
        <div class="oauth2-userhead">
            <div class="oauth2-userhead-main">
                <div class="oauth2-userhead-main-avatar">
                    <div class="oauth2-userhead-main-avatar-image">
                        <img src="{{ auth.user.avatars.original }}" alt="">
                    </div>
                </div>
                <div class="oauth2-userhead-main-name">
                    <a href="{{ auth.user.profile_url }}" target="_blank">{{ auth.user.name }}</a>
                </div>
            </div>
            {% if auth.guise is defined %}
                <div class="oauth2-userhead-guise">
                    <div class="oauth2-userhead-guise-avatar">
                        <div class="oauth2-userhead-guise-avatar-image">
                            <img src="{{ auth.guise.avatars.x60 }}" alt="">
                        </div>
                    </div>
                    <div class="oauth2-userhead-guise-text">
                        <p>Are you <a href="{{ auth.guise.profile_url }}" target="_blank" style="color: {{ auth.guise.colour }}">{{ auth.guise.name }}</a> and did you mean to use your own account?</p>
                        <p><a href="{{ auth.guise.revert_url }}" target="_blank">Click here</a> and reload this page.</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </header>
    <div class="oauth2-body">
        <div class="oauth2-banner">
            <div class="oauth2-banner-text">
                Authorisation Request
            </div>
            <div class="oauth2-banner-logo">
                Flashii
            </div>
        </div>

        <div class="oauth2-authorise-requesting">
            <p>A third-party application is requesting permission to access your account.</p>
        </div>

        <div class="oauth2-appinfo">
            <div class="oauth2-appinfo-name">
                {{ app.name }}
            </div>{# TODO: author should be listed #}
            <div class="oauth2-appinfo-links">
                <a href="{{ app.website }}" target="_blank" rel="noopener noreferrer" class="oauth2-appinfo-link" title="Website">
                    <div class="oauth2-appinfo-link-icon oauth2-appinfo-link-icon-globe"></div>
                    <div class="oauth2-appinfo-link-text">{{ app.websiteDisplay }}</div>
                </a>
            </div>
            <div class="oauth2-appinfo-summary">
                <p>{{ app.summary }}</p>
            </div>
        </div>

        <div class="oauth2-scope">
            <div class="oauth2-scope-header">This application will be able to:</div>
            <div class="oauth2-scope-perms">
                <div class="oauth2-scope-perm">
                    <div class="oauth2-scope-perm-icon"></div>
                    <div class="oauth2-scope-perm-text">Do anything because I have not made up scopes yet.</div>
                </div>
                <div class="oauth2-scope-perm">
                    <div class="oauth2-scope-perm-icon"></div>
                    <div class="oauth2-scope-perm-text">Eat soup.</div>
                </div>
                <div class="oauth2-scope-perm">
                    <div class="oauth2-scope-perm-icon"></div>
                    <div class="oauth2-scope-perm-text">These are placeholders.</div>
                </div>
                <div class="oauth2-scope-perm">
                    <div class="oauth2-scope-perm-icon"></div>
                    <div class="oauth2-scope-perm-text">This one is really long because I want to test wrapping and how the chevron icon thing will handle it so there will be a lot of text here, the app will not be gaining anything from it but yeah sometimes you just need to explode seventy times.</div>
                </div>
            </div>
        </div>

        <div class="oauth2-authorise-buttons">
            <button type="button" class="oauth2-authorise-button oauth2-authorise-button-accept js-authorise-action" data-redirect="{{ redirect_uri }}" data-csrfp="{{ csrfp_token }}" data-approve="yes" data-code="{{ req.code }}" disabled>Authorise</button>
            <button type="button" class="oauth2-authorise-button oauth2-authorise-button-deny js-authorise-action" data-redirect="{{ redirect_uri }}" data-csrfp="{{ csrfp_token }}" data-approve="no" data-code="{{ req.code }}" disabled>Cancel</button>
        </div>
    </div>
{% endblock %}