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

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

const breadcrumbs = [
    {
        name: 'Dynamics',
        href: route('dynamics.index'),
    },
    {
        name: props.dynamic.name,
        href: route('dynamics.show', props.dynamic.id),
    },
    {
        name: 'Create Ledger',
        href: route('dynamics.ledgers.create', props.dynamic.id),
    },
];
</script>

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

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