<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'
</script>

<template>
  <div class="flex gap-4">
    <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="w-36"
        />
        <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="w-36"
        />
      </AisInputGroup>
    </AisField>

    <AisField label="Field 2" label-mode="sr-only">
      <AisSelect size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three']" class="w-72"
      />
    </AisField>
  </div>
</template>

