{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign dataToShow = site.data.[page.folderName][lang][file] %}

{%- assign CustomColor = site.data.theme.colors -%}
<!-- start commonPage as LandingPage -->

<!-- header starts -->
<!-- <header class="container" id="resultHeader"> -->
<!-- navigation startss -->
<nav class="result_navbar_section navbar-expand-lg navbar-dark" style="background-color: #fff;">
    <a href="/" title="{{dataToShow.tooltip}}" style="position: absolute; top:6px">
        <img src="{{ site.favicon | relative_url }}" alt="{{site.name}}" style="width:35px; height:35px;">
    </a>
    <div class="container" id="containerWd">
        <section class="result_sticky_nav">
            <div class="pageHeading text-center">
                <h1 class="result_heading m-0 pb-0">
                    {{dataToShow.h1}}</h1>
            </div>
            <div class="serachSection2">
                <div class="position-relative serachBox">
                    <form action="" id='form'>
                        <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
                            placeholder="Enter up to 15 letters?" class="txtBox resultPageTxtBox" value='' name="search"
                            maxlength="15" value required autocomplete="off">
                        <input
                            style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
                            type="submit" class="serachBtn resultPageSearchBtn" id="serach" value>
                        <div class="dictonaryDropdown">
                            <select class="form-select select_dropDown2 resultPageDropdown2" name="dictionary"
                                aria-label="Default select example">
                                <option selected value="Dictionary">Dictionary</option>
                                <option value="twl06" id="twl06">TWL06 (US, Canada, Thailand)</option>
                                <option value="sowpods" id="sowpods">SOWPODS (Uk and Others)</option>
                                <option value="wwf" id="wwf">Enable (Words With Friends)</option>
                            </select>
                        </div>
                        {%- include filterWords/index.html -%}
                        <div class="wrapper_dropDown mt-3 d-flex justify-content-end" style="gap:10px;">
                            <div class="Advancedbtn" style="position: relative;" onclick="myFunction()">
                                <span class="filter_count" style="display: none;"></span>
                                <input type="button" value="Advanced Filter" class="filterButton">
                                <div class="angle-arrow"></div>
                            </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 id="alpha" value="alpha">Points</option>
                                </select>
                            </div>
                        </div>
                        <div class="fillterWrapper hide">
                            <div class="text-right times" style="cursor: pointer; margin-top:-15px;">
                                <img src="../../assets/images/window-close.png" alt="" width="15px">

                            </div>
                            <div class="startsWith same">
                                <label data-toggle="tooltip" data-placement="top"
                                    title="Filter for words that starts with these letters" for="startsWith">Starts
                                    With</label>
                                <input type="text" class="filter_val" id="startsWith" placeholder="Prefix" value=""
                                    name="prefix">
                            </div>
                            <div class="mustInclude same">
                                <label for="mustInclude" data-toggle="tooltip" data-placement="top"
                                    title=" Words that contain letters in this order(ab)">Must Contains </label>
                                <input type="text" class="filter_val" id="mustInclude" placeholder="Contains"
                                    name="contains" value="">
                            </div>
                            <div class="endsWith same">
                                <label for="endsWith" data-toggle="tooltip" data-placement="top"
                                    title="Filter for words that ends with these letters">End With</label>
                                <input type="text" class="filter_val" id="endsWith" placeholder="Suffix" name="suffix"
                                    value="">
                            </div>
                            <div class="exculdeWith same">
                                <label data-toggle="tooltip" data-placement="top"
                                    title="Only words that not contain the letters you enter here"
                                    for="exculdeWith">Exculde</label>
                                <br>
                                <input type="text" class="filter_val" id="exculdeWith" placeholder="Exculde" value=""
                                    name="exculde">
                            </div>
                            <div class="inculdeWith same">
                                <label data-toggle="tooltip" data-placement="top"
                                    title="Only words that contain the letters you enter here"
                                    for="inculdeWith">Include</label>
                                <br>
                                <input type="text" class="filter_val" id="inculdeWith" placeholder="Include" value=""
                                    name="include">
                            </div>
                            <div class="wordLength same">
                                <label data-toggle="tooltip" data-placement="top"
                                    title="Filter for words with this length" for="wordLength">Word Length </label>
                                <input type="text" class="filter_val" id="wordLength" placeholder="Length" name="length"
                                    value="">
                            </div>

                            <div style="margin-top: 1.2rem; gap:5px" class="d-flex w-100">
                                <input type="button" value="Clear" class="clearFilter btn-info  text-white"
                                    style="background-color:#808080;">
                                <input type="submit" value="Apply" class="btn-info  text-white"
                                    style="background: #808080">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</nav>
<!-- </header> -->
<div class="container" id="containerWd">
    {%- if site.name == 'wordswithletters' and page.layout == "page2" -%}
    <a id="home_page_search_result" onclick="ga('send', 'event', 'Link click', 'click', 'Home Page Search Result')"></a>
    {%- endif -%}

    {% include section/wordGroup.html %}
</div>
<!-- navbar close -->
<!-- header close -->


<!-- close commonPage as LandingPage -->
<link rel="stylesheet" href="{{ '/assets/css/advancedFilter.css' | relative_url }}">
<script>
    const clearFilter = document.querySelector('.clearFilter')

    clearFilter.addEventListener('click', () => {
        startsWith.value = ''
        mustInclude.value = ''
        endsWith.value = ''
        exculdeWith.value = ''
        inculdeWith.value = ''
        wordLength.value = ''
    })
    const fillterWrapper = document.querySelector('.fillterWrapper')
    function myFunction() {
        fillterWrapper.classList.toggle('hide')
    }
    const close = document.querySelector('.times')
    close.addEventListener('click', () => {
        fillterWrapper.classList.add('hide')
    })

</script>