{% extends "digid_eherkenning/mock/base.html" %}

{% block body %}
    <h2 class="orange_heading">Vul hieronder uw gebruikersnaam en wachtwoord in</h2>

    <form class="remember_login" id="new_authentication" action="{{ action_url }}"
        accept-charset="UTF-8" method="post">
        {% csrf_token %}
        <input name="utf8" type="hidden" value="✓">

        <div class="normal-login" id="normal-login">
            <header class="form__header"></header>

            <fieldset class="form__item" id="username-field">
                <label class="form__item__label" for="authentication_username">DigiD gebruikersnaam</label>
                <input class="form__item__field" spellcheck="false" placeholder=" " type="text"
                    name="{{ form.auth_name.name }}" value="{% firstof form.auth_name.value '' %}" id="authentication_username" data-digidmock-empty="authentication_username__empty">

                <ul id="authentication_username__empty" class="form__item__errors digidmock-error {% if form.auth_name.errors %}digidmock-show{% endif %}">
                    <li><strong>U heeft het veld "DigiD gebruikersnaam" niet ingevuld.</strong> <br>Dit is een verplicht
                        veld.
                    </li>
                </ul>
            </fieldset>

            <fieldset class="form__item show_password_field" id="password-field">
                <label class="form__item__label" for="authentication_password">Wachtwoord</label>
                <input class="form__item__field" placeholder=" " type="password" name="{{ form.auth_pass.name }}"
                    value="{% firstof form.auth_pass.value '' %}" id="authentication_password" data-digidmock-empty="authentication_password__empty"><i class="icon-1008-oog"></i>

                <ul id="authentication_password__empty" class="form__item__errors digidmock-error {% if form.auth_pass.errors %}digidmock-show{% endif %}">
                    <li><strong>U heeft het veld "Wachtwoord" niet ingevuld.</strong> <br>Dit is een verplicht veld.
                    </li>
                </ul>
            </fieldset>

            <label class="form__item__box-label checkbox_container digidmock-anchor-placeholder"
                for="authentication_remember_login">
                Onthoud mijn DigiD gebruikersnaam
                <input type="checkbox" value="1" name="remember_login"><span class="checkbox_checkmark"></span>
            </label>

            <div class="actions">
                <button name="commit" type="submit" class="actions__right--button primary--button arrow"
                    data-disable-with="Inloggen" id="submit-button" arrow="true" value="Inloggen">
                    Inloggen
                </button>
                <a action="previous" arrow="true" css_type="button" class="actions__left--button arrow"
                    href="{{ back_url }}">Vorige</a>
            </div>
        </div>
    </form>

    <ul class='list-with-arrows' style='margin-bottom: 48px;'>
        <li id='forgot_password'><a class="digidmock-anchor-placeholder">Wachtwoord
            vergeten?</a></li>
        <li id='request-new-digid'><a class="digidmock-anchor-placeholder">Nog
            geen DigiD? Vraag uw DigiD aan</a></li>
    </ul>
{% endblock %}
