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

{% block title %}Register{% endblock %}

{% block body %}
    {% for flashError in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}

    <div class="container">
        <div class="d-flex justify-content-center h-100">
            <div class="card-header">
                <h3>Register</h3>
            </div>
            <div class="card">
                <div class="card-body">
                    {{ form_start(registrationForm) }}

                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        {{ form_widget(registrationForm.username, {'attr': {'placeholder':'Username'}} ) }}
                    </div>

                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                        </div>
                        {{ form_widget(registrationForm.plainPassword, {'attr': {'placeholder':'Password'}} ) }}
                    </div>

                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"></span>
                        </div>
                        {{ form_widget(registrationForm.firstName, {'attr': {'placeholder':'First Name'}} ) }}
                    </div>

                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"></span>
                        </div>
                        {{ form_widget(registrationForm.lastName, {'attr': {'placeholder':'Last Name'}} ) }}
                    </div>

                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
                        </div>
                        {{ form_widget(registrationForm.email, {'attr': {'placeholder':'eMail'}} ) }}
                    </div>

                    {{ form_row(registrationForm.agreeTerms) }}

                    <button type="submit" class="submit-button">Register</button>
                    {{ form_end(registrationForm) }}

                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-center links">
                        Already have an account? &nbsp;<a href=" {{ path('app_login') }}">Sign In!</a>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="#">Forgot your password?</a>
                    </div>
                    <!--
                    <div class="d-flex justify-content-center social_icon">
                        <span><i class="fab fa-apple"></i></span>
                        <span><i class="fab fa-facebook"></i></span>
                        <span><i class="fab fa-google-plus"></i></span>
                        <span><i class="fab fa-twitter"></i></span>
                    </div>
                    -->
                </div>
            </div>
        </div>
    </div>

{% endblock %}