<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

if ($args) {
    extract($args);
}

$aesthetic = apply_filters(
    'fast_fuzzy_search_aesthetic',
    !empty($options['aesthetic']) ? $options['aesthetic'] : 'minimal-light',
    $options
);

?>

<section 
    class="ffs-overlay"
    x-data="fastFuzzySearchOverlayPanel"
    x-show="isVisible"
    x-trap="isVisible"
    x-transition:enter="fast-fuzzy-search__transition-enter"
    x-transition:enter-start="fast-fuzzy-search__transition-enter-start"
    x-transition:enter-end="fast-fuzzy-search__transition-enter-end"
    x-transition:leave="fast-fuzzy-search__transition-leave"
    x-transition:leave-start="fast-fuzzy-search__transition-leave-start"
    x-transition:leave-end="fast-fuzzy-search__transition-leave-end"
    x-cloak>
    
    <?php fast_fuzzy_search_get_template_part('template-parts/input-field', null, ['is_inline' => true]); ?>
    
    <button
        class="fast-fuzzy-search__panel-close fast-fuzzy-search__panel-close--<?php echo esc_attr($aesthetic); ?>"
        x-on:click="handleCloseButtonClick">
        <span class="fast-fuzzy-search__icon-frame"><?php echo wp_kses(fast_fuzzy_search_svg('x'), fast_fuzzy_search_allowed_svg_tags()); ?></span>
    </button>
</section>