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

<link rel="stylesheet" href="http://127.0.0.1:4000/assets/css/bootstrap-icons.css">
<link rel="stylesheet" href="/assets/css/wordGroup.css">

<style>
  .pageHeaderBg {
    margin-bottom: 0px;
  }

  .tab_link_wrapper .tab_link {
    color: #000 !important;
  }

  .fillterWrapper {
    flex-wrap: unset;
    gap: 10px;
    align-items: unset;
    justify-content: unset;
  }
  .letter-close-button-commonPage{
    display: none !important;
  }

  .allGroupWords>.wordListHeading {
    background: var(--black-color);
    padding: 10px 0px 5px 25px;
    border-top-right-radius: 13px;
    border-top-left-radius: 13px;
    color: #fff;
}
.wordList>ul li {
    padding: 8px 0;
    background: #f8f9fa;
    border-radius: 5px;
    margin: 6px 6px;
    width: auto;
    min-width: 100px;
    text-align: center;
    border: solid 1px var(--black-color);
    box-shadow: 2px 2px 1px 0px var(--black-color);
}
  .fillterWrapper input[type='text'] {
    padding: 5px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .fillterWrapper input {
    padding: 5px 12px !important;
  }
  .filter-icon, .sortup-icon{
    background: darkblue;
    border-radius: 50px;
    width: 50px;
    padding: 1rem;
    color: #fff;
    text-align: center;
  }
  @media (max-width: 768px) {
    .fillterWrapper {
    padding: 1rem 3rem !important;
  }
    
  }
</style>

<div class="pageHeaderBg">
  <div class="container"></div>
  <div class="container-fluid" id="containerWd">
    <div class="serachSection">
      <div class="position-relative serachBox">
        <form action="" id="form" method="GET">
          <div style="position: relative">
            <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
              placeholder="Enter up to 15 letters?" class="txtBox" value="" name="search" maxlength="15" required
              autocomplete="off" />
            <span class="focus-border">
              <i></i>
            </span>

            <div class="letter-close-button-commonPage">
              <i class="ltr-cls-btn bi bi-x-circle-fill"></i>
            </div>
          </div>
          <input style="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">TWL06 (US, Canada, Thailand)</option>
              <option selected value="sowpods">SOWPODS (Uk and Others)</option>
              <option value="wwf">Enable (Words With Friends)</option>
            </select>
          </div>

          <div class="tab_link_wrapper" style="position: relative; display: none">
            <div id="tab-scroll" class="tab-scroll flex-row">
              <input type="button" name="" id="prev" class="prev tabsBg noOutline cursorPointer" value=" "
                style="display: none" />
              <div id="tab-container" class="search-container tab_container flex-row"></div>
              <input type="button" name="" id="next" class="next tabsBg noOutline cursorPointer" value=" "
                style="display: none" />
            </div>
          </div>
          <div class="wrapper_dropDown d-flex justify-content-end" style="gap: 15px">
            <div class="Advancedbtn mt-4" style="position: relative; margin-top: 10px" onclick="myFunction">
              <span class="filter_count" style="display: none"></span>
              <input type="button" value="Advanced Filter" class="filterButton" />
              <div class="angle-arrow"></div>
            </div>

            <div id="sort-select" style="display: none; margin-top: 10px">
              <select class="form-select sort-select" id="select_dropDown">
                <option selected="true" hidden id="alpha" value="alpha">
                  Sort by
                </option>
                <option id="alpha" value="alpha">A-Z</option>
                <option id="alpha" value="alpha">Z-A</option>
                <option id="alpha" value="alpha">Points</option>
              </select>
            </div>
          </div>

          <div id="fillterWrapper" class="fillterWrapper hide">
            <div class="text-right times w-100" style="cursor: pointer">
              <img loading="lazy" src="/assets/images/window-close.png" alt="window-close-icon" height="12px"
                width="12px" />
            </div>
            <div class="startsWith">
              <label data-toggle="tooltip" data-placement="top" title="Filter for words that starts with these letters"
                for="startsWith">Starts With</label>
              <br />
              <input type="text" id="startsWith" placeholder="Prefix" value="" name="prefix" />
            </div>
            <div class="mustInclude">
              <label for="mustInclude" data-toggle="tooltip" data-placement="top"
                title=" Words that contain letters in this order(ab)">Must Contains
              </label>
              <br />
              <input type="text" id="mustInclude" placeholder="Contains" name="contains" />
            </div>
            <div class="endsWith">
              <label for="endsWith" data-toggle="tooltip" data-placement="top"
                title="Filter for words that ends with these letters">End With</label>
              <br />
              <input type="text" id="endsWith" placeholder="Suffix" name="suffix" />
            </div>
            <div class="exculdeWith">
              <label data-toggle="tooltip" data-placement="top"
                title="Only words that not contain the letters you enter here" for="exculdeWith">Exculde</label>
              <br />
              <input type="text" id="exculdeWith" placeholder="Exculde" value="" name="exculde" />
            </div>
            <div class="inculdeWith">
              <label data-toggle="tooltip" data-placement="top"
                title="Only words that contain the letters you enter here" for="inculdeWith">Include</label>
              <br />
              <input type="text" id="inculdeWith" placeholder="Include" value="" name="include" />
            </div>
            <div class="wordLength">
              <label data-toggle="tooltip" data-placement="top" title="Filter for words with this length"
                for="wordLength">Word Length
              </label>
              <br />
              <input type="text" id="wordLength" placeholder="Length" name="length" />
              <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>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="container" id="containerWd">
  <div class="row pad">
    <div class="col-md-12">
      <div class="filters d-flex justify-content-between align-items-end pr-3">
        <div class="wordCount"></div>

        <div class="filterSortedIcons">
          <div class="filter-icon" onclick="myFunction()" data-toggle="tooltip" data-placement="top" title="Filter">
            <i class="bi bi-filter"></i>
          </div>
          <div class="sortup-icon" data-toggle="tooltip" data-placement="top" title="Sort">
            <i class="bi bi-sort-up"></i>
          </div>
        </div>
      </div>

      {%- if page.noAdsRefresh -%}
      <div class="main-loader"></div>
      <div class="main" data-value="null"></div>
      {%- else -%}
      <div class="main"></div>
      {%- endif -%}

      <div class="errorMsg"></div>
    </div>
  </div>
</div>
<script>
  const clearFilter = document.querySelector(".clearFilter");

  clearFilter.addEventListener("click", () => {
    startsWith.value = "";
    mustInclude.value = "";
    endsWith.value = "";
    exculdeWith.value = "";
    inculdeWith.value = "";
    wordLength.value = "";
  });

  const advancedFilter = document.querySelector(".Advancedbtn");
  const fillterWrapper = document.querySelector(".fillterWrapper");
  advancedFilter.addEventListener("click", () => {
    fillterWrapper.classList.toggle("actives");
    fillterWrapper.classList.remove("hide");
  });

  // document.addEventListener('click', (event) => {
  //     const withinBoundaries = event.composedPath().includes(advancedFilter)
  //     if (!withinBoundaries) {
  //         closeModal()
  //     }
  // }
  function myFunction() {
    fillterWrapper.classList.toggle('hide')
  }

  function closeModal() {
    fillterWrapper.classList.remove("actives");
    fillterWrapper.classList.add("hide");
  }

  const close = document.querySelector(".times");
  close.addEventListener("click", () => {
    closeModal();
  });
</script>