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

<!-- prettier-ignore -->
<div
  class="pl-6 pb-1 {% if not has_permission(collection, Access.U) %}filter{% endif %}"
  {% if not version and 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="w-full 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="w-full truncate 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 dark:bg-gray-700">
          {% if not version %}
            {% include 'book/components/sub_collection_context_menu.html' %}
          {% endif %}
        </div>
        <!-- prettier-ignore -->
        <div id="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="hidden pl-6 pb-1" 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,version)|safe}}
          {% elif sub_collection.active_sections  %}
            <div {% if not version and 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 not version and 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 %}
      {% include 'book/components/section_tab_content.html' %}
    {% endfor %}
  </div>
  {% endif %}
</div>