{% extends "collections/paginated_base.html" %}

{% block page_title %}Packages{% endblock %}

{% block action_button %}
    <div class="flex items-center gap-2">
      <button
        type="button"
        class="btn btn-primary btn-sm"
        id="new-package-button"
        onclick="document.getElementById('new_package_modal').showModal(); return false;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-folder-plus-icon lucide-folder-plus"
        >
          <path d="M12 10v6" />
          <path d="M9 13h6" />
          <path
            d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
          />
        </svg>
      </button>
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-sm">
          Import
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-chevron-down ml-1"
          >
            <path d="m6 9 6 6 6-6" />
          </svg>
        </div>
        <ul
          tabindex="-1"
          class="dropdown-content menu bg-base-100 rounded-box z-50 w-56 p-2"
        >
          <li>
            <a
              role="button"
              onclick="document.getElementById('import_package_modal').showModal(); return false;"
            >
              Import Package from JSON
            </a>
          </li>
          <li>
            <a
              role="button"
              onclick="document.getElementById('import_legacy_package_modal').showModal(); return false;"
            >
              Import Package from legacy JSON
            </a>
          </li>
        </ul>
      </div>
    </div>
{% endblock action_button %}

{% block action_modals %}
  {% include "modals/collections/new_package_modal.html" %}
  {% include "modals/collections/import_package_modal.html" %}
  {% include "modals/collections/import_legacy_package_modal.html" %}
{% endblock action_modals %}

{% block description %}
  <p>
    A package contains pathways, rules, etc. and can reflect specific
    experimental conditions.
  </p>
  <a
    target="_blank"
    href="https://wiki.envipath.org/index.php/packages"
    class="link link-primary"
  >
    Learn more &gt;&gt;
  </a>
{% endblock description %}