codex-mythica/views/partials/search_form.ejs

<%
  query = query || {};
%>

  <form class='searchForm' name='searchForm' method='GET' action='/search'>
    <fieldset class='searchForm-searchSet'>
      <legend>Search</legend>
      <ul>
        <li>
          <label for='search_for'>Search for</label>
          <ul>
            <li>
              <input type='search' title='Text to search for' value='<%= query && query.search_for ? query.search_for : "" %>' name='search_for' />
            </li>
            <li>
              <label for='search_in'>in</label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='search_in' value='name'
                  <%- query && (!query.search_in || query.search_in.indexOf('name') > -1) ? "checked='checked'" : '' %> />&nbsp;Name
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='search_in' value='ability'
                  <%- query && (!query.search_in || query.search_in.indexOf('ability') > -1) ? "checked='checked'" : '' %> />&nbsp;Ability
              </label>
            </li>
          </ul>
        </li>
      </ul>
    </fieldset>

    <fieldset class='searchForm-filterSet'>
      <legend class='js-ulToggle'>Filters</legend>
      <p class="searchForm-filterNotes js-searchForm-filterNotes">
        Tap or click on a filter name to toggle all of the items in that filter.
      </p>
      <ul class='js-ulToggle-list'>
        <li>
          <label for='pantheons' class='js-checkToggle'>Pantheons</label>
          <ul>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='aztec'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('aztec') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/aztec.png" alt="Aztec" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='egyptian'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('egyptian') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/egyptian.png" alt="Egyptian" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='eternal'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('eternal') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/eternal.png" alt="Eternal" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='greek'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('greek') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/greek.png" alt="Greek" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='japanese'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('japanese') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/japanese.png" alt="Japanese" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='norse'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('norse') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/norse.png" alt="Norse" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='old-ones'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('old-ones') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/old-ones.png" alt="Old Ones" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='pantheons' value='sumerian'
                  <%- query && ((query.pantheons && query.pantheons.indexOf('sumerian') > -1) || !query.pantheons || JSON.stringify(query.pantheons) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-pantheon" src="/images/pantheons/sumerian.png" alt="Sumerian" />
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label for='elements' class='js-checkToggle'>Elements</label>
          <ul>
            <li>
              <label>
                <input type='checkbox' name='elements' value='water'
                  <%- query && ((query.elements && query.elements.indexOf('water') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/water.png" alt="Water" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='elements' value='fire'
                  <%- query && ((query.elements && query.elements.indexOf('fire') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/fire.png" alt="Fire" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='elements' value='earth'
                  <%- query && ((query.elements && query.elements.indexOf('earth') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/earth.png" alt="Earth" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='elements' value='air'
                  <%- query && ((query.elements && query.elements.indexOf('air') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/air.png" alt="Air" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='elements' value='law'
                  <%- query && ((query.elements && query.elements.indexOf('law') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/law.png" alt="Law" />
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='elements' value='chaos'
                  <%- query && ((query.elements && query.elements.indexOf('chaos') > -1) || !query.elements || JSON.stringify(query.elements) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<img
                  class="searchForm-element" src="/images/elements/chaos.png" alt="Chaos" />
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label for='races' class='js-checkToggle'>Races</label>
          <ul>
            <li>
              <label>
                <input type='checkbox' name='races' value='creature'
                  <%- query && ((query.races && query.races.indexOf('creature') > -1) || !query.races || JSON.stringify(query.races) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Creature
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='races' value='deity'
                  <%- query && ((query.races && query.races.indexOf('deity') > -1) || !query.races || JSON.stringify(query.races) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Deity
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='races' value='god'
                  <%- query && ((query.races && query.races.indexOf('god') > -1) || !query.races || JSON.stringify(query.races) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;God
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='races' value='goddess'
                  <%- query && ((query.races && query.races.indexOf('goddess') > -1) || !query.races || JSON.stringify(query.races) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Goddess
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='races' value='titan'
                  <%- query && ((query.races && query.races.indexOf('titan') > -1) || !query.races || JSON.stringify(query.races) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Titan
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label for='types' class='js-checkToggle'>Types</label>
          <ul>
            <li>
              <label>
                <input type='checkbox' name='types' value='battleground'
                  <%- query && ((query.types && query.types.indexOf('battleground') > -1) || !query.types || JSON.stringify(query.types) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Battleground
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='types' value='entity'
                  <%- query && ((query.types && query.types.indexOf('entity') > -1) || !query.types || JSON.stringify(query.types) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Entity
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='types' value='intervention'
                  <%- query && ((query.types && query.types.indexOf('intervention') > -1) || !query.types || JSON.stringify(query.types) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Intervention
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label for='releases' class='js-checkToggle'>Releases</label>
          <ul>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01c'
                  <%- query && ((query.releases && query.releases.indexOf('s01c') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<strong>Clash of the Gods</strong>
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01r'
                  <%- query && ((query.releases && query.releases.indexOf('s01r') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<strong>Cthulhu Rises</strong>
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01n'
                  <%- query && ((query.releases && query.releases.indexOf('s01n') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;<strong>Nemesis</strong>
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01d'
                  <%- query && ((query.releases && query.releases.indexOf('s01d') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Demo
              </label>
            </li>
            <li>
              <label>
                <input type='checkbox' name='releases' value='s01p'
                  <%- query && ((query.releases && query.releases.indexOf('s01p') > -1) || !query.releases || JSON.stringify(query.releases) === '[]') ? "checked='checked'" : '' %>
                  />&nbsp;Promotional
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label for='sort_by'>Sort By</label>
          <ul>
            <li>
              <label>
                <select name='sort_by'>
                  <option value='name'
                    <%- query && ((query.sort_by && query.sort_by === 'name') || !query.sort_by) ? "selected='selected'" : '' %>>Name</option>
                  <option value='num'
                    <%- query && (query.sort_by && query.sort_by === 'num') ? "selected='selected'" : '' %>>Card Number</option>
                  <option value='attack'
                    <%- query && (query.sort_by && query.sort_by === 'attack') ? "selected='selected'" : '' %>>Attack</option>
                  <option value='defense'
                    <%- query && (query.sort_by && query.sort_by === 'defense') ? "selected='selected'" : '' %>>Defense</option>
                  <option value='power'
                    <%- query && (query.sort_by && query.sort_by === 'power') ? "selected='selected'" : '' %>>Power</option>
                  <option value='pantheon'
                    <%- query && (query.sort_by && query.sort_by === 'pantheon') ? "selected='selected'" : '' %>>Pantheon</option>
                  <option value='race'
                    <%- query && (query.sort_by && query.sort_by === 'race') ? "selected='selected'" : '' %>>Race</option>
                  <option value='type'
                    <%- query && (query.sort_by && query.sort_by === 'type') ? "selected='selected'" : '' %>>Type</option>
                </select>
              </label>
            </li>
            <li>
              <label>
                <input type='radio' name='sort_order' value='asc'
                  <%- query && ((query.sort_order && query.sort_order === 'asc') || !query.sort_order) ? "checked='checked'" : '' %>
                  />&nbsp;Ascending
              </label>
            </li>
            <li>
              <label>
                <input type='radio' name='sort_order' value='asc'
                  <%- query && (query.sort_order && query.sort_order === 'desc') ? "checked='checked'" : '' %>
                  />&nbsp;Descending
              </label>
            </li>
          </ul>
        </li>
      </ul>

    </fieldset>
    <fieldset class='searchForm-controlSet'>
      <legend>Controls</legend>
      <ul>
        <li>
          <input type='submit' value='Search' />
        </li>
        <li>
          <input type='reset' value='Clear' />
        </li>
      </ul>
    </fieldset>

    <!--

    </label><br />
-->
  </form>