<template>
  <div>
    <div class="grid gap-y-4 gap-x-8 grid-cols-2 items-baseline">
      <AisField for="foo" label="Field 1" required >
        <AisInput icon="user" />
      </AisField>

      <AisField for="bar" label="Field 2" label-mode="transparent" description="An example">
        <AisInput icon="edit" placeholder="Placeholder" />
      </AisField>

      <AisField for="baz" label="Field 3" description="An example">
        <AisInput icon="search" />
      </AisField>

      <AisField for="alpha" label="Field x" description="An example">
        <AisSelect icon="person" />
      </AisField>

      <AisField class="col-span-1" label="Error Test" required
        :errors="[
          'Field is only applicable on Tuesday.',
          'Field is required.'
        ]"
      >
        <AisInput invalid icon="calendar" placeholder="Specify on Tuesday..." />
      </AisField>

      <AisField class="col-span-1" label="Error Test 2" required
        errors="Field is only applicable on Tuesday."
      >
        <AisInput invalid icon="calendar" placeholder="Specify on Tuesday..." />
      </AisField>
    </div>

    <div class="mt-16 flex gap-">
      <AisField for="apple" label="Field 4" >
        <AisInput icon="search" />
      </AisField>

      <AisField for="pear" label="Field 5" label-mode="transparent" description="An example">
        <AisInput icon="search" />
      </AisField>

      <AisField for="strawberry" label="Field 6" description="An example">
        <AisInput icon="search" />
      </AisField>
    </div>
  </div>
</template>

<script setup>
  import AisField from '@/components/field/AisField.vue'
  import AisInput from '@/components/input/AisInput.vue'
  import AisSelect from '@/components/select/AisSelect.vue'


</script>
