<script setup>
import {ref} from 'vue'
import AisField from '@c/field/AisField.vue'
import AisInputGroup from '@/components/input-group/AisInputGroup.vue'
import AisAddon from '@c/addon/AisAddon.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisSelect from '@c/select/AisSelect.vue'
import AisButton from '@/components/button/AisButton.vue'
</script>

<template>
  <AisField label="Accessibility" label-mode="sr-only" >
    <AisInputGroup class="flex-1">
      <AisAddon icon="filter" class="px-4" />
      <AisInput placeholder="Testing..." size="sm" class="flex-auto grow-3" />
      <label for="select1" class="sr-only">Select 1</label>
      <AisSelect id="select1" size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three']" class="grow"
      />
      <label for="select2" class="sr-only">Select 2</label>
      <AisSelect id="select2" size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three', 'Really really long option']" class="grow"
      />
      <AisButton variant="secondary" size="sm" hover press>Do it!</AisButton>
    </AisInputGroup>
  </AisField>
</template>

