{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign dataToShow = site.data.[page.folderName][lang][file] %}
{%- assign CustomColor = site.data.theme.colors -%}
<!-- starting landingPage -->
<div class="pageHeaderBg">
<div class="container">
<div class="pageHeading text-center" style="margin:22px 0px">
<h1 class="heading pb-0 mb-3">
{{dataToShow.h1}}</h1>
{%- if dataToShow.h2 != "" -%}
<h2>
{{dataToShow.h2}}</h2>
{%- endif -%}
</div>
</div>
<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 style="position: relative;">
<input style="border-radius: {{CustomColor.inputFieldBorder}}" 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">
<i class="ltr-cls-btn bi bi-x-circle-fill"></i>
</div>
</div>
<input
style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
type="submit" class="serachBtn" id="serach" value="">
<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>
<br>
<div class="wrapper_dropDown d-flex justify-content-end" style="gap:15px">
<div class="advancedFilter" style="position: relative;" onclick="myFunction()">
<input type="button" value="Advanced Filter" class="filterButton">
<div class="angle-arrow2"
style="background: url(/assets/images/angle-arrow-down.svg) no-repeat center center; background-size: contain;">
</div>
</div>
</div>
<div class="fillterWrapper hide">
<div class="text-right times" style="cursor: pointer;">
<img src="/assets/images/window-close.png" alt="window-close-icon" height="12px"
width="12px">
</div>
<div class="startsWith">
<label for="startsWith">Starts With</label>
<input autocomplete="off" type="text" id="startsWith" placeholder="Prefix" value=""
name="prefix">
<div class="filter-tooltip"
data-tip="Find words that start with these letters(AB-> Able)">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="mustInclude">
<label for="mustInclude">Must Contains </label>
<input autocomplete="off" type="text" id="mustInclude" placeholder="Contains"
name="contains">
<div class="filter-tooltip" data-tip="Words that contain letters in this order(ab)">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="endsWith">
<label for="endsWith">End With</label>
<input autocomplete="off" type="text" id="endsWith" placeholder="Suffix" name="suffix">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
data-tip="Filter for words that ends with these letters">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="exculdeWith">
<label for="exculdeWith">Exculde</label>
<br>
<input autocomplete="off" type="text" id="exculdeWith" placeholder="Exculde" value=""
name="exculde">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
data-tip="Only words that not contain the letters you enter here">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="inculdeWith">
<label for="inculdeWith">Inculde</label>
<br>
<input autocomplete="off" type="text" id="inculdeWith" placeholder="Inculde" value=""
name="inculde">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
data-tip="Only words that contain the letters you enter here">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="wordLength same">
<label for="wordLength">Word Length </label>
<input autocomplete="off" type="text" class="filter_val" id="wordLength"
placeholder="Length" name="length" value="">
<div style="margin-top: 1.2rem; gap:5px" class="d-flex w-100">
<input type="button" value="Clear" class="clearFilter btn-info text-white"
style="background-color: {{CustomColor.inputButtonBg}};">
<input type="submit" value="Apply" class="btn-info text-white"
style="background-color: {{CustomColor.inputButtonBg}};">
</div>
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
data-tip="Filter for words with this length">
<i class="bi bi-question-circle"></i>
</div>
</div>
</div>
</form>
{%- if page.wordle == 'solver' -%}
<!-- Solve wordle quickly using our wordle solver -->
<label class="d-block m-0 mt-4 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>
</label>
{%- endif -%}
</div>
</div>
</div>
</div>
<!-- close landingPage -->
<script>
const clearFilter = document.querySelector('.clearFilter')
let startsWith = document.getElementById('startsWith')
let mustInclude = document.getElementById('mustInclude')
let endsWith = document.getElementById('endsWith')
let wordLength = document.getElementById('wordLength')
clearFilter.addEventListener('click', () => {
startsWith.value = ''
mustInclude.value = ''
endsWith.value = ''
exculdeWith.value = ''
wordLength.value = ''
})
const advancedFilter = document.querySelector('.advancedFilter')
const fillterWrapper = document.querySelector('.fillterWrapper')
advancedFilter.addEventListener('click', () => {
fillterWrapper.classList.toggle('actives')
if (fillterWrapper.classList.contains('actives')) {
fillterWrapper.style.display = "block"
fillterWrapper.style.zIndex = "999";
fillterWrapper.style.top = "90px";
fillterWrapper.style.background = "#fff";
fillterWrapper.style.boxShadow = "0 0 5px rgb(0 0 0 / 40%)"
fillterWrapper.style.padding = "15px 15px"
fillterWrapper.style.borderRadius = "15px"
fillterWrapper.style.height = "auto";
fillterWrapper.style.position = "absolute";
fillterWrapper.style.right = "-16px"
fillterWrapper.style.margin = "1rem 0"
fillterWrapper.style.flexDirection = "column";
fillterWrapper.style.width = "240px"
fillterWrapper.style.display = "inline-flex !important"
fillterWrapper.style.gap = "5px"
}
fillterWrapper.classList.remove('hide')
})
function closeModal() {
fillterWrapper.classList.remove('actives')
fillterWrapper.classList.add('hide')
}
const close = document.querySelector('.times')
close.addEventListener('click', () => {
closeModal()
})
</script>