<script setup>
let cosetta = {}

function add () {
  const ret = $fetch('/api/cosette', { method: 'post', body: cosetta })
  console.error(ret)
}

</script>
<template>
  <div class="modal" id="my-modal">
    <div class="modal-box">
      <h3 class="font-bold text-lg">Aggiungi una cosetta!</h3>
      <p class="py-4">Ziobilly</p>
      <form action="/api/cosette" method="post" enctype="multipart/form-data">
        <label class="label">
          <span class="label-text-alt">Alt label</span>
        </label>
        <input type="text" v-model='cosetta.name' name='name' placeholder="Name" class="input input-bordered w-full max-w-xs" />

        <input type="file" name='imgs' />

        <label class="label">
          <span class="label-text-alt">Description</span>
        </label>
        <textarea v-model='cosetta.description' name='description' class='textarea'></textarea>


        <div class="modal-action">
          <button class='btn btn-success' type='submit'>Add</button>
          <!-- <a @click='add' class='btn btn-success'>Add</a> -->
          <a href="#" class="btn">Close!</a>
        </div>
      </form>
    </div>
  </div>  
</template>