<template>
  <div class="sm:grid sm:grid-cols-12 sm:items-start sm:gap-4 pt-4">
    <label :for="field.name" class="mt-1.5 col-span-2 text-sm font-medium text-gray-800">
      {{ field.label }}

      <span v-if="field.options?.required">*</span>
    </label>

    <div class="col-span-10">
      <TextField :field="field" v-model="model" v-if="field.type === 'text'"/>
      <SelectField :field="field" v-model="model" v-if="field.type === 'select'"/>
      <RepeaterField :field="field" v-model="model" :wire="wire" v-if="field.type === 'repeater'"/>
      <LinkField :field="field" v-model="model" v-if="field.type === 'button'"/>
      <WysiwygField :field="field" v-model="model" v-else-if="field.type === 'wysiwyg'"/>
      <RelateableField :field="field" v-model="model" v-else-if="field.type === 'related'"/>
      <MediaField :field="field" v-model="model" :wire="wire" v-else-if="field.type === 'media'"/>
    </div>
  </div>
</template>

<script setup>
import TextField from "./Fields/TextField.vue";
import SelectField from "./Fields/SelectField.vue";
import RepeaterField from "./Fields/RepeaterField.vue";
import LinkField from "./Fields/LinkField.vue";
import WysiwygField from "./Fields/WysiwygField.vue";
import RelateableField from "./Fields/RelateableField.vue";
import MediaField from "./Fields/MediaField.vue";

const props = defineProps({
  field: Object,
  wire: {},
})

const model = defineModel()
</script>