cl-deck-builder2/templates/inventory/advanced-search.html

<div class="w3-row is-hidden" id="advanced-search">
  <!-- First half: Text Inputs -->
  <table class="table w3-striped" style="border-top:none;border-bottom:none">
    <thead>
      <tr class="w3-dark-blue">
        <th>Archetype</th>
        <th>Attribute</th>
        <th>Race</th>
        <th>Frame</th>
        <th>Type</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class="w3-select  w3-padding"
                  id="archetype" name="archetype"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="">None</option>
            {% for name in search-params.archetype %}
            <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <select class="w3-select  w3-padding"
                  id="attribute" name="attribute"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="">None</option>
            {% for name in search-params.attribute %}
            <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <select class="w3-select  w3-padding"
                  id="race" name="race"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="">None</option>
            {% for name in search-params.race %}
            <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <select class="w3-select  w3-padding"
                  id="frame-type" name="frame-type"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="">None</option>
            {% for name in search-params.frame-type %}
            <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <select class="w3-select  w3-padding"
                  id="type" name="type"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="">None</option>
            {% for name in search-params.type %}
            <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <button class="w3-btn "
                  type="button"
                  onclick="document.getElementById('search-form').reset()">
            Reset
          </button>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Second half: Numeric Inputs -->
  <table class="table w3-striped" style="border-top:none;border-bottom:none">
    <thead>
      <tr class="w3-dark-blue">
        <th class="w3-col s3">Passcode</th>
        <th class="w3-col s2">Scale</th>
        <th class="w3-col s2">Level</th>
        <th class="w3-col s2">DEF</th>
        <th class="w3-col s2">ATK</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="w3-col s3">
          <input class="input "
                 id="passcode" name="passcode" type="number"
                 hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
        </td>

        <td class="w3-col s2">
          <select class="w3-select  w3-padding"
                  style="width:20%; display:inline-block;"
                  id="scale-kind" name="scale-kind"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="eq">==</option>
            <option value="lt">&lt;</option>
            <option value="gt">&gt;</option>
            <option value="le">&lt;=</option>
            <option value="ge">&gt;=</option>
          </select>

          <input class="input "
                 style="width:75%; display:inline-block;"
                 name="scale" id="scale" type="number"
                 hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
        </td>
        <td class="w3-col s2">
          <select class="w3-select  w3-padding"
                  style="width:20%; display:inline-block;"
                  id="level-kind" name="level-kind"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="eq">==</option>
            <option value="lt">&lt;</option>
            <option value="gt">&gt;</option>
            <option value="le">&lt;=</option>
            <option value="ge">&gt;=</option>
          </select>
          <input class="input "
                 style="width:75%; display:inline-block;"
                 id="level" name="level" type="number"
                 hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
        </td>
        <td class="w3-col s2">
          <select class="w3-select  w3-padding"
                  style="width:20%; display:inline-block;"
                  id="def-kind" name="def-kind"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="eq">==</option>
            <option value="lt">&lt;</option>
            <option value="gt">&gt;</option>
            <option value="le">&lt;=</option>
            <option value="ge">&gt;=</option>
          </select>
          <input class="input "
                 style="width:75%; display:inline-block;"
                 id="def" name="def" type="number"
                 hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
        </td>
        <td class="w3-col s2">
          <select class="w3-select  w3-padding"
                  style="width:20%; display:inline-block;"
                  id="atk-kind" name="atk-kind"
                  hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
            <option value="eq">==</option>
            <option value="lt">&lt;</option>
            <option value="gt">&gt;</option>
            <option value="le">&lt;=</option>
            <option value="ge">&gt;=</option>
          </select>
          <input class="input "
                 style="width:75%; display:inline-block;"
                 id="atk" name="atk" type="number"
                 hx-post="/inventory/search" hx-target="#search-results" hx-trigger="change">
        </td>
      </tr>
    </tbody>
  </table>
</div>