{% extends 'base.html.twig' %}


{% block body %}
    <div class="container">

        <!--First row-->
        <div class="row">
            <!--First column-->
            <div class="col-lg-7">
                <!--Featured image -->
                <div class="view overlay hm-white-light z-depth-1-half">
                    <img src="/img/other/login-banner.jpg" class="img-fluid " alt="Bild: Login Banner">
                    <div class="mask">
                    </div>
                </div>
                <br>
            </div>
            <!--./First column-->

            <!--Main information-->
            <!--Second column-->
            <div class="col-lg-5">
                <h2 class="h2-responsive font-bold">Haben Sie Ihr Passwort vergessen ?</h2>
                <hr>
                <p style="text-align:justify;">Wenn Sie das Passwort für Ihr Profil vergessen haben, können Sie sich
                    hier nach der Eingabe
                    Ihrer hinterlegten E-Mail Adresse ein neues zusenden lassen.
                </p>
            </div>
            <!--./Second column-->
        </div>
        <!--/.First row-->

        <!--Second row-->
        <div class="row">
            <!--First column-->
            <div class="col-lg-12">
                <!-- Mögliche Hinweismeldungen anzeigen -->
                {% if app.session.flashbag.peekAll|length > 0 %}
                    {% for type, messages in app.session.flashbag.all %}
                        {% for message in messages %}
                            <div class="alert alert-{{ type ? type : '' }}">
                                <p>{{ message|trans({}, domain|default('messages')) }}</p>
                            </div>
                        {% endfor %}
                    {% endfor %}
                {% endif %}
            </div>
            <!--./First column-->
        </div>
        <!--/.Second row-->

        <!--Third row-->
        <div class="row pt-4">

            <!-- Space -->
            <!--First column-->
            <div class="col-lg-4">
            </div>
            <!--./First column-->

            <!--Second column-->
            <div class="col-lg-4">
                <!-- Form: send new password -->
                <form method="POST" action="{{ path('newPassword') }}">
                    <p class="h5 text-center mb-4">Neues Passwort anfordern</p>

                    <div class="md-form">
                        <i class="fa fa-envelope prefix grey-text"></i>
                        <input type="email" id="inputUserMail" class="form-control" name="email" required
                               oninvalid="this.setCustomValidity('Bitte geben Sie eine gültige E-Mail Adresse ein!')"
                               oninput="setCustomValidity('')" autofocus>
                        <label for="inputUserMail">E-Mail Adresse</label>
                    </div>

                    <div class="text-center">
                        <button href="" class="btn btn-primary" type="submit">Passwort anfordern <i
                                    class="fa fa-paper-plane-o ml-1"></i>
                        </button>
                    </div>
                </form>
                <!-- Form: send new password -->
            </div>
            <!--./Second column-->

            <!-- Space -->
            <!--Third column-->
            <div class="col-lg-4">
            </div>
            <!--./Third column-->

        </div>
        <!--/.Third row-->

        <hr class="extra-margins my-5">


        <!--Fourth row-->
        <div class="row pt-4">
            <!--First column-->
            <div class="col-lg-12">

                <div class="jumbotron">
                    <h1 class="h1-responsive">Wussten Sie´s ?</h1>
                    <p class="lead"><strong>Anlage mehrerer Benutzerkonten pro Kunde</strong></p>
                    <hr class="my-2">
                    <p style="text-align:justify;">Es ist ebenfalls möglich, mehrere Benutzerkonten für dieselbe Firma
                        anzulegen. Dadurch kann sich bspw. jeder Benutzer seine eigenen Benachrichtigungen
                        konfigurieren.
                    </p>
                    <!--<a href="{{ path('createAccount') }}" class="btn btn-primary btn-lg" role="button">Benutzerkonto
                        erstellen</a>-->
                </div>

            </div>
            <!--./First column-->
        </div>
        <!--/.Fourth row-->
    </div>
{% endblock %}