<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import InputError from '@/components/InputError.vue';

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

const form = useForm({
    display_name: props.dynamic.pivot?.display_name ?? '',
});

function submit() {
    form.put(route('dynamics.participant.update', props.dynamic.id), {
        preserveScroll: true,
    });
}
</script>

<template>
    <form @submit.prevent="submit" class="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 border rounded-lg bg-card text-card-foreground">
        <div class="flex-1 w-full">
            <div class="font-medium text-sm mb-1">{{ dynamic.name }}</div>
            <Input
                v-model="form.display_name"
                class="w-full"
                placeholder="Enter custom display name"
                required
            />
            <InputError class="mt-1" :message="form.errors.display_name" />
        </div>
        <div class="sm:self-end">
            <Button type="submit" size="sm" :disabled="form.processing">
                Save
            </Button>
        </div>
    </form>
</template>
