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

{% assign header = site.data.header[lang].data %}

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

<style>
    .nav_menu_bar{
        z-index: 99;
        cursor: pointer;
    }
</style>
<nav  class="result_navbar_section navbar-expand-lg navbar-dark" style="background-color: #fff;">
    <a class="nav_menu_bar" href="/" title="{{dataToShow.tooltip}}" style="position: absolute; top:5px">
        <img src="/assets/images/wordfinder-result-logo.svg" alt="{{site.name}}" width="90%" height="90%">
    </a>
    <span class="mobile_bars">
        <div class="header_bars"></div>
        <div class="header_bars"></div>
        <div class="header_bars"></div>
    </span>
    <div id="open_list_bar">
        {%- if header.megaMenu -%}
        <div style="padding:2rem 0">
            <a class="cat_bar_logo_link" href="/" title="{{dataToShow.tooltip}}">
                <img class="cat_bar_img" width="30px" height="30px" src="{{ site.favicon | relative_url }}"
                    alt="{{site.name}}">
                <span class="cat_title">{{site.siteName}}</span>
            </a>
            <div class="close_bar_btn">
                <span aria-hidden="true">×</span>
            </div>
        </div>
        {%- for item in header.megaMenu.dropdown -%}
        <div class="list-items-container">
            <ul>
                <li class="list_cat_heading">{{item.categoryName}}</li>
                {%- for item in item.links -%}
                <li class="list_cat_links">
                    <a class="list_cat_name dropdown-item" href="{{item.url}}">
                        {{item.name}}
                    </a>
                </li>
                {%- endfor -%}
            </ul>
        </div>
        {%- endfor -%}
        {%- endif -%}
    </div>

    <section class="result_sticky_nav">
        <div class="pageHeading text-center">
            <h1 class="result_heading m-0 pb-0">
                {{dataToShow.h1}}</h1>
        </div>

        <div class="serachSection">
            <div class="position-relative serachBox mt-4">
                <form action="" id='form'>
                    <div class="container" id="containerWd">
                        <input type="text" placeholder="Enter up to 15 letters?" class="txtBox resultPageTxtBox"
                            value='' name="search" maxlength="15" value required autocomplete="off">
                        <div class="letter-close-button-commonPage">
                            <svg width="35px" height="35px" 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>
                        <input type="submit" class="serachBtn resultPageSearchBtn" id="serach" value>
                        <div class="dictonaryDropdown">
                            <select class="form-select select_dropDown2 resultPageDropdown2" 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>
                </form>
            </div>
        </div>
    </section>

</nav>

<div class="container" id="result-page-data">
    {% include wordgames/words-data/words-data.html %}

</div>