{% extends "shared/layout.html" %}
{% block head %}
  {% with page_title="Bundles - Linkding" %}{{ block.super }}{% endwith %}
{% endblock %}
{% block content %}
  <main class="bundles-page crud-page" aria-labelledby="main-heading">
    <div class="crud-header">
      <h1 id="main-heading">Bundles</h1>
      <a href="{% url 'linkding:bundles.new' %}" class="btn">Add bundle</a>
    </div>
    {% include 'shared/messages.html' %}
    {% if bundles %}
      <form action="{% url 'linkding:bundles.action' %}" method="post">
        {% csrf_token %}
        <table class="table crud-table">
          <thead>
            <tr>
              <th>Name</th>
              <th class="actions">
                <span class="text-assistive">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {% for bundle in bundles %}
              <tr data-bundle-id="{{ bundle.id }}" draggable="true">
                <td>
                  <div class="d-flex align-center">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="text-secondary mr-1"
                         width="16"
                         height="16"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                      <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                      <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                      <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                      <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                      <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                    </svg>
                    <span>{{ bundle.name }}</span>
                  </div>
                </td>
                <td class="actions">
                  <a class="btn btn-link"
                     href="{% url 'linkding:bundles.edit' bundle.id %}">Edit</a>
                  <button data-confirm
                          type="submit"
                          name="remove_bundle"
                          value="{{ bundle.id }}"
                          class="btn btn-link">Remove</button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <input type="submit" name="move_bundle" value="" class="d-none">
        <input type="hidden" name="move_position" value="">
      </form>
    {% else %}
      <div class="empty">
        <p class="empty-title h5">You have no bundles yet</p>
        <p class="empty-subtitle">Create your first bundle to get started</p>
      </div>
    {% endif %}
  </main>
  <script>
    (function init() {
      const tableBody = document.querySelector(".crud-table tbody");
      if (!tableBody) return;

      let draggedElement = null;

      const rows = tableBody.querySelectorAll('tr');
      rows.forEach((item) => {
        item.addEventListener('dragstart', handleDragStart);
        item.addEventListener('dragend', handleDragEnd);
        item.addEventListener('dragover', handleDragOver);
        item.addEventListener('dragenter', handleDragEnter);
      });

      function handleDragStart(e) {
        draggedElement = this;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.dropEffect = 'move';

        this.classList.add('drag-start');
        setTimeout(() => {
          this.classList.remove('drag-start');
          this.classList.add('dragging');
        }, 0);
      }

      function handleDragEnd() {
        this.classList.remove('dragging');

        const moveBundleInput = document.querySelector('input[name="move_bundle"]');
        const movePositionInput = document.querySelector('input[name="move_position"]');
        moveBundleInput.value = draggedElement.getAttribute('data-bundle-id');
        movePositionInput.value = Array.from(tableBody.children).indexOf(draggedElement);

        const form = this.closest('form');
        form.requestSubmit(moveBundleInput);

        draggedElement = null;
      }

      function handleDragOver(e) {
        if (e.preventDefault) {
          e.preventDefault();
        }
        return false;
      }

      function handleDragEnter() {
        if (this !== draggedElement) {
          const listItems = Array.from(tableBody.children);
          const draggedIndex = listItems.indexOf(draggedElement);
          const currentIndex = listItems.indexOf(this);

          if (draggedIndex < currentIndex) {
            this.insertAdjacentElement('afterend', draggedElement);
          } else {
            this.insertAdjacentElement('beforebegin', draggedElement);
          }
        }
      }
    })();
  </script>
{% endblock %}