<script setup>
import { useRouter } from 'vue-router';
import { useForm } from '@Services/Api';
import { apiTo, transl, viewTo } from './Module';

import IconButton from '@Holos/Button/Icon.vue';
import PageHeader from '@Holos/PageHeader.vue';
import Form from './Form.vue';

const router = useRouter();

const form = useForm({
  curp: '',
  name: '',
  tutor: '',
  photo: null,
});

function submit() {
  form
    .transform((data) => ({ ...data }))
    .post(route('members.store'), {
      onSuccess: () => {
        Notify.success(transl('create.onSuccess'));
        router.push(viewTo({ name: 'index' }));
      },
    });
}
</script>

<template>
    <PageHeader :title="transl('create.title')">
        <RouterLink :to="viewTo({ name: 'index' })">
            <IconButton
                class="text-white"
                icon="arrow_back"
                :title="$t('return')"
                filled
            />
        </RouterLink>
    </PageHeader>
    <Form
        action="create"
        :form="form"
        @submit="submit"
    >
    </Form>
</template>
