cl-deck-builder2/templates/cards/_advanced_search_attrs.html

<div class="field is-horizontal">
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            form="search-form"
            hx-include="[name='search-form']"
            hx-post="/cards/search"
            hx-target="#search-results"
            hx-trigger="change"
            name="archetype">
            <option value="">Archetype</option>
            {% for option in search-params.archetype %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-narrow">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            form="search-form"
            hx-include="[name='search-form']"
            hx-post="/cards/search"
            hx-target="#search-results"
            hx-trigger="change"
            name="attribute">
            <option value="">Attribute</option>
            {% for option in search-params.attribute %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-narrow">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            form="search-form"
            hx-include="[name='search-form']"
            hx-post="/cards/search"
            hx-target="#search-results"
            hx-trigger="change"
            name="race">
            <option value="">Race</option>
            {% for option in search-params.race %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-narrow">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            form="search-form"
            hx-include="[name='search-form']"
            hx-post="/cards/search"
            hx-target="#search-results"
            hx-trigger="change"
            name="frame-type">
            <option value="">Frame Type</option>
            {% for option in search-params.frame-type %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-narrow">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            form="search-form"
            hx-include="[name='search-form']"
            hx-post="/cards/search"
            hx-target="#search-results"
            hx-trigger="change"
            name="type">
            <option value="">Type</option>
            {% for option in search-params.type %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-narrow">
      <div class="control is-expanded">
        <input class="input"
               form="search-form"
               hx-include="[name='search-form']"
               hx-post="/cards/search"
               hx-target="#search-results"
               hx-trigger="change"
               min="0"
               name="passcode"
               placeholder="Passcode"
               type="number">
      </div>
    </div>
  </div>
</div>