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

{% block page_content %}
    <div class="register-box">
        <div class="register-logo">
                <a href="{{ path('homepage') }}"><b>MeS</b>ODD</a>
        </div>
      
        <div class="card">
            <div class="card-body register-card-body">
                <p class="login-box-msg">Register a new membership</p>
      
                {{ form_start(form) }}
                    <div class="input-group mb-3">
                        {{ form_widget(form.username) }}
                        <!--input type="text" class="form-control" placeholder="Full name"-->
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.email) }}
                        <!--input type="email" class="form-control" placeholder="Email"-->
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.plainPassword.first) }}
                        <!--input type="password" class="form-control" placeholder="Password"-->
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.plainPassword.second) }}
                        <!--input type="password" class="form-control" placeholder="Retype password"-->
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.givenName) }}
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.familyName) }}
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        {{ form_widget(form.telephone) }}
                        <div class="input-group-append input-group-text">
                            <span class="fas fa-phone"></span>
                        </div>
                    </div>
        
                    <div class="row">
                        <div class="col-8">
                            <div class="icheck-primary">
                                <input type="checkbox" id="agreeTerms" name="terms" value="agree">
                                <label for="agreeTerms">
                                I agree to the <a href="#">terms</a>
                                </label>
                            </div>
                        </div>

                        <div class="col-4">
                            <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
                        </div>

                    </div>
                {{ form_end(form) }}
      
                <!--div class="social-auth-links text-center">
                <p>- OR -</p>
                <a href="#" class="btn btn-block btn-primary">
                    <i class="fab fa-facebook mr-2"></i>
                    Sign up using Facebook
                </a>
                <a href="#" class="btn btn-block btn-danger">
                    <i class="fab fa-google-plus mr-2"></i>
                    Sign up using Google+
                </a>
                </div-->
      
                <a href="{{ path('app_login') }}" class="text-center">{% trans %}authentication.already_registered{% endtrans %}</a> 
            </div>

        </div>
    </div>
{% endblock %}