{% load substance_tags %}

{% partialdef reactions-filter %}
  {% include "lara_django_substances/partials/reactions_filter.html" %}
{% endpartialdef reactions-filter %}
{% partialdef reactions-row %}
  {% include "lara_django_substances/partials/reaction_row.html" with reaction=reaction %}
{% endpartialdef reactions-row %}

<!-- Component controls its own max-width, parent centers it -->
<div class="w-full max-w-[120rem]">
  <!-- Add button and mobile filter toggle -->
  <div class="mb-4 flex justify-between items-center">
    <button class="btn lg:hidden" id="show-filter-btn">Show filters</button>
    <div class="ml-auto flex gap-2">
      <button id="bulk-delete-btn-reaction" 
              class="btn bg-red-500 text-white" 
              style="display: none;"
              hx-post="{% url 'lara_django_substances:reaction-bulk-delete' %}"
              hx-target="#reactions-table"
              hx-swap="outerHTML"
              hx-vals="js:{reaction_ids: getSelectedIds('reaction')}"
              hx-confirm="Are you sure you want to delete the selected reactions?">
        Delete Selected
      </button>
      <button id="bulk-duplicate-btn-reaction" 
              class="btn bg-blue-500 text-white" 
              style="display: none;"
              hx-post="{% url 'lara_django_substances:reaction-bulk-duplicate' %}"
              hx-target="#reactions-table"
              hx-swap="outerHTML"
              hx-vals="js:{reaction_ids: getSelectedIds('reaction')}">
        Duplicate Selected
      </button>
      <button class="btn bg-green-500 text-white" 
              hx-get="{% url 'lara_django_substances:reaction-create' %}"
              hx-target="#reactions-body"
              hx-swap="innerHTML">
        Add Reaction
      </button>
    </div>
  </div>

  <!-- Table and filter sections -->
  <div id="reactions-list-container" class="grid grid-cols-4 gap-6">
        <section id="reactions-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            <table id="reactions-table" class="table table-zebra table-pin-rows w-full">
    <thead class="bg-{{ app_color }}-600 text-white text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">
        <tr class="bg-{{ app_color }}-600">
            <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                hx-get="{% url 'lara_django_substances:reactions-overview' %}?sort=name&order={% if current_sort == 'name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                hx-target="#reactions-table"
                hx-swap="outerHTML"
                hx-include="#filter-form">
                <div class="flex items-center gap-1">
                    <span>Name</span>
                    {% if current_sort == 'name' %}
                        <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                    {% endif %}
                </div>
            </th>
            <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                hx-get="{% url 'lara_django_substances:reactions-overview' %}?sort=label&order={% if current_sort == 'label' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                hx-target="#reactions-table"
                hx-swap="outerHTML"
                hx-include="#filter-form">
                <div class="flex items-center gap-1">
                    <span>Label</span>
                    {% if current_sort == 'label' %}
                        <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                    {% endif %}
                </div>
            </th>
            <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">RInChI</th>
            <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">RInChI Key (Short)</th>
            <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">Components</th>
            <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">Actions</th>
            <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">
                <input type="checkbox" 
                       id="select-all-checkbox-reaction" 
                       class="checkbox checkbox-sm" 
                       onchange="toggleAllCheckboxes(this, 'reaction')">
            </th>
        </tr>
    </thead>

    <tbody id="reaction-table-body" class="text-xs md:text-xs lg:text-sm xl:text-sm 2xl:text-base">
        {% if reactions_list %}
            {% for reaction in reactions_list %}
                {% partial reactions-row %}
            {% endfor %}
            {% if page_obj %}
            <tr>
                <td colspan="7">
                    {% include "lara_django_substances/partials/pagination.html" %}
                </td>
            </tr>
            {% endif %}
        {% else %}
        <tr class="no-reaction-row">
            <td colspan="7">
                <div role="alert" class="alert alert-info">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      class="h-6 w-6 shrink-0 stroke-current">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>No reactions found.</span>
                  </div>   
            </td>
        </tr>
        {% endif %}
    </tbody>
</table>
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
          {% partial reactions-filter %}
        </section>
  </div>
</div>