{% assign wordLength = page.length %}

<div class="content">
  <div class="row m-0">
    <div class="col-md-6 mx-auto p-0">
      <div class="main-wrapper">
        <form id="form">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Letters</label>
                <input
                  class="form-control"
                  autocorrect="off"
                  autocomplete="off"
                  maxlength="20"
                  type="text"
                  required
                  id="phrase"
                  name="phrase"
                  placeholder="Enter Letters"
                />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Dictionary</label>
                <select name="dict" id="dict" class="form-control">
                  <option value="Dictionary">Dictionary</option>
                  <option value="twl06">TWL06 (US, Canada, Thailand)</option>
                  <option selected value="sowpods">Full Dictionary</option>
                  <option value="wwf">Enable (Words With Friends)</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Contains</label>
                <input
                  class="form-control"
                  autocorrect="off"
                  autocomplete="off"
                  type="text"
                  id="contains"
                  name="contains"
                  value=""
                  placeholder="Contains Word"
                />
              </div>
            </div>
            <div class="col-md-6 d-none">
              <div class="form-group">
                <label>Sort</label>
                <select name="sort_dir" class="form-control" id="sort_dir">
                  <option selected="selected" value="asc">Ascending</option>
                  <option value="desc">Descending</option>
                </select>
              </div>
            </div>
            <div class="col-md-2 d-none">
              <div class="form-group">
                <label>Min Letters</label>
                <select
                  name="min_letters"
                  class="form-control"
                  id="min_letters"
                >
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option selected="selected" value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                </select>
              </div>
            </div>

            {%- if wordLength == nil -%}
            <div class="col-md-6">
              <div class="form-group">
                <label>Max Words</label>
                <select name="max_words" id="max_words" class="form-control">
                  <option value="2" selected="selected" aria-readonly="true">
                    2
                  </option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="4">5</option>
                </select>
              </div>
            </div>
            {%- endif -%}

            <div class="col-md-6">
              <div class="form-group">
                <label>Results</label>
                <select
                  name="max_results"
                  id="max_results"
                  class="form-control"
                >
                  <option selected="selected" value="250">250</option>
                  <option value="500">500</option>
                  <option value="1000">1000</option>
                  <option value="2000">2000</option>
                  <option value="2500">2500</option>
                </select>
              </div>
            </div>
          </div>
          <button
            type="submit"
            class="anagram-button btn btn-md btn-primary mt-3"
          >
            FIND ANAGRAMS
          </button>
        </form>
      </div>
      <h3 class="heading-result" style="display: none">Results</h3>
      <div class="row" id="results"></div>
      <div class="col-md-12" id="main-results"></div>

      <!-- <div
        class="col-lg-3 col-md-4 col-sm-6 col-xs-6"
        id="loadMore"
        style="display: none"
        onclick="showLoader()"
      >
        Load More
      </div> -->
      <div
        class="col-md-12"
        id="lazy-loader"
        style="display: none; justify-content: center"
      >
        <div class="loader">
          <img src="/assets/images/manpreet-spinner.gif" />
        </div>
      </div>
      <div class="mt-3 error-message" style="display: none">
        <p class="alert alert-danger p-3">
          Sorry!! We could not find any results matching your criteria
        </p>
      </div>
    </div>
  </div>

  <div id="word-length" data-word_length="{{page.length}}"></div>
</div>