{% extends "layout.html.twig" %}

{% block main %}
  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% endif %}

  <form class="form-horizontal" id="init-form" method="post">

    <div class="form-group">
      <label for="sitename-field" class="col-sm-4 control-label">网站名称</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="sitename-field" name="sitename" value="{{ request.sitename|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <label for="email-field" class="col-sm-4 control-label">管理员Email地址</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="email-field" name="email" value="{{ request.email|default('') }}">
        <p class="help-block">Email地址作为账号，用于登录网站</p>
      </div>
    </div>

    <div class="form-group">
      <label for="nickname-field" class="col-sm-4 control-label">管理员昵称</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="nickname-field" name="nickname" value="{{ request.nickname|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <label for="password-field" class="col-sm-4 control-label">管理员密码</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="password-field" name="password" value="{{ request.password|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <label for="truename-field" class="col-sm-4 control-label">网站负责人姓名</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="truename-field" name="truename" value="{{ request.truename|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <label for="mobile-field" class="col-sm-4 control-label">手机号码 </label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="mobile-field" name="mobile" value="{{ request.mobile|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <label for="qq-field" class="col-sm-4 control-label">QQ号码</label>
      <div class="controls col-sm-5">
        <input type="text" class="form-control" id="qq-field" name="qq" value="{{ request.qq|default('') }}">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-4  control-label">
        <label>启用年级</label>
      </div>
     <div class="controls col-sm-8 checkbox">
      <label>
        <input type="checkbox" name="primarySchool" value="{{ request.primarySchool|default(1)}}">小学
        {# <span class="mll">6年制<span class="text-muted">（1年级到6年级）</span></span> #}
      </label>
      {#<label style="margin-left:5px;">
        <input type="radio" name="primaryYear" value="default" checked>6年制<span class="text-muted">（1年级到6年级）</span>
      </label>
       <label>
        <input type="radio" name="primaryYear" value="5">5年制<span class="text-muted">（1年级到5年级）</span>
      </label>  #} 
     </div>
    </div>
   
   <div class="form-group">
      <div class="controls col-sm-5 checkbox col-sm-offset-4">
        <label>
          <input type="checkbox" value="{{ request.middleSchool|default(1)}}" name="middleSchool">初中
          {# <span class="mll">3年制<span class="text-muted">（初1到初3）</span></span> #}
        </label> 
      </div>
    </div>

   <div class="form-group">
      <div class="controls col-sm-5 checkbox col-sm-offset-4">
        <label>
          <input type="checkbox" value="{{ request.highSchool|default(1)}}" name="highSchool">高中
          {# <span class="mll">3年制<span class="text-muted">（高1到高3）</span></span> #}
        </label> 
      </div>
    </div>

    <div class="actions">
      <button type="submit" id="init-btn" class="btn btn-primary btn-lg">初始化系统</button>
    </div>

  </form>
{% endblock %}

{% block bottom_scripts %}
<script>
  seajs.use(['jquery', 'bootstrap.validator', 'common/validator-rules','bootstrap'], function($, Validator, Rules){
    window.$ = $;
    Rules.inject(Validator);
    var $form = $("#init-form");

    var validator = new Validator({
        element: $form,
        onFormValidated: function(error, results, $form){
            if (error) {
                return false;
            }
            $('#init-btn').button('submiting').addClass('disabled');
        }
    });

    validator.addItem({
        element: '#sitename-field',
        required: true
    });

    validator.addItem({
        element: '#email-field',
        required: true,
        rule: 'email'
    });

    validator.addItem({
        element: '#nickname-field',
        required: true,
        rule: 'chinese_alphanumeric byte_minlength{min:4} byte_maxlength{max:14}'
    });

    validator.addItem({
        element: '#password-field',
        required: true,
        rule: 'minlength{min:5} maxlength{max:20}'
    });

    validator.addItem({
        element: '#truename-field',
        required: true,
        rule:'chinese minlength{min:2} maxlength{max:12}'
    });

    validator.addItem({
        element: '#mobile-field',
        required: true,
        rule: 'mobile'
    });

    validator.addItem({
        element: '#qq-field',
        required: true,
        rule: 'qq'
    });


  });
</script>
{% endblock %}