{% if not collection.is_leaf %}
<!-- if collection has sub_collection make for loop for it -->
{% for sub_collection in collection.children if not sub_collection.is_deleted%}
<p class="my-3" id="collection-{{sub_collection.label}}">
  ##{{sub_collection.label}}
</p>
{% if not sub_collection.active_sections and not sub_collection.children %}
<p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
{% endif %}
<!-- prettier-ignore -->
{% if sub_collection.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.id)}}">
                <p id="section-{{section.label}}" class="truncate 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 truncate md:max-w-xl">
        <div class="dark:text-white h-30 ql-editor-readonly !px-0">
          <p>{{display_tags(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 %}
      <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">
            <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 truncate md:max-w-xl">
                <div class="dark:text-white h-30 ql-editor-readonly !px-0">
                  <p>{{ display_tags(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>
    </div>
    {% endif %} {% endif %}
  </div>
</div>
<!-- prettier-ignore -->
{% endfor %} 
{% endif %}
{% endfor %} 
{% else %}
<!-- prettier-ignore -->
{% for section in collection.active_sections %}
<!-- prettier-ignore -->
<a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
    <!-- prettier-ignore -->
    <p id="section-{{section.label}}" class="truncate 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 truncate md:max-w-xl mb-3">
  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
    <p>{{ display_tags(section.approved_interpretation.text)|safe }}</p>
  </div>
</div>
<!-- prettier-ignore -->
<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 truncate md:max-w-xl">
          <div class="dark:text-white h-30 ql-editor-readonly !px-0">
            <p>{{ display_tags(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 %}