open-law/app/templates/book/qa_view.html

<!-- prettier-ignore -->
{% extends 'base.html' %}

{% include 'book/delete_interpretation_modal.html' %}
{% include 'book/edit_interpretation_modal.html' %}

<!-- show delete section btn on rightside bar -->
{% set show_edit_interpretation = True %}
<!-- prettier-ignore -->
{% set show_delete_interpretation = True %}

<!-- prettier-ignore -->
{% block right_sidebar %}
  {% include 'book/right_sidebar.html' %}
{% endblock %}

{% block content %}
{% include 'book/breadcrumbs_navigation.html'%}
<div class="overflow-x-auto shadow-md mt-5 md:mr-64 h-auto">
  <div class="ql-snow mt-20">
    <h1 class="text-l font-extrabold dark:text-white ml-4 truncate">
      {{ interpretation.label }}
    </h1>
    <div class="quill-editor dark:text-white">{{interpretation.text|safe}}</div>
  </div>
  <div class="p-1">
    <!-- prettier-ignore -->
    <form {% if sub_collection %}
        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
      {% else %}
        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
      {% endif %}
      method="post" class="flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
      {{ form_hidden_tag() }}
      <div class="relative z-0 w-full mb-6 group">
        <!-- prettier-ignore -->
        <input autocomplete="off" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
        <!-- prettier-ignore -->
        <label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
      </div>
      <!-- prettier-ignore -->
      <button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
    </form>
  </div>
  {% for comment in interpretation.comments %}
  <p>{{comment.text}}</p>
  {% endfor %}
</div>

<!-- prettier-ignore -->
{% endblock %}