{% extends "base.html" %}
{% block title %}Skipped Parts · {{ app_name }}{% endblock %}
{% block body %}
{% include "_nav.html" %}
<main class="container">
  <h1>Skipped Imported Parts</h1>
  <p class="muted">
    These parts were skipped during sync because no Part Type could be inferred
    from their description. Select one or more rows, choose a Type (and optionally
    a Sub Type), then click <strong>Sync selected</strong> to create their
    Augmented Part entries.
  </p>
  <p><a href="/admin/augmented-parts" class="btn btn-ghost">← Augmented Parts</a></p>

  {% include "admin/_skipped_parts_table.html" %}
</main>

<script>
(function () {
  function updateButton() {
    var count = document.querySelectorAll('input[name="inventory_ids"]:checked').length;
    var btn = document.getElementById('sync-selected-btn');
    if (btn) {
      btn.textContent = count > 0 ? 'Sync selected (' + count + ')' : 'Sync selected';
    }
  }

  document.addEventListener('change', function (e) {
    if (!e.target) return;

    if (e.target.id === 'select-all') {
      document.querySelectorAll('input[name="inventory_ids"]').forEach(function (cb) {
        cb.checked = e.target.checked;
      });
    }

    if (e.target.id === 'select-all' || e.target.name === 'inventory_ids') {
      updateButton();
    }
  });

  // Re-run after every HTMX swap so the button state reflects the new content.
  document.addEventListener('htmx:afterSwap', updateButton);
}());
</script>
{% endblock %}