<div class="span-1">
  <fieldset>
    <form {{action 'search' on='submit'}}>
      <ul>
        <li>
          <label>Strains</label>
          {{
            x-select
            options=sortedStrains
            nameAttr='fullNameMU'
            multiple=true
            selected=selectedStrains
            update=(action "updateStrainSelection")
            placeholder="Select one or more strains"
          }}
        </li>
        <li>
          <button class="action button-green smaller right" {{action 'selectAllStrains'}}>
            Select All
          </button>
          <button class="action button-red smaller right" {{action 'deselectAllStrains'}}>
            Deselect All
          </button>
        </li>
        <li>
          <label>Characteristics</label>
          {{
            x-select
            options=sortedCharacteristics
            nameAttr='characteristicName'
            multiple=true
            selected=selectedCharacteristics
            update=(action "updateCharacteristicsSelection")
            placeholder="Select one or more characteristics"
          }}
        </li>
        <li>
          <button class="action button-green smaller right" {{action 'selectAllCharacteristics'}}>
            Select All
          </button>
          <button class="action button-red smaller right" {{action 'deselectAllCharacteristics'}}>
            Deselect All
          </button>
        </li>
        <li>
          <button type="submit" class="action button-gray smaller right">
            Search
          </button>
        </li>
      </ul>
    </form>
  </fieldset>
</div>