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

{%- assign CustomColor = site.data.theme.colors -%} <!– start commonPage as LandingPage –> <div class=“container” id=“containerWd”>

<section class="sticky_nav">
    <div class="pageHeading text-center pt-5">
        <h1 class="heading m-0 pb-0">
            {{dataToShow.h1}}</h1>
        {%- if dataToShow.h2 -%}
        <h2>
            {{dataToShow.h2}}</h2>
        {%- endif -%}
    </div>
    <div class="serachSection2">
        <div class="position-relative serachBox">
            <form action="{{page.url}}/result" id='form'>
                <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
                    placeholder="Enter up to 15 letters?" class="txtBox" name="search" maxlength="15"
                    value={{page.value}} required>
                <input
                    style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
                    type="submit" class="serachBtn" id="serach" value>
                <div class="dictonaryDropdown">
                    <select class="form-select select_dropDown2" name="dictonary"
                        aria-label="Default select example">
                        <option selected value="Dictonary">Dictonary</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>

                <div class="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">
                            {%- for scrabblewords in dataToShow.words-%}
                            {%- for item in scrabblewords %}
                            {%- if forloop.index == 1 -%}
                            <input type="button" id="Tab_{{item.i}}" onclick="filterLinks({{item.i}})"
                                value="{{item.i}} Letter" class="tab_link cursorPointer">
                            {%- endif -%}
                            {%- endfor -%}
                            {%- endfor -%}
                        </div>
                        <input type="button" name="" id="next" class="next tabsBg noOutline cursorPointer" value=" "
                            style="display: none;">
                    </div>
                </div>

                <div class="wrapper_dropDown mt-2 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" style="top:115px">
                    <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 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">Must Include </label>
                        <input type="text" class="filter_val" id="mustInclude" placeholder="Contains"
                            name="contains" value="">
                    </div>
                    <div class="endsWith same">
                        <label for="endsWith">End With</label>
                        <input type="text" class="filter_val" id="endsWith" placeholder="Suffix" name="suffix"
                            value="">
                    </div>
                    <div class="wordLength same">
                        <label 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;">
                        <input type="submit" value="Apply" class="btn-info w-100 text-white"
                            style="background: #808080">
                    </div>
                </div>

            </form>
        </div>
    </div>
</section>

{% include section/xyzGroup.html %}

</div>

<!– close commonPage as LandingPage –> <link rel=“stylesheet” href=“{{ '/assets/css/advancedFilter.css' | relative_url }}”> <script src=“../../assets/js/xyz.js”></script>