<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

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

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

function submit() {
    form.put(route('dynamics.participant.update', props.dynamicId));
}
</script>

<template>
    <div class="c-display-name-form">
        <h4 class="c-display-name-form__title">
            Display Name for {{ participant.name }}
        </h4>
        <form @submit.prevent="submit" class="c-display-name-form__form">
            <div class="c-display-name-form__field">
                <label
                    for="display_name"
                    class="c-display-name-form__label"
                >
                    Dynamic-specific Display Name
                </label>
                <input
                    v-model="form.display_name"
                    id="display_name"
                    type="text"
                    class="c-display-name-form__input"
                />
                <div
                    v-if="form.errors.display_name"
                    class="c-display-name-form__error"
                >
                    {{ form.errors.display_name }}
                </div>
            </div>

            <div class="c-display-name-form__actions">
                <button
                    type="submit"
                    :disabled="form.processing"
                    class="c-display-name-form__submit-btn"
                >
                    Save
                </button>
            </div>
        </form>
    </div>
</template>

<style scoped>
@reference '../../css/app.css';

.c-display-name-form {
    @apply mt-8;
}

.c-display-name-form__title {
    @apply text-lg font-medium;
    color: var(--foreground);
}

.c-display-name-form__form {
    @apply mt-4 space-y-4;
}

.c-display-name-form__field {
    @apply block;
}

.c-display-name-form__label {
    @apply block text-sm font-medium;
    color: var(--foreground);
}

.c-display-name-form__input {
    @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
    border-color: var(--border);
    background-color: var(--background);
    color: var(--foreground);
}

.c-display-name-form__error {
    @apply text-sm;
    color: var(--destructive);
}

.c-display-name-form__actions {
    @apply flex items-center gap-4;
}

.c-display-name-form__submit-btn {
    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900;
    background-color: var(--primary);
    color: var(--primary-foreground);

    &:hover {
        opacity: 0.9;
    }
}
</style>
