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

{%- assign CustomColor = site.data.theme.colors -%}

<style>
    .sticky_nav {
        position: sticky;
        width: inherit;
        top: 58px;
        background-color: #fff;
        z-index: 99;
    }
</style>
<!-- start commonPage as LandingPage -->

<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="serachSection">
        <div class="position-relative serachBox">
            <form action="{{page.url}}/result" id='form'>
                <div class="container" id="containerWd">
                    <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">
                        <!-- <div class="dictonaryDropdown"> -->
                        <select class="form-select select_dropDown2" name="dictionary"
                            aria-label="Default select example">
                            <option value="Dictionary">Dictionary</option>
                            <option value="twl06" id="twl06">TWL06 (US, Canada, Thailand)</option>
                            <option selected value="sowpods" id="sowpods">SOWPODS (Uk and Others)</option>
                            <option value="wwf" id="wwf">Enable (Words With Friends)</option>
                        </select>
                        <!-- </div> -->
                    </div>
                  
                </div>

                <div class="container">
                    {%- include wordgames/advanced-filter/advanced-filter.html -%}
                </div>
                <div class="container" id="containerWd">
                    {% include wordgames/xyzpages/xyz-words.html %}
                </div>

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