extends layout
block content
  style.
    #editor {
      position: relative;
      width: 100%;
      height: 400px;
    }
    .previewPOST img{
      max-width: 100%
    }
  form.formx(method="POST" action="/admin/post")
    input(type="hidden" name="_id" value=post._id)
    .dashhead
      .dashhead-titles
        h6.dashhead-subtitle Blog
        h2.dashhead-title Edit Blog Post
      .btn-toolbar.dashhead-toolbar
        button.btn.btn-primary-outline Save Post
        //
          <div class="btn-toolbar-item input-with-icon">
          <input type="text" value="01/01/15 - 01/08/15" class="form-control" data-provide="datepicker">
          <span class="icon icon-calendar"></span>
          </div>
    hr.m-t
    section.content-header
      #field_title.field.row
        .col-md-12
          .form-group
            label Title
            input.form-control(type="text" name="title" placeholder="Title" value=post.title)
          // /.form-group
        // /.col
      // /.row
      #field_content.field.row
        .col-md-12
          .form-group
            label Content
            section.editor
              .outer
                .editorwrap
                  input.contentPOST(type="hidden" name="content" value=post.content)
                  #editor
                  hr
                  div.previewPOST
          // /.form-group
      // /.row
      #field_status.field.row
        .col-md-12
          .form-group
            label Status
            select.form-control(name="status")
              for status in ['pending','launched','queued']
                option(selected=post.status == status)=status
          // /.form-group
        // /.col
      // /.row

block scripts
  script(src='/js/ace/ace.js' type="text/javascript" charset="utf-8")
  script(src='/js/marked.js' type="text/javascript" charset="utf-8")

  script.
    marked.setOptions({
      gfm: true
    })

    $(document).ready(function () {
      var editor = ace.edit("editor"),
              contentVAL = $('.contentPOST').attr('value') || '# Write some text'

      editor.setTheme("ace/theme/github")
      editor.setFontSize(14)

      editor.setValue(contentVAL, -1)
      $('.previewPOST').html(marked(contentVAL))

      editor.getSession().on('change', function (e) {
        $('.previewPOST').html(marked(editor.getValue()))
      })

      $('.formx').on("submit", function () {
        var content = editor.getValue()
        $('.contentPOST').val(content)
      })
    });

    function sanitize(str) {
      return str.replace(/&<="/g, function (m) {
        if (m === "&") return "&amp;"
        if (m === "<") return "&lt;"
        return "&quot;"
      })
    }