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

{% set body_header_class = 'devicehead' %}
{% set body_header_text = 'Device authorisation' %}
{% set body_title = 'Device Authorisation Request' %}

{% block body_content %}
    <div class="js-loading"></div>

    <form class="js-verify-code hidden">
        <div class="oauth2-authorise-requesting">
            <p>A third-party application that cannot display websites on its own is requesting permission to access your account.</p>
            <p>Enter the code displayed on the device or application in the box below to continue authorisation.</p>
        </div>

        <div class="oauth2-device-form">
            <input type="text" class="oauth2-device-code js-device-code" name="code" placeholder="XXX-XXX-XXX" autofocus>
        </div>

        <div class="oauth2-authorise-buttons">
            <button class="oauth2-authorise-button">Next</button>
        </div>
    </form>

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

        <div class="js-verify-authorise-info"></div>
        <div class="js-verify-authorise-scope"></div>

        <div class="oauth2-authorise-buttons">
            <button name="approve" value="yes" class="oauth2-authorise-button oauth2-authorise-button-accept">Authorise</button>
            <button name="approve" value="no" class="oauth2-authorise-button oauth2-authorise-button-deny">Cancel</button>
        </div>
    </form>

    <div class="js-verify-approved hidden">
        <div class="oauth2-approval">
            <div class="oauth2-approval-icon oauth2-approval-icon-approved"></div>
            <div class="oauth2-approval-header">Approved!</div>
            <div class="oauth2-approval-text">
                <p>You have approved the device authorisation request. You should now be signed in on the target device or application.</p>
            </div>
        </div>
    </div>

    <div class="js-verify-denied hidden">
        <div class="oauth2-approval">
            <div class="oauth2-approval-icon oauth2-approval-icon-denied"></div>
            <div class="oauth2-approval-header">Denied!</div>
            <div class="oauth2-approval-text">
                <p>You have denied the device authorisation request. Please return to the target device or application and follow displayed instructions.</p>
            </div>
        </div>
    </div>
{% endblock %}