<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import CreateLedgerForm from '@/components/CreateLedgerForm.vue';

defineOptions({
    layout: (props: any) => ({
        breadcrumbs: [
            {
                title: 'Dynamics',
                href: route('dynamics.index'),
            },
            {
                title: props.dynamic.name,
                href: route('dynamics.show', props.dynamic.id),
            },
            {
                title: 'Create Ledger',
                href: route('dynamics.ledgers.create', props.dynamic.id),
            },
        ],
    }),
});

const props = defineProps<{
    dynamic: {
        id: number;
        name: string;
    };
}>();
</script>

<template>
    <Head title="Create Ledger" />

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <CreateLedgerForm :dynamic-id="dynamic.id" />
        </div>
    </div>
</template>
