<template>
  <div v-if="visible" class="modal modal-open">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
      <form @submit.prevent="emit('submit')" class="space-y-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text">Nom du site</span>
          </label>
          <input
            v-model="form.name"
            type="text"
            placeholder="Ex: Usine principale"
            class="input input-bordered"
            required
          />
        </div>

        <SiteContactFormFields :form="props.site" />

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
          <button type="submit" class="btn btn-primary">
            Créer le site
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from 'vue'
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  site: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'submit'])

const form = toRefs(props.site)
</script>
