<div class="checkout-content checkout-register">
    <fieldset id="account">
        <h2 class="secondary-title"><i class="fa fa-user-plus"></i>{{ text_your_details }}</h2>
        <div class="payment-new box-inner">
            <div class="form-group customer-group" style="display: {{ customer_groups|length > 1 ? 'block' : 'none' }}">
                <label class="control-label">{{ entry_customer_group }}</label>
                {% for customer_group in customer_groups %}
                    {% if customer_group.customer_group_id == customer_group_id %}
                        <div class="radio">
                            <label>
                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}" checked="checked"/>
                                {{ customer_group.name }}
                            </label>
                        </div>
                    {% else %}
                        <div class="radio">
                            <label>
                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}"/>
                                {{ customer_group.name }}
                            </label>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="form-group input-firstname required" style="width: 49%; float: left;">
                <input type="text" name="firstname" value="{{ SoUtils.getProperty(order_data, 'firstname') }}" placeholder="{{ entry_firstname }} *" id="input-payment-firstname" class="form-control"/>
            </div>
            <div class="form-group input-lastname required" style="width: 49%; float: right;">
                <input type="text" name="lastname" value="{{ SoUtils.getProperty(order_data, 'lastname') }}" placeholder="{{ entry_lastname }} *" id="input-payment-lastname" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="text" name="email" value="{{ SoUtils.getProperty(order_data, 'email') }}" placeholder="{{ entry_email }} *" id="input-payment-email" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="text" name="telephone" value="{{ SoUtils.getProperty(order_data, 'telephone') }}" placeholder="{{ entry_telephone }} *" id="input-payment-telephone" class="form-control"/>
            </div>
            <div class="form-group fax-input">
                <input type="text" name="fax" value="{{ SoUtils.getProperty(order_data, 'fax') }}" placeholder="{{ entry_fax }}" id="input-payment-fax" class="form-control"/>
            </div>
            {% for custom_field in custom_fields %}
                {% if custom_field.location == 'account' %}
                    {% if custom_field.type == 'select' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <select
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control">
                                <option value="">{{ text_select }}</option>
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <option value="{{ custom_field_value.custom_field_value_id }}">{{ custom_field_value.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'radio' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <div id="input-payment-custom-field{{ custom_field.custom_field_id }}">
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}"/>
                                            {{ custom_field_value.name }}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'checkbox' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <div id="input-payment-custom-field{{ custom_field.custom_field_id }}">
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="custom_field[{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}"/>
                                            {{ custom_field_value.name }}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'text' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <input type="text"
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                value="{{ custom_field.value }}"
                                placeholder="{{ custom_field.name }}"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control"/>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'textarea' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <textarea
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                rows="5" placeholder="{{ custom_field.name }}"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control">{{ custom_field.value }}</textarea>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'file' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <br/>
                            <button type="button"
                                id="button-payment-custom-field{{ custom_field.custom_field_id }}"
                                data-loading-text="{{ text_loading }}" class="btn btn-default"><i
                                class="fa fa-upload"></i> {{ button_upload }}</button>
                            <input type="hidden"
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                value=""
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"/>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'date' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group date">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'time' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group time">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}" data-date-format="HH:mm"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'datetime' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group datetime">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}"
                                    data-date-format="YYYY-MM-DD HH:mm"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </fieldset>
    <fieldset id="password" style="display: {{ setting_so_onepagecheckout_layout_setting.so_onepagecheckout_account_open == 'register' ? 'block' : 'none' }}">
        {% if setting_so_onepagecheckout_general.so_onepagecheckout_layout != 2 %}
            <h2 class="secondary-title"><i class="fa fa-lock"></i>{{ text_your_password }}</h2>
        {% endif %}
        <div class="box-inner">
            <div class="form-group required">
                <input type="password" name="password" value="{{ SoUtils.getProperty(order_data, 'password') }}" placeholder="{{ entry_password }} *" id="input-payment-password" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="password" name="confirm" value="{{ SoUtils.getProperty(order_data, 'confirm') }}" placeholder="{{ entry_confirm }} *" id="input-payment-confirm" class="form-control"/>
            </div>
        </div>
    </fieldset>
    <fieldset id="address">
        <h2 class="secondary-title"><i class="fa fa-map-marker"></i>{{ text_your_address }}</h2>
        {{ payment_address_form }}
    </fieldset>
    
    {% if is_shipping_required %}
        <div class="checkbox">
            <label>
                {% if shipping_address == '1' %}
                    <input type="checkbox" name="shipping_address" value="1" checked="checked" />
                {% else %}
                    <input type="checkbox" name="shipping_address" value="0" />
                {% endif %}
                {{ entry_shipping }}
            </label>
        </div>
        <fieldset id="shipping-address" style="display: {{ shipping_address == '1' ? 'none' : 'block' }}">
            <h2 class="secondary-title"><i class="fa fa-map-marker"></i>{{ text_shipping_address }}</h2>
            {{ shipping_address_form }}
        </fieldset>
    {% endif %}
</div>