open-law/app/templates/book/components/sub_collection_preview_content.html

{% if not collection.active_sections %}
  <!-- if collection has sub_collection make for loop for it -->
  <!-- prettier-ignore -->
  {% for sub_collection in collection.active_children if not sub_collection.is_deleted%}
    <p class="my-3" id="collection-{{sub_collection.label}}">
      ##{{sub_collection.label}}
    </p>
    <!-- prettier-ignore -->
    {% if not sub_collection.active_sections and not sub_collection.active_children%}
      <p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
    {% endif %}
    <!-- prettier-ignore -->
    {% if sub_collection.active_children %}
      {{recursive_render("book/components/sub_collection_preview_content.html",sub_collection,book)|safe}}
    {% else %}
    <!-- prettier-ignore -->
      {% for section in sub_collection.active_sections %}
        <div class="bg-inherit max-w-full text-gray-900 dark:text-white mt-1">
          <div class="flex flex-col pb-3 w-full">
            <div class="flex w-full mb-1 dark:text-gray-100 flex-col">
              <!-- prettier-ignore -->
              <a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.copy_of or section.id)}}">
              <p id="section-{{section.label}}" class="my-3">{{ section.label }}</p></a>
              {% if not section.active_interpretations %}
                <p class="ml-3 my-3 italic text-sm">This section is empty</p>
              {% else %}
                <div class="ql-snow">
                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
                    <p> {{display_inline_elements(section.approved_interpretation.text)|safe }} </p>
                  </div>
                </div>
                <div
                  class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
                  <span class="text-sm">
                    Interpretation by
                    <a
                      href="{{url_for('user.profile', user_id=section.approved_interpretation.user.id)}}"
                      class="text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}"
                    >
                      {{section.approved_interpretation.user.username}}
                    </a >
                    on {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}
                  </span>
                  <button
                    data-tooltip-target="tooltip-click"
                    data-tooltip-trigger="click"
                    id="copyLinkButton"
                    type="button"
                    class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
                    data-link="{{ build_qa_url(section.approved_interpretation) }}"
                  >
                    <!-- prettier-ignore -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
                  </button>
                  <div
                    id="tooltip-click"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
                  >
                    Link copied!
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>
                <!--Comments-->
                {% if not section.approved_comments %}
                  <p>No comments for current section</p>
                {% else %}
                  <div
                    id="accordion-comments-collapse-{{loop.index}}"
                    data-accordion="collapse">
                    <h2
                      id="accordion-comments-collapse-{{loop.index}}-heading-{{loop.index}}">
                      <button
                        type="button"
                        class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left"
                        data-accordion-target="#accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}"
                        aria-expanded="false"
                        aria-controls="accordion-collapse-body-1"
                      >
                        <!-- prettier-ignore -->
                        <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
                        <span><i>Comments:</i></span>
                      </button>
                    </h2>
                    <div
                      id="accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}"
                      class="hidden"
                      aria-labelledby="accordion-collapse-heading-{{loop.index}}"
                    >
                      {% for comment in section.approved_comments %}
                        <div class="p-5 ml-6">
                          <div class="dark:text-white h-30">
                            <div class="ql-snow mb-2">
                              <div class="dark:text-white h-30 ql-editor-readonly !px-0">
                                <p>{{ display_inline_elements(comment.text)|safe }}</p>
                              </div>
                            </div>
                          </div>
                          <div
                            class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3"
                          >
                            <span class="text-sm">
                              Created by
                              <a href="{{ url_for('user.profile', user_id=comment.user.id) }}" class="text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}" >
                                {{comment.user.username}}
                              </a>
                              on {{comment.created_at.strftime('%B %d, %Y')}}
                            </span>
                            <button
                              data-tooltip-target="tooltip-click"
                              data-tooltip-trigger="click"
                              id="copyLinkButton"
                              type="button"
                              class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
                              data-link="{{ build_qa_url(section.approved_interpretation) }}">
                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
                            </button>
                            <div
                              id="tooltip-click"
                              role="tooltip"
                              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
                            >
                              Link copied!
                              <div class="tooltip-arrow" data-popper-arrow></div>
                            </div>
                          </div>
                        </div>
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              {% endif %}
            </div>
          </div>
        </div>
        <!-- prettier-ignore -->
      {% endfor %}
    {% endif %}
  {% endfor %}
{% else %}
  {% for section in collection.active_sections %}
    <a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.copy_of or section.id)}}">
      <p id="section-{{section.label}}" class="my-3">
        {{ section.label }}
      </p>
    </a>
    {% if not section.active_interpretations %}
      <p class="ml-3 my-3 italic text-sm">This section is empty</p>
    {% else %}
      <div class="ql-snow mb-3">
        <div class="dark:text-white h-30 ql-editor-readonly !px-0">
          <p>
            {{ display_inline_elements(section.approved_interpretation.text)|safe }}
          </p>
        </div>
      </div>
      <div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
        <span class="text-sm" >
          Interpretation by
          <a
            href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}"
            class="text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}"
          >
            {{section.approved_interpretation.user.username}}
          </a>
          on {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}
        </span>
        <button
          data-tooltip-target="tooltip-click"
          data-tooltip-trigger="click"
          id="copyLinkButton"
          type="button"
          class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
          data-link="{{ build_qa_url(section.approved_interpretation) }}"
        >
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
        </button>
        <div
          id="tooltip-click"
          role="tooltip"
          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
        >
          Link copied!
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
      </div>

      <!--Comments-->
      {% if not section.approved_comments %}
        <div class="mb-3">
          <p>No comments for current section</p>
        </div>
      {% else %}
        <div
          id="accordion-comments-collapse-nest{{loop.index}}"
          data-accordion="collapse"
          class="mb-3"
        >
          <h2 id="accordion-comments-collapse-nest{{loop.index}}-heading-{{loop.index}}">
            <button
              type="button"
              class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left"
              data-accordion-target="#accordion-comments-collapse-nest{{loop.index}}-body-{{loop.index}}"
              aria-expanded="false"
              aria-controls="accordion-collapse-body-1"
            >
              <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
              <span><i>Comments:</i> </span>
            </button>
          </h2>
          <div
            id="accordion-comments-collapse-nest{{loop.index}}-body-{{loop.index}}"
            class="hidden"
            aria-labelledby="accordion-collapse-heading-1"
          >
            {% for comment in section.approved_comments %}
              <div class="p-5 ml-6">
                <div class="dark:text-white h-30">
                  <div class="ql-snow mb-2">
                    <div class="dark:text-white h-30 ql-editor-readonly !px-0">
                      <p>{{ display_inline_elements(comment.text)|safe }}</p>
                    </div>
                  </div>
                </div>
                <div
                  class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
                  <span class="text-sm" >
                    Created by
                    <a
                      href="{{url_for('user.profile',user_id=comment.user.id)}}"
                      class="text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}"
                      >{{comment.user.username}}
                    </a >
                    on {{comment.created_at.strftime('%B %d, %Y')}}
                  </span >
                  <button
                    data-tooltip-target="tooltip-click"
                    data-tooltip-trigger="click"
                    id="copyLinkButton"
                    type="button"
                    class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
                    data-link="{{ build_qa_url(section.approved_interpretation) }}"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
                  </button>
                  <div
                    id="tooltip-click"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
                  >
                    Link copied!
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}