{% extends "pages/abstract/base.html.twig" %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate('REGISTER') }}{% endblock %}

{% block page_description %}{{ translate('PAGE.LOGIN.DESCRIPTION', {'site_name': site.title }) }}{% endblock %}

{% block body_attributes %}
    class="hold-transition login-page"
{% endblock %}

{% block content %}
    <div class="login-box">
        <div class="login-logo">
            <a href="{{ site.uri.public }}">{{ site.title }}</a>
        </div>
        <!-- /.login-logo -->

        <div class="login-box-body register-form">
            <p class="login-box-msg"><strong>{{ translate('REGISTER') }}</strong></p>
            <div class="form-alerts" id="alerts-page"></div>

            <form id="register" role="form" action="{{ site.uri.public }}/account/register" method="post"
                  class="r-form">
                {% include "forms/csrf.html.twig" %}
                <label for="r-form-first-name">{{ translate('NAME_AND_EMAIL') }}</label>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="sr-only" for="r-form-first-name">{{ translate('FIRST_NAME') }}</label>
                            <input type="text" name="first_name" placeholder="{{ translate('FIRST_NAME') }}"
                                   class="form-control" id="r-form-first-name" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="sr-only" for="r-form-last-name">{{ translate('LAST_NAME') }}</label>
                            <input type="text" name="last_name" placeholder="{{ translate('LAST_NAME') }}"
                                   class="form-control" id="r-form-last-name" autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" name="email"
                           placeholder="{% if site.registration.require_email_verification %}{{ translate('EMAIL.VERIFICATION_REQUIRED') }}{% else %}{{ translate('EMAIL.YOUR') }}{% endif %}"
                           class="form-control" id="r-form-email">
                </div>
                <div class="form-group">
                    <label for="r-form-username">{{ translate('USERNAME') }}</label>
                    <span class="pull-right"><a href="#" id="form-register-username-suggest">[{{ translate('SUGGEST') }}
                            ]</a></span>
                    <input type="text" name="user_name" placeholder="{{ translate('USERNAME.CHOOSE') }}"
                           class="form-control" id="r-form-username" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="r-form-password">{{ translate('PASSWORD') }}</label>
                    <input type="password" name="password"
                           placeholder="{{ translate('PASSWORD.BETWEEN', {min: 12, max: 100}) }}" class="form-control"
                           id="r-form-password">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="r-form-passwordc">{{ translate('PASSWORD.CONFIRM') }}</label>
                    <input type="password" name="passwordc" placeholder="{{ translate('PASSWORD.CONFIRM') }}"
                           class="form-control" id="r-form-passwordc">
                </div>
                {% if site.registration.captcha %}
                    <div class="form-group">
                        <label class="sr-only" for="r-form-passwordc">{{ translate('CAPTCHA.VERIFY') }}</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" name="captcha" placeholder="{{ translate('CAPTCHA.SPECIFY') }}"
                                       class="form-control" id="r-form-captcha">
                            </div>
                            <div class="col-md-6 form-col-captcha">
                                <img src="{{ site.uri.public }}/account/captcha" id="captcha"
                                     data-target="#r-form-captcha">
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="collapse">
                    <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
                    <input name="spiderbro" id="spiderbro" value="http://" />
                </div>
                <div class="text-left">
                    <p>
                        {{ translate('TOS_AGREEMENT', {
                            'site_title' : site.title,
                            'link_attributes' : 'class="js-show-tos" href="#" data-toggle="modal"'
                        }) | raw }}
                    </p>
                </div>
                <div>
                    <button type="submit" class="btn btn-block btn-primary">{{ translate('REGISTER_ME') }}</button>
                </div>
                <div style="padding-top: 10px;">
                    {{ translate('SIGN_IN_HERE', {
                        'url' : site.uri.public ~'/account/sign-in'
                    }) | raw }}
                </div>
            </form>
        </div>
        <!-- /.login-box-body -->

    </div>
    <!-- /.login-box -->
{% endblock %}

{% block scripts_page %}
    <!-- Include validation rules -->
    <script>
        {% include "pages/partials/page.js.twig" %}
    </script>

    <!-- Include page-specific JS -->
    {{ assets.js('js/pages/register') | raw }}
{% endblock %}