const groupFilter=document.getElementById('group-filter');const nameFilter=document.getElementById('name-filter');const gridItems=document.querySelectorAll('#commands-grid article');const alphaFilterButtons=document.querySelectorAll('#alpha-filter-container button');function filterGridItems(){const selectedGroup=groupFilter.value;const nameQuery=nameFilter.value.trim().toLowerCase();let selectedAlpha;alphaFilterButtons.forEach(button=>{if(button.classList.contains('active')){selectedAlpha=button.value;return;}});gridItems.forEach(item=>{const itemName=item.dataset.name.toLowerCase();const itemGroup=item.dataset.group;const firstLetter=itemName.charAt(0);const matchesGroup=selectedGroup===''||selectedGroup===itemGroup;const matchesName=itemName.includes(nameQuery);const matchesAlpha=!selectedAlpha||firstLetter===selectedAlpha;console.log(selectedGroup)
item.style.display=matchesGroup&&matchesName&&matchesAlpha?'flex':'none';});}
function handleAlphaFilterClick(event){alphaFilterButtons.forEach(button=>{button.classList.remove('active');});const clickedButton=event.currentTarget;clickedButton.classList.add('active');filterGridItems();}
groupFilter.addEventListener('change',filterGridItems);nameFilter.addEventListener('input',filterGridItems);alphaFilterButtons.forEach(button=>{button.addEventListener('click',handleAlphaFilterClick);});filterGridItems();