<?php include 'header.php'; ?>

<?php include 'template-parts/sub-header-normal.php'; ?>

<div class="uk-container">

    <div class="uk-grid uk-grid-medium uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@l" uk-height-match="target: > div > .category-card > .specializations-list" uk-grid>
        <?php
        for ($i = 0; $i < 6; $i++) {
            include 'template-parts/cards/card-category.php';
        }
        ?>
    </div><!-- uk-grid -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const categoryCards = document.querySelectorAll('.category-card');

            // Initialize each card independently
            categoryCards.forEach(card => {
                const categorySpecializations = card.querySelector('.category-specializations');
                const specializationsList = card.querySelector('.specializations-list');
                const moreButton = card.querySelector('.more-button');
                const hiddenItems = card.querySelectorAll('.specialization-item.hidden');

                // Update more button text with correct count
                if (moreButton && hiddenItems.length > 0) {
                    moreButton.textContent = `+ ${hiddenItems.length} more`;
                }

                // Toggle entire specializations section for this card only
                categorySpecializations.addEventListener('click', function() {
                    specializationsList.classList.toggle('collapsed');
                    categorySpecializations.classList.toggle('expanded');
                });

                // Toggle more/less items when button is clicked for this card only
                if (moreButton) {
                    moreButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        // Check if items are currently hidden
                        const areItemsHidden = hiddenItems[0]?.classList.contains('hidden');

                        if (areItemsHidden) {
                            // Show all hidden items in this card only
                            hiddenItems.forEach(item => {
                                item.classList.remove('hidden');
                            });
                            // Change button text to "show less"
                            moreButton.textContent = '- Show less';
                        } else {
                            // Hide items again in this card only
                            hiddenItems.forEach(item => {
                                item.classList.add('hidden');
                            });
                            // Change button text back to "+ X more"
                            moreButton.textContent = `+ ${hiddenItems.length} more`;
                        }
                    });
                }
            });
        });
    </script>

</div><!-- .uk-container -->

<?php include 'footer.php'; ?>