const cards = [...document.querySelectorAll('.trk')];
const count = document.getElementById('count');
const search = document.getElementById('search');
let filter = 'all';

function apply() {
  const q = search.value.trim().toLowerCase();
  let shown = 0;
  for (const c of cards) {
    const tags = c.dataset.tags.split(' ');
    const okTag = filter === 'all' || tags.includes(filter);
    const okQ = !q || c.dataset.search.includes(q);
    const on = okTag && okQ;
    c.hidden = !on;
    if (on) shown++;
  }
  count.textContent = shown + ' / ' + cards.length + ' TRACKS';
  document.getElementById('nomatch').hidden = shown > 0;
}

for (const b of document.querySelectorAll('[data-filter]')) {
  b.addEventListener('click', () => {
    filter = b.dataset.filter;
    for (const o of document.querySelectorAll('[data-filter]'))
      o.setAttribute('aria-pressed', String(o === b));
    apply();
  });
}
search.addEventListener('input', apply);
apply();