{% 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 %}
