{% extends "base.html" %}

{% block media %}
  <style>
    main {
      overflow: hidden;
    }
    .form-area {
      float: left;
      width: 47%;
      /* height: 604px; */
      /* background-color: #acabab;  */
      /* padding: 20px; */
    }
    .left-markdown{
      float: left;
      width: 47%;
      height: 50%;
      /* flex: 1; */
      /* background-color: #acabab;  */
      padding: 20px;
    }
    .wmd-preview{
      float: right;
      margin-top: 0;
    }
    .width-controller{
      width: 51%;
      /* flex: 1; */
    }
    .right-markdown{
      /* float: right; */
      /* width: 51%; */
      height: 427px;
      /* flex: 1; */
      /* background-color: #6b6b6b; */
      overflow-y: scroll;
      /* #f0f0f0;  */
      /* padding: 20px; */
    }
  </style>
{% endblock %}

{% block body %}
  <script>
    $(document).ready(function(){
      $("#wmd-input-id_body").on("keyup", function() {
        const csrfToken = "{{ csrf_token }}";
        $.ajax({
          url: "{{url('blog_preview')}}",
          type: 'POST',
          headers: {
            'X-CSRFToken': csrfToken,  // Include the CSRF token in the headers
          },
          data: {
            preview: $(this).val()
          },
          success: function(data) {
            $('#display').html(data)
            // data sẽ là html nó render, thế vào phần bên phải
          },
          error: function(error) {
            alert(error);
            console.log(error.message)
          }
        })
      });
    });
  </script>
  <!-- <div class="left-markdown">
        <form id="post-form" method="POST" >
        {% csrf_token %}
        <textarea  id="inputField" cols="105" rows="40" value=" "></textarea>
        </form>
    </div> -->
  <div id="new-comment" class="form-area" style="">

    <form class="comment-submit-form" action="" method="post">
      <input type="hidden" name="csrfmiddlewaretoken" value="Ngk7TfY2iIW4e9cPitl05k1c7xNUsVk9kCTkrAFveVmmcIhjRKv4GLtItKANAvae"> <input type="hidden" name="parent" id="id_parent">
      <div class="comment-post-wrapper">
        <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
          <div class="wmd-panel">
            <div id="wmd-button-bar-id_body"><ul id="wmd-button-row-id_body" class="wmd-button-row">
              <li class="wmd-button wmd-bold-button wmd-button-active" id="wmd-bold-button-id_body" title="Strong <strong> Ctrl+B"></li>
              <li class="wmd-button wmd-italic-button wmd-button-active" id="wmd-italic-button-id_body" title="Emphasis <em> Ctrl+I"></li>
              <li class="wmd-spacer wmd-spacer1" id="wmd-spacer1-id_body"></li>
              <li class="wmd-button wmd-latex-button wmd-button-active" id="wmd-latex-button-id_body" title="Latex embed - Ctrl+M"></li>
              <li class="wmd-button wmd-latex-button-display wmd-button-active" id="wmd-latex-button-display-id_body" title="Latex display embed - Ctrl+Space"></li>
              <li class="wmd-spacer wmd-spacer2" id="wmd-spacer2-id_body"></li>
              <li class="wmd-button wmd-link-button wmd-button-active" id="wmd-link-button-id_body" title="Hyperlink <a> Ctrl+L"></li>
              <li class="wmd-button wmd-user-reference-button wmd-button-active" id="wmd-user-reference-button-id_body" title="User reference"></li>
              <li class="wmd-button wmd-quote-button wmd-button-active" id="wmd-quote-button-id_body" title="Blockquote <blockquote> Ctrl+Q"></li>
              <li class="wmd-button wmd-code-button wmd-button-active" id="wmd-code-button-id_body" title="Code Sample <pre><code> Ctrl+K"></li>
              <li class="wmd-button wmd-image-button wmd-button-active" id="wmd-image-button-id_body" title="Image <img> Ctrl+G"></li>
              <li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
              <li class="wmd-button wmd-olist-button wmd-button-active" id="wmd-olist-button-id_body" title="Numbered List <ol> Ctrl+O"></li>
              <li class="wmd-button wmd-ulist-button wmd-button-active" id="wmd-ulist-button-id_body" title="Bulleted List <ul> Ctrl+U"></li>
              <li class="wmd-button wmd-heading-button wmd-button-active" id="wmd-heading-button-id_body" title="Heading <h2>/<h2> Ctrl+H"></li>
              <li class="wmd-button wmd-hr-button wmd-button-active" id="wmd-hr-button-id_body" title="Horizontal Rule <hr> Ctrl+R"></li>
              <li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
              <li class="wmd-button wmd-admonition-button wmd-button-active" id="wmd-admonition-button-id_body" title="Admonition"></li>
              <li class="wmd-button wmd-spoiler-button wmd-button-active" id="wmd-spoiler-button-id_body" title="Spoiler"></li>
              <li class="wmd-spacer wmd-spacer4" id="wmd-spacer4-id_body"></li>
              <li class="wmd-button wmd-undo-button wmd-button-active" id="wmd-undo-button-id_body" title="Undo - Ctrl+Z"></li>
              <li class="wmd-button wmd-redo-button wmd-button-inactive" id="wmd-redo-button-id_body" title="Redo - Ctrl+Shift+Z"></li></ul></div>
            <textarea id="wmd-input-id_body" class=" wmd-input" name="body" required=""></textarea>
          </div>
          <div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
            <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> Update Preview</div>
            <div class="dmmd-preview-content content-description"></div>
          </div>
          <div class="pagedown-image-upload">
            <h2>Insert Image</h2>
            <div class="form-row">
              <div>
                <label class="label">From the web</label>
                <input class="url-input" type="text" placeholder="http://">
              </div>
            </div>
            <div class="form-row">
              <div>
                <label class="label">From your computer</label>
                <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
              </div>
            </div>
            <div class="submit-row">
              <div class="submit-loading"></div>
              <input class="submit-input show" type="submit" value="Save" name="_addanother">
              <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">Cancel</a></p>
            </div>
          </div>
        </div></div>
      </div>
      <hr>
      <input style="float:right" type="submit" value="Post!" class="button">
    </form>
  </div>


  <!-- <div id="comments" class="comment-area"></div> -->

  <div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>

  </div>

  <!-- <script>
        var right=document.getElementById("new-comment").style.height;
        var left=document.getElementById("id_body-preview").style.height;
        
        document.getElementById('id_body-preview').style.height=right;
        
    </script> -->
{% endblock %}