{% extends 'lara_django_base/lara_base.html' %}
{% load static %}
{% load substance_tags %}
{% block extra_js %}
    <script src="{% static 'lara_django_substances/js/bulk_actions.js' %}"></script>
{% endblock %}
{% block content %}
    <div id="isotopes-body" class="flex flex-col items-center w-full px-4">
        {% include 'lara_django_substances/partials/isotopes_panel.html' %}
    </div>
    <script>
  document.addEventListener('DOMContentLoaded', () => {
    document.body.addEventListener('success', () => {
      let firstIsotopeDiv = document.querySelector('.no-isotope-row');
      if (firstIsotopeDiv) {
        firstIsotopeDiv.remove();
      }
    })
  });
    </script>
    <script>
let btn = document.getElementById('show-filter-btn');
btn.addEventListener('click', (e) => {
    let filterSection = document.getElementById('filters');
    if (filterSection.classList.contains('hidden')) {
      filterSection.classList.remove('hidden');
      filterSection.classList.add('grid');
      filterSection.classList.add('col-span-4');
      filterSection.classList.add('mb-4');
      e.target.textContent = 'Hide filters';
    } else {
      filterSection.classList.add('hidden');
      filterSection.classList.remove('grid');
      filterSection.classList.remove('col-span-4');
      filterSection.classList.remove('mb-4');
      e.target.textContent = 'Show filters';
    }
  });
    </script>
{% endblock %}