<div class="span-1">
  <fieldset>
    <form {{action 'search' on='submit'}}>
      <ul>
        <li>
          <label>Strains</label>
          {{
            x-select
            listItems=strains
            nameAttr="fullNameMU"
            update=(action "updateStrainSelection")
            placeholder="Select one ore more strains"
            multiple=true
            selected=selectedStrains
          }}
        </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>
          {{
            select-2
            multiple=true
            content=characteristics
            value=selectedCharacteristics
            optionValuePath="id"
            optionLabelPath="characteristicName"
            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>