{% trans_default_domain 'FOSUserBundle' %}

<style>
    .mb-register-page {
        padding: 10px 15px 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mb-register-card {
        width: 100%;
        max-width: 560px;
        border: 1px solid #d7e2ec;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(20, 46, 78, 0.10);
        overflow: hidden;
    }

    .mb-register-card .panel-heading {
        background: #1f4e79;
        color: #ffffff;
        border-bottom: 0;
        padding: 14px 20px;
    }

    .mb-register-card .panel-body {
        padding: 25px 22px 20px;
    }

    .mb-register-card label {
        font-weight: 600;
        color: #21405f;
        margin-bottom: 6px;
    }

    .mb-register-card .form-control {
        height: 40px;
        border-radius: 6px;
        border-color: #c9d7e5;
        box-shadow: none;
    }

    .mb-register-card .btn-primary {
        background-color: #1f4e79;
        border-color: #1f4e79;
        font-weight: 600;
        padding: 10px 14px;
        border-radius: 6px;
    }

    .mb-register-card .btn-primary:hover,
    .mb-register-card .btn-primary:focus {
        background-color: #163b5e;
        border-color: #163b5e;
    }

    .mb-register-card .text-danger {
        color: #b94a48;
        display: block;
        margin-top: 6px;
    }

    @media (max-width: 767px) {
        .mb-register-page {
            padding: 20px 10px;
        }

        .mb-register-card .panel-body {
            padding: 18px 15px 15px;
        }
    }
</style>

<div class="mb-register-page">
    <div class="panel panel-default mb-register-card">
        <div class="panel-heading">
            <h3 class="panel-title text-center">
                <span class="glyphicon glyphicon-user"></span>
                {{ 'registration.submit'|trans }}
            </h3>
        </div>
        <div class="panel-body">
            {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
                <div class="form-group">
                    {{ form_label(form.username) }}
                    {{ form_widget(form.username, { 'attr': { 'class': 'form-control' } }) }}
                    <span class="text-danger">{{ form_errors(form.username) }}</span>
                </div>
                <div class="form-group">
                    {{ form_label(form.email) }}
                    {{ form_widget(form.email, { 'attr': { 'class': 'form-control' } }) }}
                    <span class="text-danger">{{ form_errors(form.email) }}</span>
                </div>
                <div class="form-group">
                    {{ form_label(form.plainPassword.first) }}
                    {{ form_widget(form.plainPassword.first, { 'attr': { 'class': 'form-control' } }) }}
                    <span class="text-danger">{{ form_errors(form.plainPassword.first) }}</span>
                </div>
                <div class="form-group">
                    {{ form_label(form.plainPassword.second) }}
                    {{ form_widget(form.plainPassword.second, { 'attr': { 'class': 'form-control' } }) }}
                    <span class="text-danger">{{ form_errors(form.plainPassword.second) }}</span>
                </div>
                {{ form_rest(form) }}
                <div style="margin-top: 18px;">
                    <button class="btn btn-primary btn-block" type="submit">
                        <span class="glyphicon glyphicon-ok"></span>
                        {{ 'registration.submit'|trans }}
                    </button>
                </div>
            {{ form_end(form, {'render_rest': false}) }}
        </div>
    </div>
</div>