<?php

use Magento\Framework\Escaper;
 /** @var Escaper $escaper */
?>
<?php if ($block->canShowBlock()): ?>
    <form data-mageworxln-filters="">
        <div class="block filter bg-secondary-lighter md:bg-white py-4 px-6" id="layered-filter-block border border-secondary-lightest" x-data="{ open: false }" >
            <?php $filtered = count($block->getLayer()->getState()->getFilters()) ?>
            <div class="block-title filter-title text-lg w-full flex justify-between items-center" data-count="<?php /* @escapeNotVerified */ echo $filtered; ?>" @click="open = !open">
                <strong data-role="title" class="uppercase text-xl font-bold leading-5 tracking-wider"><?= $escaper->escapeHtml(__('Filter results')) ?></strong>
                <span class="md:hidden">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="transition-transform transform duration-300 ease-in-out inline-block" :class="open ? 'rotate-180' : ''">
                        <path d="M19 9L12 16L5 9" stroke="#4A5568" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round"/>
                    </svg>
                </span>
            </div>
            <div class="block-content filter-content md:block" :class="{
                                'hidden' : !open,
                                'block' : open
                            }">
                <?php echo $block->getChildHtml('state') ?>

                <?= $block->getChildHtml('direct.category.link.list') ?>

                <?php $wrapOptions = false; ?>
                <?php foreach ($block->getFilters() as $filter): ?>
                    <?php if ($filter->getItemsCount()): ?>
                        <?php if (!$wrapOptions): ?>
                            <div class="filter-options" id="narrow-by-list" data-role="content">
                        <?php  $wrapOptions = true; endif; ?>
                        <div class="filter-options-item" x-data="{ open: false }">
                            <div class="filter-options-title flex justify-between border-b py-4 mb-2 font-semibold text-md items-center cursor-pointer hover:text-secondary-darker"
                                 @click="open = !open">
                                <?php /* @escapeNotVerified */ echo __($filter->getName()) ?>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                     xmlns="http://www.w3.org/2000/svg"
                                     class="transition-transform transform duration-300 ease-in-out"
                                     :class="open ? 'rotate-180' : ''">
                                    <path d="M19 9L12 16L5 9" stroke="#4A5568" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="filter-options-content"
                                 x-cloak
                                 :class="{ 'hidden': !open , 'block': 'open' }"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter->setData('is_freeze', false)); ?></div>
                            <a class="more-less-link" href="#"></a>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
                <?php if ($wrapOptions): ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </form>
<?php endif; ?>
