<div class="checkout-section section-register" v-if="!customer_id">
  <div class="title section-title">{{ j3.settings.get('sectionTitlePersonal') }}</div>
  <div class="section-body">
    <div class="form-group account-customer-group" style="display: {% if customer_groups|length > 1 %} block {% else %} none {% endif %};">
      <label class="control-label">{{ entry_customer_group }}</label>
      {% for customer_group in customer_groups %}
        <div class="radio">
          <label>
            <input v-model="order_data.customer_group_id" type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}" checked="checked"/>
            {{ customer_group.name }}</label>
        </div>
      {% endfor %}
    </div>

    {# customer firstname #}

    <div class="form-group required account-firstname">
      <label class="control-label" for="input-firstname">{{ entry_firstname }}</label>
      <input v-model="order_data.payment_firstname" type="text" name="firstname" value="" placeholder="{{ entry_firstname }}" id="input-firstname" class="form-control"/>
      <span class="text-danger" v-if="error && error.payment_firstname" v-html="error.payment_firstname"></span>
    </div>

    {# customer lastname #}

    <div class="form-group required account-lastname">
      <label class="control-label" for="input-lastname">{{ entry_lastname }}</label>
      <input v-model="order_data.payment_lastname" type="text" name="lastname" value="" placeholder="{{ entry_lastname }}" id="input-lastname" class="form-control"/>
      <span class="text-danger" v-if="error && error.payment_lastname" v-html="error.payment_lastname"></span>
    </div>

    {# customer email #}

    <div class="form-group required account-email">
      <label class="control-label" for="input-email">{{ entry_email }}</label>
      <input v-model="order_data.email" type="text" name="email" value="" placeholder="{{ entry_email }}" id="input-email" class="form-control"/>
      <span class="text-danger" v-if="error && error.email" v-html="error.email"></span>
    </div>

    {# customer telephone #}

    <div class="form-group required account-telephone">
      <label class="control-label" for="input-telephone">{{ entry_telephone }}</label>
      <input v-model="order_data.telephone" type="text" name="telephone" value="" placeholder="{{ entry_telephone }}" id="input-telephone" class="form-control"/>
      <span class="text-danger" v-if="error && error.telephone" v-html="error.telephone"></span>
    </div>

    {# customer password #}

    <div v-if="account === 'register'" class="form-group required account-pass">
      <label class="control-label" for="input-password">{{ entry_password }}</label>
      <input v-model="password" type="password" name="password" value="" placeholder="{{ entry_password }}" id="input-password" class="form-control"/>
      <span class="text-danger" v-if="error && error.password" v-html="error.password"></span>
    </div>

    <div v-if="account === 'register'" class="form-group required account-pass2">
      <label class="control-label" for="input-confirm">{{ entry_confirm }}</label>
      <input v-model="password2" type="password" name="confirm" value="" placeholder="{{ entry_confirm }}" id="input-confirm" class="form-control"/>
      <span class="text-danger" v-if="error && error.password2" v-html="error.password2"></span>
    </div>

    {# custom fields - select #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'select'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <select v-model="order_data.custom_field[custom_field.custom_field_id]" v-bind:id="'input-account-custom-field' + custom_field.custom_field_id" class="form-control">
        <option value="">{{ text_select }}</option>
        <option v-for="custom_field_value in custom_field.custom_field_value" v-bind:value="custom_field_value.custom_field_value_id" v-html="custom_field_value.name"></option>
      </select>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - radio #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'radio'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-html="custom_field.name"></label>
      <div v-bind:id="'input-account-custom-field' + custom_field.custom_field_id">
        <div class="radio" v-for="custom_field_value in custom_field.custom_field_value">
          <label>
            <input type="radio" v-model="order_data.custom_field[custom_field.custom_field_id]" v-bind:value="custom_field_value.custom_field_value_id"/>
            <span v-html="custom_field_value.name"></span></label>
        </div>
      </div>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - checkbox #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'checkbox'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-html="custom_field.name"></label>
      <div v-bind:id="'input-account-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.location }}][{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}"/>
              {{ custom_field_value.name }}</label>
          </div>
        {% endfor %} </div>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - text #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'text'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <input type="text" v-model="order_data.custom_field[custom_field.custom_field_id]" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" v-bind:id="'input-account-custom-field' + custom_field.custom_field_id" class="form-control"/>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - textarea #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'textarea'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <textarea v-model="order_data.custom_field[custom_field.custom_field_id]" rows="5" v-bind:placeholder="custom_field.name" v-bind:id="'input-account-custom-field' + custom_field.custom_field_id" class="form-control">{{ custom_field.value }}</textarea>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - file #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'file'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <br/>
      <button type="button" v-on:click="upload('custom_field', custom_field.custom_field_id, $event)" v-bind:id="'button-account-custom-field' + custom_field.custom_field_id" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
      <input type="hidden" v-model="order_data.custom_field[custom_field.custom_field_id]" value="" v-bind:id="'input-account-custom-field' + custom_field.custom_field_id" class="form-control"/>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - date #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'date'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <div class="input-group date">
        <input type="text" v-model="order_data.custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="YYYY-MM-DD" v-bind:id="'input-account-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>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - time #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'time'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <div class="input-group time">
        <input type="text" v-model="order_data.custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="HH:mm" v-bind:id="'input-account-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>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>

    {# custom fields - datetime #}

    <div v-for="custom_field in custom_fields.custom_fields.account" v-if="custom_field.type === 'time'" v-bind:id="'account-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
      <label class="control-label" v-bind:for="'input-account-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
      <div class="input-group datetime">
        <input type="text" v-model="order_data.custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="YYYY-MM-DD HH:mm" v-bind:id="'input-account-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>
      <span class="text-danger" v-if="error && error.custom_field && error.custom_field[custom_field.custom_field_id]" v-html="error.custom_field[custom_field.custom_field_id]"></span>
    </div>
  </div>
</div>
