<script setup>
import { transl } from './Module';

import PrimaryButton from '@Holos/Button/Primary.vue';
import Input from '@Holos/Form/Input.vue';
import PhotoUpload from '@App/PhotoUpload.vue';

/** Eventos */
const emit = defineEmits(['submit']);

/** Propiedades */
defineProps({
  action: {
    default: 'create',
    type: String,
  },
  form: Object,
});

/** Métodos */
function submit() {
  emit('submit');
}
</script>

<template>
  <div class="w-full pb-2">
    <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
  </div>
  <div class="w-full">
    <form
      @submit.prevent="submit"
      class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
    >
      <Input
        v-model="form.curp"
        :id="$t('membership.curp')"
        type="text"
        :onError="form.errors.curp"
        required
        autofocus
      />
      <Input
        v-model="form.name"
        :id="$t('membership.name')"
        type="text"
        :onError="form.errors.name"
        required
      />
      <Input
        v-model="form.tutor"
        :id="$t('membership.tutor')"
        type="text"
        :onError="form.errors.tutor"
      />
      <PhotoUpload
        v-model="form.photo"
        :title="$t('membership.photo')"
        :onError="form.errors.photo"
        required
      />
      <slot />
      <div
        class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4"
      >
        <PrimaryButton
          v-text="$t(action)"
          :class="{ 'opacity-25': form.processing }"
          :disabled="form.processing"
        />
      </div>
    </form>
  </div>
</template>