open-law/app/templates/book/collection_view.html

<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block right_sidebar %}
{% endblock %}

{% block title %}{{book.label[:32]}}{% endblock %}


{% block content %}

{% if not version and current_user.is_authenticated %}
  {% include 'book/modals/add_collection_modal.html' %}
  {% include 'book/modals/delete_collection_modal.html' %}
  {% include 'book/modals/add_sub_collection_modal.html' %}
  {% include 'book/modals/delete_sub_collection_modal.html' %}
  {% include 'book/modals/add_section_modal.html' %}
  {% include 'book/modals/delete_section_modal.html' %}
{% elif current_user.is_authenticated %}
  {% include 'book/modals/fork_version_modal.html' %}
{% endif %}

<div class="flex">
  <!-- prettier-ignore -->
  <div class="w-2/6 border-gray-200 dark:border-gray-700 h-box">
    <div id="accordion-collapse" data-accordion="open" class="p-3 w-2/6 border-r fixed inset-0 mt-135 overflow-y-scroll">
      <div class="flex justify-between">
        <div class="flex dark:text-white">
        <svg id="tabGoBackButton" 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 cursor-pointer"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>
        <h1 class="text-l font-extrabold dark:text-white ml-4 mb-3"> Table of contents </h1>
        </div>
        {% if not version and has_permission(book, Access.U) %}
          <div class="flex text-black dark:text-white">
            <!-- prettier-ignore -->
            <div>
              {% if not book.active_version.children_collections and current_user.is_authenticated %}
                <button type="button" data-modal-target="add-collection-modal" data-modal-toggle="add-collection-modal" ><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="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button>
              {% endif %}
              <a href="{{ url_for('book.settings', book_id=book.id) }}" type="button" class="ml-2" >
                <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.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
              </a>
            </div>
          </div>
        {% endif %}
      </div>
      <!-- prettier-ignore -->

      {% if version %}
        {% set children_collections = version.children_collections %}
      {% else %}
        {% set children_collections = book.active_version.children_collections %}
      {% endif %}

      {% for collection in children_collections if not collection.is_root and not collection.is_deleted %}
        <div
          {% if not collection.active_children and not collection.active_sections %}
            id="empty-dnd-entity"
          {% elif collection.active_children %}
            {% if not version and has_permission(collection, Access.U) %}
              data-dnd="dnd-sub-collection"
            {% endif %}
          {% elif collection.active_sections %}
            {% if not version and has_permission(collection, Access.U) %}
              id="draggableSectionItems"
            {% endif %}
          {% endif %}
          data-entity-type="collection"
          data-entity-id="{{collection.id}}"
          class="filter {% if not version and not has_permission(collection, Access.U) %}denied{% endif %}"
        >
          <div
            data-entity-type="collection"
            data-entity-id="{{collection.id}}"
            class="flex items-center justify-start 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-collapse-body-{{collection.id}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{collection.id}}">
            <!-- 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>
            </button>
            <button href="#collection-{{collection.label}}" id="accordion-collapse-heading-{{collection.id}}" class="w-full text-black dark:text-white ">
              <form id="rename-collection-label-form-{{collection.id}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
                {{ form_hidden_tag() }}
                <input class="w-full truncate bg-inherit border-none" value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
                <button name="submit" type="submit"></button>
              </form>
            </button>
          </div>
          <svg id="dropdownCollectionContextButton{{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>
        </div>
        <div data="collection-context-menu-{{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/collection_context_menu.html' %}
          {% endif %}
        </div>
        <!-- prettier-ignore -->
        {% if collection.active_children %}
        <div id="accordion-collapse-body-{{collection.id}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{collection.id}}" >
          {{recursive_render("book/components/sub_collection_tab_content.html",collection,book,version)|safe}}
        </div>
        {% elif collection.active_sections %}
        <div id="accordion-collapse-body-{{collection.id}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{collection.id}}" >
          <div {% if not version and has_permission(collection, Access.U) %}id="draggableSectionItems"{% endif %} data-entity-id="{{collection.id}}" data-entity-type="collection" data-book-id="{{book.id}}" class="{% if not has_permission(collection, Access.U) %}filter{% endif %}">
            {% for section in collection.active_sections %}
              {% include 'book/components/section_tab_content.html' %}
            {% endfor %}
          </div>
        </div>
        {% else %}
        <div
          id="accordion-collapse-body-{{collection.id}}"
          class="pl-6 pb-6 {% if not version and not has_permission(collection, Access.U) %}filter{% endif %}"
          data-dnd="dnd-sub-collection"
          data-book-id="{{book.id}}"
          data-entity-type="collection"
          data-entity-id="{{collection.id}}"
          aria-labelledby="accordion-collapse-heading-{{collection.id}}" >
        </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <!-- Here start book-preview on right side-->
  <div class="p-3 px-6 w-4/6 dark:text-white">
    <p class="text-xs mb-3">
      {% if book.original_book %}
        Forked by
        <a href="{{url_for('user.profile',user_id=book.owner.id)}}" class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}" >
          {{book.owner.username}}
        </a>
        from
        <a href="{{ url_for('book.collection_view', book_id=book.original_book.id ) }}" target="_blank" class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}" >
          {{book.original_book.owner.username}}/{{book.original_book.label}}
        </a>
      {% else %}
        Created by
        <a href="{{url_for('user.profile',user_id=book.owner.id)}}" class="text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}" >
          {{book.owner.username}}
        </a>
      {% endif %}
      on {{book.created_at.strftime('%B %d, %Y')}}. Last updated on
      {{book.created_at.strftime('%B %d, %Y')}}
    </p>

    {% if version %}
    <div class="flex w-full justify-between items-center">
      <p class="flex text-s font-bold mb-3">
        <!-- 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 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /> </svg>
        Version: {{ version.semver.title() }}
      </p>
      <button type="button" data-modal-target="fork-version-modal" data-modal-toggle="fork-version-modal" class="border-2 border-black focus:outline-none font-medium rounded-lg text-sm px-3 py-2 text-center mr-2 mb-2 dark:border-white dark:text-white  dark:focus:ring-white">
        + Create a new fork
      </button>
    </div>
    {% endif %}

    <div class="flex justify-between item-center mb-5">
      <h1 class="text-20 hidden md:inline font-extrabold dark:text-white">
        {{book.label}}
      </h1>
      <div class="ml-auto flex">
        <div class="flex items-center space-x-0.5 mr-3">
          <!-- prettier-ignore -->
          <a href="{{ url_for('book.statistic_view', book_id=book.id ) }}" class="flex items-center"> <svg class="w-4 h-4 inline-flex mr-1 {% if book.current_user_has_star %}fill-yellow-300{% endif %}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /> </svg>
            {{ book.stars|length }}</a
          >
        </div>
        <div class="flex items-center space-x-0.5 mr-3">
          <!-- prettier-ignore -->
          <a href="{{ url_for('book.statistic_view', book_id=book.id,active_tab='contributors' ) }}" class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
            {{ book.contributors|length }}</a
          >
        </div>
        <div class="flex items-center space-x-0.5 mr-3">
          <!-- prettier-ignore -->
          <a href="{{ url_for('book.statistic_view', book_id=book.id,active_tab='version' ) }}" class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /> </svg>
            {{ book.actual_versions|length }}</a
          >
        </div>
        <div class="flex items-center space-x-0.5 mr-3">
          <!-- prettier-ignore -->
          <a href="{{ url_for('book.statistic_view', book_id=book.id,active_tab='forks' ) }}" class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /> </svg>
            {{ book.active_forks|length }}</a
          >
        </div>
      </div>
    </div>

    <div class="gap-1 flex flex-wrap mb-5">
      {% for tag in book.tags %}
      <a
        href="{{url_for('search.tag_search_interpretations',tag_name=tag.name)}}"
      >
        <div
          class="text-xs cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2"
        >
          {{tag.name}}
        </div>
      </a >
      {% endfor %}
    </div>

    <p class="text-sm mb-3">
      {% if book.about==None %}About text{% else %}{{book.about}}{% endif %}
    </p>
    <!-- prettier-ignore -->
    {% if version %}
    {% set children_collections = version.children_collections%}
    {% else %}
    {% set children_collections = book.active_version.children_collections %}
    {% endif %} {% for collection in children_collections if not collection.is_root and not collection.is_deleted %}
    <p class="my-3 break-words border-b-2 pb-1 font-bold text-2xl text-justify" id="collection-{{collection.label}}">
      #{{collection.label}}
    </p>
    {% if not collection.active_sections and not collection.active_children %}
    <p class="ml-3 my-3 italic text-sm">Collection is empty</p>
    {% endif %}
    {{recursive_render("book/components/sub_collection_preview_content.html",collection,book,version)|safe}}
    {% endfor %}
  </div>
  <!-- prettier-ignore -->
  {% endblock %}

  <!-- prettier-ignore -->
  {% block scripts %}
{% endblock %}
</div>