{{ if $.Param "enableSearch" }}

<!-- Search related libs (Fuse) -->
{{ $fuse := resources.Get "js/fuse.6.4.0.js" }}
{{ $fuseSearch := resources.Get "js/fuse-search.js" }}
{{ $search := slice $fuse $fuseSearch | resources.Concat "js/search.js" | resources.Minify }}

{{ if hugo.IsServer }}
<script src="{{ $search.RelPermalink }}" type="module"></script>
{{ else }}
{{ $search = $search | fingerprint }}
<script src="{{ $search.RelPermalink }}" type="module"></script>
{{ end }}

<!-- Search container -->
<div id="search-container" class="fixed top-4 right-4 flex items-center z-50">
    <!-- Searchbar -->
    <div id="searchbar" class="mr-2 hidden relative">
        <input id="searchbar-input"
            class="px-4 py-2 bg-henryb-dark rounded-lg focus:outline-none text-henryc-lightest placeholder-henryt"
            placeholder="Search...">
        <ul id="searchbar-results" class="mt-2
                     absolute right-0
                     w-screen max-w-[75vw] min-w-[200px] max-h-[75vh] overflow-y-auto
                     rounded-lg shadow-lg
              "></ul>
    </div>

    <!-- Search icon -->
    <div id="search-icon" class="cursor-pointer p-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-henryt-lighter hover:text-henryt" fill="none"
            viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
    </div>
</div>

<script type="module">
    import { setupSearch } from '{{ $search.RelPermalink }}';

    const { fusesearch, searchbar } = setupSearch();

    const searchIcon = document.getElementById('search-icon');
    const searchBar = document.getElementById('searchbar');
    const searchInput = document.getElementById('searchbar-input');

    // Function to toggle search bar visibility
    function toggleSearchBar() {
        searchBar.classList.toggle('hidden');
        if (!searchBar.classList.contains('hidden')) {
            searchInput.focus();
        }
    }

    // Toggle search bar visibility when clicking the search icon
    searchIcon.addEventListener('click', (e) => {
        e.stopPropagation();
        toggleSearchBar();
    });
</script>

{{ end }}