Files

39 lines
1.6 KiB
Vue

<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { computed } from 'vue';
import ProjectTemplateForm from '@/components/projects/ProjectTemplateForm.vue';
import { useLocalization } from '@/composables/useLocalization';
import AppLayout from '@/layouts/AppLayout.vue';
import { index, show } from '@/routes/projects';
import { create } from '@/routes/projects/templates';
import type { BreadcrumbItem, ProjectTemplatesCreatePageProps } from '@/types';
const props = defineProps<ProjectTemplatesCreatePageProps>();
const { t } = useLocalization();
const breadcrumbs = computed<BreadcrumbItem[]>(() => [
{ title: t('navigation.projects'), href: index() },
{ title: props.project.name, href: show(props.project.id) },
{ title: t('projects.saveTemplate'), href: create(props.project.id) },
]);
</script>
<template>
<AppLayout :breadcrumbs="breadcrumbs">
<Head :title="t('templates.createTitle', { project: project.name })" />
<div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-6xl">
<header class="gap-stack grid">
<h1 class="text-headline-mobile md:text-headline break-words">
{{ t('templates.createTitle', { project: project.name }) }}
</h1>
<p class="text-muted-foreground">
{{ t('templates.createDescription') }}
</p>
</header>
<ProjectTemplateForm
:key="project.id"
:project="project"
:copy-area-options="copyAreaOptions"
/>
</div>
</AppLayout>
</template>