<hr/>

<div class="filters">
  <!-- Status -->
  <fieldset class="filter-group" data-filter="status">
    <legend>Status</legend>
    <label>
      <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
      $filter-plamo-in-box$
    </label>
    <label>
      <input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
      $filter-plamo-building$
    </label>
    <label>
      <input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
      $filter-plamo-built$
    </label>
    <label>
      <input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
      $filter-plamo-complete$
    </label>
  </fieldset>

  <!-- Manufacturer -->
  <fieldset class="filter-group" data-filter="manufacturer">
    <legend>Manufacturer</legend>
    <label>
      <input class="me-2" type="checkbox" value="AZmodel" checked>
      AZmodel
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Bandai" checked>
      Bandai
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Bandai Spirits" checked>
      Bandai Spirits
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Cavico" checked>
      Cavico
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Eduard" checked>
      Eduard
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Finemolds" checked>
      Finemolds
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Flame Toys" checked>
      Flame Toys
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Fujimi" checked>
      Fujimi
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Hasegawa" checked>
      Hasegawa
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Italeri" checked>
      Italeri
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Kotobukiya" checked>
      Kotobukiya
    </label>
    <label>
      <input class="me-2" type="checkbox" value="MiniArt" checked>
      MiniArt
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
      Moderoid - Good Smile Company
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Ōtaki" checked>
      Ōtaki
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Revell" checked>
      Revell
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Tamiya" checked>
      Tamiya
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Thunder Model" checked>
      Thunder Model
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Wave Corporation" checked>
      Wave Corporation
    </label>
  </fieldset>

  <!-- Series -->
  <fieldset class="filter-group" data-filter="series">
    <legend>Series</legend>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam" checked>
      Mobile Suit Gundam
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam 0080: War in the Pocket" checked>
      Mobile Suit Gundam 0080: War in the Pocket
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam 0083: Stardust Memory" checked>
      Mobile Suit Gundam 0083: Stardust Memory
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam: Char's Counterattack" checked>
      Mobile Suit Gundam: Char's Counterattack
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam GQuuuuuuX" checked>
      Mobile Suit Gundam GQuuuuuuX
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam Iron Blooded Orphans" checked>
      Mobile Suit Gundam Iron Blooded Orphans
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED" checked>
      Mobile Suit Gundam SEED
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Destiny" checked>
      Mobile Suit Gundam SEED Destiny
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Freedom" checked>
      Mobile Suit Gundam SEED Freedom
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam the Witch from Mercury" checked>
      Mobile Suit Gundam the Witch from Mercury
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam Unicorn" checked>
      Mobile Suit Gundam Unicorn
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Gundam ZZ" checked>
      Mobile Suit Gundam ZZ
    </label>
        <label>
      <input class="me-2" type="checkbox" value="Mobile Suit Zeta Gundam" checked>
      Mobile Suit Zeta Gundam
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Mobile Fighter G Gundam" checked>
      Mobile Fighter G Gundam
    </label>
    <label>
      <input class="me-2" type="checkbox" value="Gundam Build Fighters Try" checked>
      Gundam Build Fighters Try
    </label>
  </fieldset>
</div>

<div class="mt-2">
  <button id="clear-filters" type="button" class="btn btn-sm btn-outline-secondary">
    Clear
  </button>
</div>

<hr/>

<div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
    $for(kits)$
    <div class="col kit" data-status="$status$" data-manufacturer="$manufacturer$" data-series="$series$">
      <div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
        <div class="row g-0">
          <a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
        </div>
        <div class="row g-0">
          <div class="col-6 col-md-8">
            <div class="card-body">
              <p class="card-text fs-xs-smaller">
                <em class="text-body-secondary">$formatted_date$</em><br/>
                $model_name$<br/>
                <span class="badge rounded-pill text-bg-secondary ms-4 text-center">$scale$</span><br/>
                $if(series)$
                  $series$<br/>
                $endif$
                $release$ - $manufacturer$<br/>
                $if(number)$
                <a class="external" aria-label="scalemates dot com (opens external site in new tab)" href="https://www.scalemates.com/search.php?fkSECTION%5B%5D=All&q=$number$*" target="_blank" rel="noopener noreferrer">$number$</a><br/>
                $endif$
                $if(purchase_store)$
                $if(price)$
                $if(purchase_date)$
                  $purchase_store$<br/>
                  $price$ - <em>($formatted_purchase_date$)</em><br/>
                $endif$
                $endif$
                $endif$
              </p>
            </div>
          </div>
          <div class="col-3">
            <div class="card mt-2" style="width: 128px;">
              <a href="$url$">
                <img src="/images/plamo/$page$/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
              </a>
              <div class="card-body">
                <p class="card-text text-center">$status$</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    $endfor$
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
    const kits = document.querySelectorAll(".kit");

    // Count meta data.
    const counts = {};
    kits.forEach(kit => {
        const status = kit.dataset.status;
        counts[status] = (counts[status] || 0) + 1;

        const manufacturer = kit.dataset.manufacturer;
        counts[manufacturer] = (counts[manufacturer] || 0) + 1;

        const series = kit.dataset.series;
        counts[series] = (counts[series] || 0) + 1;
    });

    // Update each filter label with the count.
    document.querySelectorAll(".filters input[type='checkbox']")
    .forEach(checkbox => {
          const value = checkbox.value;
          const count = counts[value] || 0;

          // Update label text.
          const label = checkbox.parentElement;
          const textNode = label.childNodes[label.childNodes.length - 1];

          textNode.textContent = textNode.textContent.trim() + " (" + count + ")";
    });

    function updateFilter() {
        const groups = document.querySelectorAll(".filter-group");

        // Get all checked checkboxes across all groups.
        const allChecked = document.querySelectorAll(
            ".filter-group input:checked"
        );

        // If nothing is selected anywhere, then hide everything.
        if (allChecked.length === 0) {
            kits.forEach(kit => {
                kit.style.display = "none";
            });
            return;
        }

        kits.forEach(kit => {
            let visible = true;

            groups.forEach(group => {
                const filterName = group.dataset.filter;

                const selected = Array.from(
                    group.querySelectorAll("input:checked")
                ).map(cb => cb.value);

                const kitValue = kit.dataset[filterName];

                // OR inside group
                if (selected.length > 0 && !selected.includes(kitValue)) {
                    visible = false;
                }
            });

            kit.style.display = visible ? "" : "none";
        });
    }

    checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));

    // Clear button.
    const clearButton = document.getElementById("clear-filters");

    clearButton.addEventListener("click", function () {
        // Uncheck all checkboxes.
        checkboxes.forEach(cb => {
            cb.checked = false;
        });
        // Update the visible kits.
        updateFilter();
    });
});
</script>