<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Magento\Framework\Escaper;
use Magento\LayeredNavigation\Block\Navigation\State;

/** @var State $block */
/** @var Escaper $escaper */

?>
<?php $filters = $block->getActiveFilters() ?>
<?php if (!empty($filters)): ?>
<div class="filter-current py-6" x-data="{ open: true }">
    <div class="filter-options-title flex justify-between items-center cursor-pointer"
         @click="open = !open">
        <strong><?= $escaper->escapeHtml(__('Now filtering by:')) ?></strong>
        <span>
            <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>
        </span>
    </div>
    <div class="items py-2 text-sm tracking-custom4 border-b border-secondary-darkerer" x-show="open">
        <?php foreach ($filters as $filter): ?>
            <div class="item py-2">
                <span>
                    <a class="action remove text-black hover:text-red-700"
                        href="<?= $escaper->escapeUrl($filter->getRemoveUrl()) ?>"
                        title="<?= /* @noEscape */ $escaper->escapeHtmlAttr(__('Remove This Item')) ?>">
                        <svg class="inline-block pb-1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" fill="currentColor" clip-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0
                            1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828
                            4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z">
                            </path>
                        </svg>
                    </a>
                </span>
                <span>
                    <span class="filter-label"><?= $escaper->escapeHtml(__($filter->getName())) ?>: </span>
                    <span class="filter-value font-bold">
                        <?= $escaper->escapeHtml($block->stripTags($filter->getLabel())) ?>
                    </span>
                </span>
            </div>
        <?php endforeach; ?>
    </div>
    <?php if ($block->getLayer()->getState()->getFilters()): ?>
        <div class="block-actions filter-actions">
            <a href="<?= $escaper->escapeUrl($block->getClearUrl()) ?>"
               class="text-xs text-primary hover:text-primary-darker"><?= $escaper->escapeHtml(__('Clear All')) ?></a>
        </div>
    <?php endif; ?>
</div>
<?php endif; ?>
