<script setup>
  import { ref } from 'vue'
  import AisForm from '@/components/form/AisForm.vue'
  import AisInput from '@/components/input/AisInput.vue'
  import AisButton from '@/components/button/AisButton.vue'

  const field = ref('Hello')
  const count = ref(0)
</script>

<template>
  <AisForm @submit="count++" class="grid grid-cols-1 gap-4">
    <div class="flex gap-4">
      <AisInput v-model="field" class="w-1/4" />
      <AisButton type="submit" hover fast press>Submit</AisButton>
      <AisButton @click="count=0" variant="secondary" hover fast press>Clear count</AisButton>
    </div>
    <div class="text-xl">
      Submit count: {{count}}
    </div>
  </AisForm>
</template>
