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

<!-- prettier-ignore -->
<div
  class="ml-6 {% if not has_permission(collection, Access.U) %}filter{% endif %}"
  {% if has_permission(collection, Access.U) %}data-dnd="dnd-sub-collection"{% endif %}
  {% if collection %}
  data-entity-type="collection"
  data-entity-id="{{collection.id}}"
  {% endif %}
  {% if sub_collection %}
  data-entity-type="sub_collection"
  data-entity-id="{{sub_collection.id}}"
  {% endif %}
  data-book-id="{{book.id}}"
  >
  {% if collection.active_children %}
  <!-- if collection has sub_collection make for loop for it -->
  <!-- Nested accordion -->
  <!-- prettier-ignore -->
  {% for sub_collection in collection.active_children if not sub_collection.is_deleted%}
  <div
    id="accordion-nested-collapse"
    data-accordion="open"
    data-entity-id="{{sub_collection.id}}"
    data-entity-type="sub_collection"
    data-book-id="{{book.id}}">
    <!-- 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 -->
      <button href="#collection-{{sub_collection.label}}" 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>
      </button>
    </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">
     {% include 'book/components/sub_collection_context_menu.html' %}
    </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.active_children %}
        {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book)|safe}}
    {% elif sub_collection.active_sections  %}
        <div {% if has_permission(collection, Access.U) %}id="draggableSectionItems"{% endif %} data-entity-id="{{sub_collection.id}}" data-entity-type="sub_collection" data-book-id="{{book.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}">
        <!-- 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>
    {% else %}
    <div id="empty-dnd-entity" data-entity-type="sub_collection" data-entity-id="{{sub_collection.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}"></div>
    {% endif %}
    </div>
  </div>
  {% endfor %}
  <!-- End: Nested accordion -->
  {% else %}
  <!-- if collection doesn't have sub_collection -->
  <div
    class="ml-6 {% if not has_permission(collection, Access.U) %}filter{% endif %}"
    {% if has_permission(collection, Access.U) %}id="draggableSectionItems"{% endif %}
    data-entity-id="{{collection.id}}"
    data-entity-type="collection">
    <!-- here comes for loop for all section in this collection-->
    {% for section in collection.active_sections %}
    <!-- prettier-ignore -->
    {% include 'book/components/section_tab_content.html' %}
    {% endfor %}
  </div>
  {% endif %}
</div>