{% assign dataToShow = site.data[page.folderName][page.lang][page.fileName] %}
{%- if page.letter -%}
<style>
    .letter-length {
        display: none;
    }

    .sortingFilters {
        display: flex !important;
    }
</style>
{%- endif -%}
<div class="row pad m-0">
    <div class="col-md-12">
        {%- if page.letter -%}
        <a id="home_page_search_result"
            onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Home Page Search Result'});"></a>
        {%- endif -%}
        <div class="filters d-flex justify-content-between align-items-center">
            <div class="wordCount font-weight-bolder">{{dataToShow.wordLength}}</div>
            <div class="filterSortedIcons">
                <div class="filter-icon" onclick="myFunction()">
                    <i class="bi bi-filter"></i>
                </div>
                <div class="sortup-icon">
                    <i class="bi bi-sort-up"></i>
                </div>
            </div>
            <div class="d-none tab_link_wrapper" style="position: relative;">
                <div id="tab-scroll" class="tab-scroll flex-row">
                    <input type="button" name="" id="prev" class="prev tabsBg noOutline cursorPointer" value=" "
                        style="display: none;">
                    <div id="tab-container" class="search-container tab_container flex-row">
                        <input type="button" id="Tab_6" onclick="Filtering(6)" value="6 Letter"
                            class="tab_link cursorPointer active-tab">

                        <input type="button" id="Tab_5" onclick="Filtering(5)" value="5 Letter"
                            class="tab_link cursorPointer">

                        <input type="button" id="Tab_4" onclick="Filtering(4)" value="4 Letter"
                            class="tab_link cursorPointer">

                        <input type="button" id="Tab_3" onclick="Filtering(3)" value="3 Letter"
                            class="tab_link cursorPointer">

                        <input type="button" id="Tab_2" onclick="Filtering(2)" value="2 Letter"
                            class="tab_link cursorPointer">
                    </div>
                    <input type="button" name="" id="next" class="next tabsBg noOutline cursorPointer" value=" "
                        style="display: none;">
                </div>
            </div>
            <div class="sortingFilters wrapper_dropDown  justify-content-end" style="gap:10px; display: none;">
                <div class="letter-length">
                    <select class="form-select length-select">
                        <option selected="true" hidden>Letter Length</option>
                    </select>
                </div>
                <div id="sort-select">
                    <select class="form-select sort-select" id="select_dropDown">
                        <option selected="true" hidden id="alpha" value="alpha">Sort by</option>
                        <option id="alpha" value="alpha">A-Z</option>
                        <option id="alpha" value="alpha">Z-A</option>
                        <option selected id="alpha" value="alpha">Points</option>
                    </select>
                </div>
            </div>
        </div>

        {%- if page.letter -%}
        <div id="get-value" data-fileName="{{page.fileName}}" data-lang="{{page.lang}}"
            data-folderName="{{page.folderName}}" class="main">
            {%- for scrabblewords in dataToShow.words-%}
            {%- for item in scrabblewords %}
            {%- if forloop.index == 1 -%}
            <div class="allGroupWords wordlistContainer" id="alpha_{{item.i}}">
                <div class="wordListHeading">
                    <h3 class="lead">{{item.i}} Letter Words</h3>
                </div>
                <div class="wordList">
                    <ul class="ul list-unstyled">
                        {%- for item in scrabblewords limit: 97 %}
                        {%- assign value = item.word -%}
                        <a class="anchor__style" target="_blank" href="/word-meaning?search={{item.word | strip_html}}">
                            <div class="tool-tip" data-toggle="tooltip" data-placement="top"
                                title="Lookup {{item.word | strip_html }} in Dictionary">
                                <li class="list_word">
                                    {{item.word}}
                                    <span class="points" value="{{item.points}}">{{item.points}}</span>
                                </li>
                            </div>
                        </a>
                        {%- endfor -%}
                    </ul>
                    <div class="w-100 text-center btn-container">
                        <button id="{{item.i}}" style="background: black;
                        padding: 1rem 2rem;
                        border-radius: 50px;
                        color: #fff;
                        font-size: 15px;
                        border: none;" onclick="ShowMoreWords(this)" type="button" class="my-4 showmore_btn">More
                            Words</button>
                    </div>
                </div>

            </div>
            {%- endif -%}
            {%- endfor -%}
            {%- endfor -%}
        </div>
        <script src="/assets/js/show-more-words.js"></script>
        {%- else -%}
        <div class="main"></div>
        {%- endif -%}

        <div class="errorMsg"></div>

    </div>
</div>