{% include 'RxGrabBundle:Layouts:global.html.twig' %}

{% block body %}

    {% include 'RxGrabBundle:Layouts:fixed_header_only.html.twig' %}

    {% if errors|length > 0 %}

        <div class="row">
            <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">

                    <div data-alert class="alert-box alert" style="margin-top: 20px;">
                        {% for error in errors %}
                            <div>{{ error }}</div>
                        {% endfor %}
                    </div>

            </div>
        </div>

    {% endif %}

    <div class="row">
        <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">

            <div class="rxgrab-registration-form-container">

                <h1>Create Your Account</h1>

                <form method="POST" action="{{ path('rx_grab_general_user_register') }}" novalidate>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.username) }}
                            {{ form_widget(form.username) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.password.first) }}
                            {{ form_widget(form.password.first) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.password.second) }}
                            {{ form_widget(form.password.second) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.first_name) }}
                            {{ form_widget(form.first_name) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.middle_name) }}
                            {{ form_widget(form.middle_name) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.last_name) }}
                            {{ form_widget(form.last_name) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                            {{ form_label(form.gender) }}
                            {{ form_widget(form.gender) }}
                        </div>
                        <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                            {{ form_label(form.birth_date) }}
                            {{ form_widget(form.birth_date) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.street) }}
                            {{ form_widget(form.street) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            <label class="required" for="generalUserCity">City</label>
                            <select name="city" id="generalUserCity">
                                {% for country in countries %}
                                    {% for province in country.provinces %}
                                        {% for city in province.cities %}
                                            <option class="{{ province.id }}" value="{{ city.id }}" {{ addressData.city == city.id ? 'selected' : '' }} >{{ city.description }}</option>
                                        {% endfor %}
                                    {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            <label class="required" for="generalUserProvince">Province</label>
                            <select name="province" id="generalUserProvince">
                                {% for country in countries %}
                                    {% for province in country.provinces %}
                                        <option class="{{ country.id }}" value="{{ province.id }}" {{ addressData.province == province.id ? 'selected' : '' }} >{{ province.description }}</option>
                                    {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            <label class="required" for="generalUserCountry">Country</label>
                            <select name="country" id="generalUserCountry">
                                {% for country in countries %}
                                    <option value="{{ country.id }}" {{ addressData.country == country.id ? 'selected' : '' }} >{{ country.description }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.zip_code) }}
                            {{ form_widget(form.zip_code) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.mobile_no) }}
                            {{ form_widget(form.mobile_no) }}
                            {{ form_widget(form.mobile_no_two) }}
                            {{ form_widget(form.mobile_no_three) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            {{ form_label(form.phone_no) }}
                            {{ form_widget(form.phone_no) }}
                            {{ form_widget(form.phone_no_two) }}
                            {{ form_widget(form.phone_no_three) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            <label class="required">Email</label>
                            {{ form_widget(form.email) }}
                            {{ form_widget(form.email_two) }}
                            {{ form_widget(form.email_three) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                            <hr>
                            <div class="buttons-container">
                                <button type="submit" class="button tiny rxgrab-submit-loading">Submit</button>
                                <a href="{{ path('rx_grab_general_user_login') }}" class="button tiny secondary">Cancel</a>
                            </div>
                        </div>
                    </div>

                    {{ form_widget(form.action) }}
                    {{ form_widget(form.id) }}
                    {{ form_widget(form._token) }}
                </form>
            </div>
        </div>
    </div>

    <script language="javascript">
        //<![CDATA[
        jQ(document).ready(function(){
            jQ('#generalUserProvince').chained('#generalUserCountry');
            jQ('#generalUserCity').chained('#generalUserProvince');
            global.maskDate();
            jQ('.rxgrab-submit-loading').bind('click', global.submitLoading);
        });
        //]]>
    </script>

{% endblock %}