<hr/>

<div class="filters">
  <!-- Status -->
  <legend>$table-plamo-status$</legend>
  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="status">

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
        $filter-plamo-in-box$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
        $filter-plamo-building$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
        $filter-plamo-built$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
        $filter-plamo-complete$
      </label>
    </div>
  </fieldset>

  <!-- Category -->
  <legend>$table-plamo-category$</legend>
  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="category">

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-aircraft$" checked>
        $filter-plamo-category-aircraft$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-armoured-car$" checked>
        $filter-plamo-category-armoured-car$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-automobile$" checked>
        $filter-plamo-category-automobile$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-fantasy-vehicle$" checked>
        $filter-plamo-category-fantasy-vehicle$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-figure$" checked>
        $filter-plamo-category-figure$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-gundam$" checked>
        $filter-plamo-category-gundam$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-mecha$" checked>
        $filter-plamo-category-mecha$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-motorcycle$" checked>
        $filter-plamo-category-motorcycle$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-spacecraft$" checked>
        $filter-plamo-category-spacecraft$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-category-tractor$" checked>
        $filter-plamo-category-tractor$
      </label>
    </div>
  </fieldset>

  <!-- Manufacturer -->
  <legend>$table-plamo-manufacturer$</legend>
  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="manufacturer">
    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="AZmodel" checked>
        <span class="fi fi-cz me-1" title="CZ"></span>AZmodel
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Bandai" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Bandai
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Bandai Spirits" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Bandai Spirits
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Cavico" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Cavico
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Eduard" checked>
        <span class="fi fi-cz me-1" title="CZ"></span>Eduard
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Fine Molds" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Fine Molds
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Flame Toys" checked>
        <span class="fi fi-hk me-1" title="HK"></span>Flame Toys
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Fujimi" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Fujimi
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Hasegawa" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Hasegawa
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Italeri" checked>
        <span class="fi fi-it me-1" title="IT"></span>Italeri
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Kotobukiya" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Kotobukiya
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="MiniArt" checked>
        <span class="fi fi-ua me-1" title="UA"></span>MiniArt
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Moderoid - Good Smile Company
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Ōtaki" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Ōtaki
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Revell" checked>
        <span class="fi fi-de me-1" title="DE"></span>Revell
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Tamiya" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Tamiya
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Thunder Model" checked>
        <span class="fi fi-cn me-1" title="CN"></span>Thunder Model
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="Wave Corporation" checked>
        <span class="fi fi-jp me-1" title="JP"></span>Wave Corporation
      </label>
    </div>
  </fieldset>

  <!-- Series -->
  <legend>$table-plamo-series$</legend>
  <fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="series">
    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg$" checked>
        $filter-plamo-series-msg$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-pocket$" checked>
        $filter-plamo-series-msg-pocket$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-stardust$" checked>
        $filter-plamo-series-msg-stardust$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-char$" checked>
        $filter-plamo-series-msg-char$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-gqx$" checked>
        $filter-plamo-series-msg-gqx$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-ironblood$" checked>
        $filter-plamo-series-msg-ironblood$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed$" checked>
        $filter-plamo-series-msg-seed$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-destiny$" checked>
        $filter-plamo-series-msg-seed-destiny$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-freedom$" checked>
        $filter-plamo-series-msg-seed-freedom$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-witch$" checked>
        $filter-plamo-series-msg-witch$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-unicorn$" checked>
        $filter-plamo-series-msg-unicorn$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zz$" checked>
        $filter-plamo-series-msg-zz$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zeta$" checked>
        $filter-plamo-series-msg-zeta$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-wing-endless-waltz$" checked>
        $filter-plamo-series-gundam-wing-endless-waltz$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-mfg-gundam$" checked>
        $filter-plamo-series-mfg-gundam$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-bf-try$" checked>
        $filter-plamo-series-gundam-bf-try$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-dragonball$" checked>
        $filter-plamo-series-dragonball$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-dragonball-z$" checked>
        $filter-plamo-series-dragonball-z$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-halo$" checked>
        $filter-plamo-series-halo$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-ikaruga$" checked>
        $filter-plamo-series-ikaruga$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-kampf-riesen-mars$" checked>
        $filter-plamo-series-kampf-riesen-mars$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-kyoukai-senki$" checked>
        $filter-plamo-series-kyoukai-senki$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-maschinen-krieger$" checked>
        $filter-plamo-series-maschinen-krieger$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-nausicaa$" checked>
        $filter-plamo-series-nausicaa$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-patlabor$" checked>
        $filter-plamo-series-patlabor$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-pokemon$" checked>
        $filter-plamo-series-pokemon$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-space-battleship-yamato$" checked>
        $filter-plamo-series-space-battleship-yamato$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-star-wars$" checked>
        $filter-plamo-series-star-wars$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-transformers$" checked>
        $filter-plamo-series-transformers$
      </label>
    </div>

    <div class="col">
      <label>
        <input class="me-2" type="checkbox" value="$filter-plamo-series-xenoblade-x$" checked>
        $filter-plamo-series-xenoblade-x$
      </label>
    </div>
  </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$" data-category="$category$">
      <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;

        const category = kit.dataset.category;
        counts[category] = (counts[category] || 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>