<div class="c-search__search-wrapper {{ 'c-search__search-wrapper--home' if homeSearch }}" x-data="{ searchResults: [], searchInput: '', matches: [] }">
    <label for="{{ 'search-home' if homeSearch else 'search' }}" class="c-search__label {{ 'c-search__label--home' if homeSearch }}">{{ site.searchLabel }}&nbsp;:</label>
    <div class="c-search__input-wrapper {{ 'c-search__input-wrapper--home' if homeSearch }}">
        <input type="text" id="{{ 'search-home' if homeSearch else 'search' }}" class="c-search__input {{ 'c-search__input--home' if homeSearch }}" x-model="searchInput" @focus="
            if (sessionStorage.getItem('searchResults')) {
                searchResults = JSON.parse(sessionStorage.getItem('searchResults'));
            } else {
                fetch('/search.json').then(res => res.json()).then(res => {
                    sessionStorage.setItem('searchResults', JSON.stringify(res));
                    searchResults = res;
                });
            }
        " @input="
            matches = [];

            if (searchInput.length < 3) { return };
    
            searchResults.forEach(recipe => {
                const matchTitle = recipe.title.toLowerCase().includes(searchInput);
                const matchIngredient = recipe.ingredients.find(ingredient => ingredient.toLowerCase().includes(searchInput));
                const matchTag = recipe.tags.find(tag => tag.toLowerCase().includes(searchInput));
        
                if (!matchTitle && !matchIngredient && !matchTag) { return };
        
                const match = {...recipe};
                if (matchTitle) { match.matchTitle = matchTitle };
                if (matchIngredient) { match.matchIngredient = matchIngredient };
                if (matchTag) { match.matchTag = matchTag };
        
                matches.push(match)
            });
        ">
        {% if homeSearch %}{% include "icons/search.svg" %}{% endif %}
        <button class="c-search__close-button {{ 'c-search__close-button--home' if homeSearch }}" x-show="searchInput" @click="
            searchInput = '';
            matches = [];
        " x-cloak>
            <span class="u-sr-only">Close</span>
            {% include "icons/close.svg" %}
        </button>
    </div>

    <template x-if="matches.length">
        <div class="c-search__results-wrapper">
            <ul class="c-search__results {{ 'c-search__results--home' if homeSearch }}">
                <template x-for="(match, index) in matches" :key="index">
                    <li>
                        <div class="c-search__result-link {{ 'c-search__result-link--home' if homeSearch }}">
                            <a x-bind:href="match.url" x-html="highlightText(match.title, searchInput)"></a>
                            <template x-if="match.matchTag">
                                <div class="c-tags__tag c-tag__tag--selected" x-html="highlightText(match.matchTag, searchInput)"></div>
                            </template>
                        </div>
                        <template x-if="match.matchIngredient">
                            <p class="c-search__result-ingredients {{ 'c-search__result-ingredients--home' if homeSearch }}" >
                                {{ site.searchContainsLabel }}: <span x-html="highlightText(match.matchIngredient, searchInput)"></span>
                            </p>
                        </template>
                    </li>
                </template>
            </ul>
        </div>
    </template>
</div>

<script>
    function highlightText (string, subString) {
        const index = string.toLowerCase().indexOf(subString.toLowerCase());
        if (index === -1) return string;
        return string.substring(0, index) + '<span class="u-highlight">' + string.substring(index, index + subString.length) + '</span>' + string.substring(index + subString.length);
    }
</script>