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

<!-- starting landingPage -->
<div class="pageHeaderBg">
    <div class="container">
        <div class="pageHeading text-center">
            <h1 class="heading pb-3">
                {{dataToShow.h1}}</h1>
        </div>
    </div>
    <div class="container-fluid" id="containerWd">
        <div class="serachSection">
            <div class="position-relative serachBox">
                <form action="{{page.url}}/result" id='form' method="GET">
                    <input type="text" placeholder="Enter up to 15 letters?" class="txtBox" autocomplete="off" value
                        name="search" maxlength="15" required>
                    <input 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</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="wrapper_dropDown d-flex justify-content-end mt-5" style="gap:15px">

                        <div class="advancedFilter" style="position: relative;">
                            <input type="button" value="Advanced Filter" class="filterButton">
                            <div class="angle-arrow2"></div>
                        </div>
                    </div>



                    <div class="fillterWrapper">
                        <div class="startsWith">
                            <label for="startsWith">Starts With</label>
                            <input type="text" id="startsWith" placeholder="Prefix" value="" name="prefix">
                        </div>
                        <div class="mustInclude">
                            <label for="mustInclude">Must Include </label>
                            <input type="text" id="mustInclude" placeholder="Contains" name="contains">

                        </div>
                        <div class="endsWith">
                            <label for="endsWith">End With</label>
                            <input type="text" id="endsWith" placeholder="Suffix" name="suffix">

                        </div>
                        <div class="wordLength">
                            <label for="wordLength">Word Length </label>
                            <input type="text" id="wordLength" placeholder="Length" name="length">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- close landingPage -->
<!-- // page conditions -->


{% if page.url == "/anagram-word-finder" %}

<script src="/assets/js/advancedFilter2.js"></script>

{% elsif page.url == "/jumble-word-finder" %}

<script src="/assets/js/advancedFilter2.js"></script>

{% elsif page.url == "/lexical-word-finder" %}

<script src="/assets/js/advancedFilter2.js"></script>

{% elsif page.url == "/scrabble-word-finder-cheat" %}

<script src="/assets/js/advancedFilter2.js"></script>

{% elsif page.url == "/words-with-friends-word-finder" %}

<script src="/assets/js/advancedFilter2.js"></script>

{% else %}

<script src="/assets/js/advancedFilter3.js"></script>

{% endif %}