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

<div class="ml-6">
  {% if not collection.is_leaf %}
  <!-- if collection has sub_collection make for loop for it -->
  <!-- Nested accordion -->
  {% for sub_collection in collection.children if not
  sub_collection.is_deleted%}
  <div id="accordion-nested-collapse" data-accordion="open">
    <!-- prettier-ignore -->
    <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
      <button
        class="bg-inherit"
        type="button"
        data-accordion-target="#accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}"
        aria-expanded="true"
        aria-controls="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}">
        <!-- prettier-ignore -->
        <svg data-accordion-icon class="w-6 h-6 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>
      </button>
      <!-- prettier-ignore -->
      <a id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="text-black dark:text-white">
        <form id="rename-sub-collection-label-form-{{sub_collection.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
          {{ form_hidden_tag() }}
          <!-- prettier-ignore -->
          <input class="bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
          <button name="submit" type="submit"></button>
        </form>
      </a>
    </div>
    <!-- prettier-ignore -->
    <svg id="dropdownSubCollectionContextButton{{sub_collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
    <!-- prettier-ignore -->
    <div data="sub-collection-context-menu-{{sub_collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
      {% if current_user.is_authenticated %}
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
        {% if sub_collection.is_leaf and not sub_collection.children %}
        <li>
          <button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Section </button>
        </li>
        {% else %}
        <li>
          <button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Subcollection </button>
        </li>
        {% endif %}
      </ul>
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
        <li>
          <button type="button" id="rename-sub-collection-button-{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Rename Sub Collection </button>
        </li>
        <li>
          <button type="button" id="callDeleteSubCollectionModal" data-modal-target="delete-sub-collection-modal" data-modal-toggle="delete-sub-collection-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Delete Sub Collection </button>
        </li>
      </ul>
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
        <li>
          <button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Export Sub Collection </button>
        </li>
      </ul>
      {% else %}
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
        <li>
          <button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Connect your wallet to do this </button>
        </li>
      </ul>
      {% endif %}
    </div>
    <!-- prettier-ignore -->
    <div id="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{sub_collection.id}}">
    {% if sub_collection.children %}
        {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book)|safe}}
    {% else %}
        <div class="ml-6">
        <!-- here comes for loop for all section in this sub_collection-->
            {% for section in sub_collection.active_sections %}
                {% include 'book/components/section_tab_content.html' %}
            {% endfor %}
        </div>
    {% endif %}
    </div>
  </div>
  {% endfor %}
  <!-- End: Nested accordion -->
  {% else %}
  <!-- if collection doesn't have sub_collection -->
  <div class="ml-6">
    <!-- here comes for loop for all section in this collection-->
    {% for section in collection.active_sections %} {% include
    'book/components/section_tab_content.html' %} {% endfor %}
  </div>
  {% endif %}
</div>