document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".table-filterable").forEach((container) => {
    const select = container.querySelector(".table-severity-filter");
    if (!select) {
      return;
    }

    const rows = Array.from(container.querySelectorAll("tbody tr[data-severity-row='true']"));
    const emptyNotice = container.querySelector(".table-filter-empty");

    const applyFilter = () => {
      const selected = select.value;
      let visibleCount = 0;

      rows.forEach((row) => {
        const matches = selected === "" || row.dataset.severity === selected;
        row.hidden = !matches;
        if (matches) {
          visibleCount += 1;
        }
      });

      if (emptyNotice) {
        emptyNotice.hidden = visibleCount !== 0;
      }
    };

    select.addEventListener("change", applyFilter);
    applyFilter();
  });
});