{% 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="letter-close-button">
                            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path
                                        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"
                                        fill="#292D32"></path>
                                </g>
                            </svg>
                        </div>
                        <span class="d-none focus-border">
                            <i></i>
                        </span>
                    <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>


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