{% if req.form.errors %}
<div class="alert alert-danger">
  <ul>
  {% for error in req.form.errors %}
    <li>{{ error }}</li>
  {% endfor %}

  </ul>
</div>
{% endif %}
<div id="form-box" class="row">
  <div class="col-md-6">
    <form action="{{ path }}/edit" method="post" class="">
      <textarea name="pageForm[body]" class="form-control form-body-height" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not revision.body %}# {{ path|path2name }}{% else %}{{ revision.body }}{% endif %}</textarea>

      <input type="hidden" name="pageForm[format]" value="markdown" id="form-format">
      <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(revision._id.toString()) }}">
      <div class="form-submit-group form-group form-inline">
        <select name="pageForm[grant]" class="form-control">
          {% for grantId, grantLabel in consts.pageGrants %}
          <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ grantLabel }}</option>
          {% endfor %}
        </select>

        <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
      </div>
    </form>
  </div>
  <div class="col-md-6">
    <div id="preview-body" class="wiki preview-body">
    </div>
  </div>
  <script type="text/javascript">
  $(function() {
    // preview watch
    var prevContent = "";
    var watchTimer = setInterval(function() {
      var content = $('#form-body').val();
      if (prevContent != content) {
        var renderer = new Crowi.renderer($('#form-body').val(), $('#preview-body'));
        renderer.render();

        prevContent = content;
      }
    }, 500);

    // tabs handle
    $('textarea#form-body').on('keydown', function(event){
      var self  = $(this)
          start = this.selectionStart,
          end   = this.selectionEnd
          val   = self.val();

      if (event.keyCode === 9) {
        // tab
        event.preventDefault();
        self.val(
          val.substring(0, start)
          + '    '
          + val.substring(end, val.length)
        );
        this.selectionStart = start + 4;
        this.selectionEnd   = start + 4;
      } else if (event.keyCode === 27) {
        // escape
        self.blur();
      }
    });
  });

  </script>
</div>