{{ header }}
<div class="container">
  {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
  {% endif %}
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
      {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
      {% set class = 'col-sm-9' %}
    {% else %}
      {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">
    {{ include(helper.template('_partial/breadcrumb')) }}
    {{ content_top }}
      <ul class="nav nav-tabs bind-nav-tabs">
        <li class="active"><div href="#bind-old" data-toggle="tab">{{ text_bind_old }}</div></li>
        <li><div href="#bind-new" data-toggle="tab">{{ text_bind_new }}</div></li>
      </ul>
      <div class="tab-content bind-tab-content">
        <div class="tab-pane active" id="bind-old">
          <form action="{{ login_url }}" enctype="multipart/form-data" method="post"
                class="form-horizontal form-group-list">
            <input type="hidden" name="type" value="{{ type }}" id="input-type"/>
            <input type="hidden" name="bind" value="1"/>
            {% if helper.is_ft() %}
              <ul class="nav nav-tabs">
                <li id="tab-email-li" class="active">
                  <a href="#login-tab-email" data-toggle="tab">{{ text_login_email }}</a>
                </li>
                <li id="tab-mobile-li">
                  <a href="#login-tab-mobile" data-toggle="tab">{{ text_login_mobile }}</a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="login-tab-email">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <input type="text" name="email" value="" placeholder="{{ entry_email }}" id="login-input-email"
                             class="form-control"/>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="login-tab-mobile">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label class="control-label col-sm-2" for="input-telephone">{{ entry_telephone }}</label>
                      {% if helper.is_ft() %}
                        <div class="input-group">
                          <div class="input-group-btn">
                            <select id="login-input-pre-telephone" name="calling_code" class="form-control"
                                    style="min-width: 120px;">
                              <option value="">{{ text_select }}</option>
                              {% for country in helper.get_calling_codes() %}
                                {% if calling_code == country.code %}
                                  <option value="{{ country.code }}" selected="selected">{{ country.name }}</option>
                                {% else %}
                                  <option value="{{ country.code }}">{{ country.name }}</option>
                                  <{% endif %}
                              {% endfor %}
                            </select>
                          </div>
                          <input name="telephone" style="margin-left: -1px;" value="" id="login-input-telephone"
                                 onkeyup="this.value=this.value.replace(/\D/g,'')"
                                 onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                 class="form-control input-telephone" placeholder="{{ entry_telephone }}"/>
                        </div>
                      {% else %}
                        <input name="telephone" value="" placeholder="{{ entry_telephone }}" id="login-input-telephone"
                               class="form-control input-telephone"/>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            {% else %}
              <div class="form-group">
                <div class="col-sm-12">
                  <label class="control-label col-sm-2" for="input-email">{{ entry_email }}</label>
                  <input type="text" name="email" value="" placeholder="{{ entry_email }}" id="login-input-email"
                         class="form-control"/>
                </div>
              </div>
            {% endif %}
            <div class="form-group mt-1">
              <div class="col-sm-12">
                <label class="control-label col-sm-2" for="input-password">{{ entry_password }}</label>
                <input type="password" name="password" value="{{ password }}" placeholder="{{ entry_password }}"
                       id="login-input-password" class="form-control"/>
              </div>
            </div>
            <input type="button" value="{{ button_login }}" class="btn btn-primary btn-lg btn-block" id="bind-login"/>
            {% if redirect %}
              <input type="hidden" name="redirect" value="{{ redirect }}"/>
            {% endif %}
          </form>
        </div>

        <div class="tab-pane" id="bind-new">
          <form action="{{ register_url }}" enctype="multipart/form-data" method="post"
                class="form-horizontal form-group-list">
            <input type="hidden" name="type" value="{{ type }}" class="form-control"/>
            <input type="hidden" name="bind" value="1"/>
            <input type="hidden" name="agree" value="1"/>
            <input type="hidden" name="from" value="{{ from }}"/>
            <ul class="nav nav-tabs">
              <li id="tab-email" class="active"><a href="#tab-general" data-toggle="tab">{{ tab_email }}</a></li>
              <li id="tab-mobile"><a href="#tab-general" data-toggle="tab">{{ tab_mobile }}</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab-register-email">
                <fieldset id="account">
                  <div class="form-group required {{ hidden_name ? 'hidden' }}">
                    <label class="col-sm-2 control-label" for="input-firstname">{{ entry_firstname }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="firstname" value="" placeholder="{{ entry_firstname }}" id="input-firstname"
                             class="form-control"/>
                    </div>
                  </div>
                  <div class="form-group required {{ not helper.is_ft() or hidden_name ? 'hidden' }}">
                    <label class="col-sm-2 control-label" for="input-lastname">{{ entry_lastname }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="lastname" value="" placeholder="{{ entry_lastname }}" id="input-lastname"
                             class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group required {{ type == 'mobile' ? 'hidden' }}">
                    <div class="col-sm-12">
                      <input type="email" name="email" value="" placeholder="{{ entry_email }}" id="input-email"
                             class="form-control"/>
                    </div>
                  </div>
                  <div class="captcha-wrapper mobile">
                    {% if type == 'mobile' %}
                      {{ captcha }}
                    {% endif %}
                  </div>
                  <div class="form-group required {{ type != 'mobile' ? 'hidden' }}" id="new-telephone-wrapper">
                    <div class="col-sm-12">
                      {{ include(helper.template('_partial/telephone')) }}
                    </div>
                  </div>
                </fieldset>
                <fieldset>
                  <div class="form-group required">
                    <div class="col-sm-12">
                      <input type="password" name="password" value="" placeholder="{{ entry_password }}"
                             id="input-password" class="form-control"/>
                    </div>
                  </div>
                  <div class="form-group required">
                    <div class="col-sm-12">
                      <input type="password" name="confirm" value="{{ confirm }}" placeholder="{{ entry_confirm }}"
                             id="input-confirm" class="form-control"/>
                    </div>
                  </div>
                </fieldset>
                <div class="captcha-wrapper email">
                  {% if type != 'mobile' %}
                    {{ captcha }}
                  {% endif %}
                </div>
                {% if redirect %}
                  <input type="hidden" name="redirect" value="{{ redirect }}"/>
                {% endif %}
                <input type="button" value="{{ button_continue }}" class="btn btn-primary btn-lg btn-block" id="bind-reg"/>
                {{ include(helper.template('_partial/omni_auth_section')) }}
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- </div> -->
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script type="text/javascript">
  $.ajaxSetup({
    beforeSend: function() { show_load(); },
    complete: function() { hide_load(); },
  });
  $('#bind-login').on('click', function () {
    var form = $('#bind-old form');
    $.ajax({
      url: form.attr('action'),
      type: "POST",
      data: form.serialize(),
      dataType: 'json',
      success: function (data) {
        if (data.error) {
          layer.msg(data.error.warning);
        }
        if (data.redirect) {
          window.location.href = data.redirect;
        }
      }
    })
  });

  $('#bind-reg').on('click', function () {
    $('.text-danger, .alert').remove();
    $('input').removeClass('has-error');
    var form = $('#bind-new form');
    $.ajax({
      url: form.attr('action'),
      type: "POST",
      data: form.serialize(),
      dataType: 'json',
      success: function (data) {
        if (data.error) {
          if (data.error.warning) {
            layer.msg(data.error.warning);
          }

          $.each(data.error, function(key, el) {
            $('#bind-new input[name^="' + key + '"]').addClass('has-error');

            if (key != 'captcha') {
              $('#bind-new input[name^="' + key + '"]').parent().after('<div class="alert alert-danger alert-dismissible">' + el + '</div>');
            }

            if (key == 'captcha')  {
              $('#bind-new input[name^="' + key + '"]').parents('.form-group').append('<div class="col-sm-12"><div class="alert row alert-danger alert-dismissible">' + el + '</div></div>');
            }
          });
        }
        if (data.redirect) {
          window.location.href = data.redirect;
        }
      }
    })
  });
</script>

<script type="text/javascript"><!--
  $('#tab-email').on('click', function () {
    $('#bind-new .captcha-wrapper.email').append($('.captcha-wrapper.mobile').html());
    $('#bind-new .captcha-wrapper.mobile').html('');
    $('#bind-new input[name=\'email\']').parents('.form-group').removeClass('hidden');
    $('#bind-new input[name=\'telephone\']').parents('.form-group').addClass('hidden');
    $('#bind-new input[name=\'smscode\']').parents('.form-group').addClass('hidden');
    $('#bind-new input[name=\'telephone\']').val('');
    $('#bind-new input[name=\'type\']').val('email');
  });
  $('#tab-mobile').on('click', function () {
    $('#bind-new .captcha-wrapper.mobile').append($('.captcha-wrapper.email').html());
    $('#bind-new .captcha-wrapper.email').html('');
    $('#bind-new input[name=\'telephone\']').parents('.form-group').removeClass('hidden');
    $('#bind-new input[name=\'smscode\']').parents('.form-group').removeClass('hidden');
    $('#bind-new input[name=\'email\']').parents('.form-group').addClass('hidden');
    $('#bind-new input[name=\'email\']').val('');
    $('#bind-new input[name=\'type\']').val('mobile');
  });
  //--></script>
{% if helper.is_ft() %}
  <script type="text/javascript"><!--
    $('#tab-email-li').on('click', function () {
      $('#input-type').val('email');
    });
    $('#tab-mobile-li').on('click', function () {
      $('#input-type').val('mobile');
    });
    //--></script>
{% endif %}
{{ footer }}