{% extends '@commons/default.html.twig' %}

{% block content %}
    <div class="card-container">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="login mdl-card__title mdl-card--expand card-title">
                <h2 class="mdl-card__title-text">Tragen Sie ein Passwort für Ihren Account ein:</h2>
            </div>
            <form method="post" action="/verifizieren" enctype="multipart/form-data" id="verify">
                <div class="mdl-card__supporting-text">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="password" id="password" name="password" data-required=true>
                        <label class="mdl-textfield__label" for="password">Passwort</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="password" id="password2" name="password2" data-required=true>
                        <label class="mdl-textfield__label" for="password2">Passwort wiederholen</label>
                        <span class="mdl-textfield__error">Die Passwörter müssen übereinstimmen.</span>
                    </div>
                </div>
                <input type="hidden" name="link_id" value="{{ link_id }}">
                <div class="login-buttons mdl-card__actions mdl-card--border">
                    <button class="login-buttons mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit">
                        Absenden
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/js/verify.js') }}"></script>
{% endblock %}