{% load bootstrap %}

{% load static %}

{% block footer_script %}
  <script src="{% static 'scipost/fetch-markup-preview.js' %}"></script>
  <script src="{% static 'scipost/comment-preview.js' %}"></script>
{% endblock %}

<form enctype="multipart/form-data" {% if url %}action="{{ url }}" {% endif %}method="post">
  {% csrf_token %}
  <div class="row">
    <div class="col-md-9">
      {{ form.comment_text|bootstrap:'12,12' }}
      <p><strong>
	You can use plain text, Markdown or reStructuredText; see our
	<a href="{% url 'markup:help' %}" target="_blank">markup help</a> pages.
      </strong></p>
    </div>
    <div class="col-md-3 radio-list">
      <label>Specify categorization(s):</label>
      {{ form.is_cor|bootstrap }}
      {{ form.is_rem|bootstrap }}
      {{ form.is_que|bootstrap }}
      {{ form.is_ans|bootstrap }}
      {{ form.is_obj|bootstrap }}
      {{ form.is_rep|bootstrap }}
      {{ form.is_val|bootstrap }}
      {{ form.is_lit|bootstrap }}
      {{ form.is_sug|bootstrap }}
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      {{ form.remarks_for_editors|bootstrap:'12,12' }}
    </div>
    <div class="col-md-3">
      {{ form.file_attachment|bootstrap:'12,12' }}
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      {% if form.anonymous %}
        {{ form.anonymous|bootstrap }}
        <div class="anonymous-alert my-3" style="display: none;">
          <h3 class="anonymous-yes">Your Comment will remain anonymous.</h3>
          <h3 class="anonymous-no"><span class="text-danger">Your Comment will be <span class="text-underline">signed</span>.</span> Thank you very much!</h3>
        </div>
      {% endif %}
      <div id="submitButton">
	<input type="submit" value="Preview looks good; submit this Comment for vetting" class="btn btn-primary">
	{% if form.anonymous %}
          <p class="mt-2" id="goodCommenter"><i>By clicking on Submit, you agree with the <a target="_blank" href="{% url 'scipost:terms_and_conditions' %}">Terms and Conditions</a>.</i></p>
	{% else %}
          <p class="mt-2" id="goodCommenter"><i>By clicking on Submit, you agree with the <a target="_blank" href="{% url 'scipost:terms_and_conditions' %}">Terms and Conditions</a>, in particular that <span class="text-danger">your identity will be attached to the Comment</span>.</i></p>
	{% endif %}
      </div>
    </div>
  </div>
</form>

<button class="btn btn-warning" id="runPreviewButton">Run/refresh preview of your Comment</button>
<div class="card m-2">
  <div class="card-header">
    Preview of your comment
  </div>
  <div class="card-content">
    <div id="preview-comment_text" class="markup-preview"></div>
    <div id="preview-remarks_for_editors-div" class="m-1 pt-1">
      <strong>Remarks for editors (will not be publicly visible):</strong>
      <div id="preview-remarks_for_editors" class="markup-preview"></div>
    </div>
  </div>
</div>