{% 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/account-banner.jpg" class="img-fluid " alt="Bild: Account Banner">
                                <div class="mask">
                                </div>
                            </div>
                            <br>
                        </div>#}
            <!--./First column-->

            <!--Main information-->
            <!--Second column-->
            <div class="col-lg-12">
                <h2 class="h2-responsive font-bold">Benutzerkonto erstellen</h2>
                <hr>
                <p style="text-align:justify;">Hier können Sie ein neues Benutzerkonto erstellen, welches mit Ihrem
                    Unternehmen verknüft wird.
                    Dies ermöglicht Ihnen den Abruf von zusätzlichen Informationen rund um Ihren Auftrag. Wenn Sie mehr
                    über die verschiedenen Nutzungsvarianten erfahren wollen, klicken Sie bitte <a
                            href="{{ path('use-variation') }}">hier</a>.
                </p>
            </div>
            <!--./Second column-->

            <!--Third column-->
            <div class="col-lg-12">
                <p style="text-align:justify;"> Für die Erstellung eines Benutzerkontos benötigen wir bestimmte
                    Informationen, wie bspw. Ihre
                    Kundennummer bei TECDESIGN. Dies ist erforderlich, damit Ihr persönliches Konto mit dem
                    dazugehörigen Unternehmen
                    verknüpft werden kann. Es ist möglich, dass mehrere Benutzerkonten mit
                    derselben Kundennummer veknüpft werden. Somit können mehrere Mitarbeiter/Innen eines Unternehmens
                    eigene
                    Benutzerkonten besitzen und Ihre individuellen (Benachrichtigungs-) Einstellungen vornehmen.<br><br>
                    <strong>Nach der Erstellung Ihres Kontos bekommen Sie einen Aktivierungslink zur Bestätigung
                        an die angegebene E-Mail Adresse zugeschickt. Bevor Sie diesen Link nicht angeklickt haben,
                        können wir Ihr Konto aus datenschutzrechtlichen Gründen weder prüfen, noch freigeben.</strong>
                </p>
            </div>
            <!--./Third 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: Create new account -->
                <form method="POST" action="#">
                    <p class="h5 text-center mb-4">Benutzerkonto erstellen</p>

                    <div class="form-group">
                        <i class="fa fa-child prefix grey-text"></i>
                        <label for="selectGender">Anrede *</label>
                        <select class="form-control" name="gender" id="selectGender">
                            <option value="e"></option>
                            <option value="m">Herr</option>
                            <option value="w">Frau</option>
                            <option value="d">divers</option>
                        </select>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-user prefix grey-text"></i>
                        <input type="text" id="inputUserFirstName" class="form-control" name="firstname" required
                               pattern=".{1,}" value="{{ app.request.get('firstname') }}"
                               oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Vornamen ein!')"
                               oninput="setCustomValidity('')">
                        <label for="inputUserFirstName">Vorname *</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-user prefix grey-text"></i>
                        <input type="text" id="inputUserLastName" class="form-control" name="lastname" required
                               pattern=".{1,}" value="{{ app.request.get('lastname') }}"
                               oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Nachnamen ein!')"
                               oninput="setCustomValidity('')">
                        <label for="inputUserLastName">Nachname *</label>
                    </div>

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

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

                    <div class="md-form">
                        <i class="fa fa-industry prefix grey-text"></i>
                        <input type="text" id="inputCompanyName" class="form-control" name="company" required
                               pattern=".{1,}" value="{{ app.request.get('company') }}"
                               oninvalid="this.setCustomValidity('Bitte geben Sie den Namen des Unternehmens, bei ' +
                                'dem Sie arbeiten, ein!')"
                               oninput="setCustomValidity('')">
                        <label for="inputCompanyName">Unternehmen *</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-user prefix grey-text"></i>
                        <input type="text" id="inputCustomerNumber" class="form-control" name="customerNumber"
                               pattern="[0-9]{5,10}" required
                               value="{{ app.request.get('customerNumber') }}"
                               oninvalid="this.setCustomValidity('Die Kundennummer entspricht nicht dem geforderten Format!')"
                               oninput="setCustomValidity('')">
                        <label for="inputCustomerNumber">Kundennummer *</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-lock prefix grey-text"></i>
                        <input type="password" id="inputPassword" class="form-control" name="password" required
                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                               oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer)')"
                               oninput="setCustomValidity('')">
                        <label for="inputPassword">Passwort *</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-lock prefix grey-text"></i>
                        <input type="password" id="inputPassword2" class="form-control" name="password2" required
                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                               oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer')"
                               oninput="setCustomValidity('')">
                        <label for="inputPassword2">Passwort wiederholen *</label>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" class="filled-in" id="checkboxPrivacyPolicy" required>
                        <label for="checkboxPrivacyPolicy">Ich akzeptiere die
                            <a target="_blank" href="{{ path('data-protection') }}">Datenschutzrichtlinien.
                                *</a></label>
                    </div>

                    <div class="text-center">
                        <button href="" class="btn btn-primary" type="submit">Benutzerkonto
                            erstellen <i
                                    class="fa fa-user-plus ml-1"></i>
                        </button>
                    </div>
                </form>
                <!-- Form: Create new account -->
            </div>
            <!--./Second column-->

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

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

        <!--Fourth row-->
        <div class="row">
            <!--First column-->
            <div class="col-lg-12">
                <br>
                <p><strong>Hinweis:</strong> Alle mit einem Stern (<strong>*</strong>) gekennzeichneten Felder sind
                    Pflichtfelder.</p>
            </div>
            <!--./First column-->
        </div>
        <!--/.Fourth row-->
    </div>
{% endblock %}