{%- if site.noResultPage or page.noResultPage -%}
<div class="serachSection" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}"
    data-ablank="{{page.ablank}}">
    <div class="position-relative serachBox">
        <form id='form' method="GET">
            <div class="container-fluid" id="containerWd">
                <div class="txt-box-container" style="position: relative;">
                    <input type="text"
                        placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter up to 15 letters?{% endif %}"
                        class="txtBox" value='' name="search"
                        maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" required
                        autocomplete="off">
                    <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>
                </div>
                <input style="background-color: {{CustomColor.inputButtonBg}};" type="submit" class="serachBtn"
                    id="serach">
                <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 class="container" id="result-page-data">
                {%- include wordgames/advanced-filter/advanced-filter.html -%}
            </div>

            {%- if page.wordle == 'solver' -%}
            <div class="d-flex w-100 justify-content-center m-0 mt-5 text-center" style="font-size:16px">
                <a onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Try Wordle Solver'});"
                    class="trywordle" href="/wordle-solver">Try Wordle Solver</a>
            </div>
            {%- endif -%}
        </form>
    </div>
</div>

{%- else -%}
<div class="container-fluid" id="containerWd">
    <div class="serachSection">
        <div class="position-relative serachBox">
            <form action="{% if page.url == '/' %}/result{% else %}{{page.url}}/result{% endif %}" id='form'
                method="GET">
                <div class="txt-box-container" style="position: relative;">
                    <input type="text"
                        placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter up to 15 letters?{% endif %}"
                        class="txtBox" value='' name="search"
                        maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" required
                        autocomplete="off">
                    <span class="d-none focus-border">
                        <i></i>
                    </span>
                    <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>
                </div>
                <input style="background-color: {{CustomColor.inputButtonBg}};" type="submit" class="serachBtn"
                    id="serach">
                <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>

                {%- include wordgames/advanced-filter/advanced-filter.html -%}

                {%- if page.wordle == 'solver' -%}
                <div class="d-flex w-100 justify-content-center m-0 mt-5 text-center" style="font-size:16px">
                    <a onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Try Wordle Solver'});"
                        class="trywordle" href="/wordle-solver">Try Wordle Solver</a>
                </div>
                {%- endif -%}
            </form>
        </div>
    </div>
</div>
{%- endif -%}


{%- if site.noResultPage or page.noResultPage -%}
<div class="container" id="containerWd">
    {% include wordgames/words-data/words-data.html %}
</div>
{%- endif -%}