<script setup>
const props = defineProps({ formData: Object, event: Object })
const emit = defineEmits(['next', 'back'])
</script>

<template>
    <div>
        <h3>Allergien & Ernährung</h3>
        <table class="form-table">
            <tr><td>Allergien:</td><td><input type="text" v-model="props.formData.allergien" /></td></tr>
            <tr>
                <td>
                    Letzte Teranus-Impfung:
                    <span style="display: block; font-size: 0.8rem; color: #6b7280; margin-top: 4px;">Lass das Feld frei, wenn die Information nicht vorliegt oder du diese nicht mitteilen willst</span>
                </td><td><input type="date" v-model="props.formData.tetanusVaccination" /></td></tr>




            <tr><td>Unverträglichkeiten:</td><td><input type="text" v-model="props.formData.intolerances" /></td></tr>
            <tr>
                <td>
                    Medikamente:<br />
                    <span style="display: block; font-size: 0.8rem; color: #6b7280; margin-top: 4px;">Bitte in ausreichender Menge mitbringen</span>
                </td>
                <td>
                    <input type="text" v-model="props.formData.medikamente" />
                </td>
            </tr>
            <tr>
                <td>Ernährungsweise:</td>
                <td>
                    <select v-model="props.formData.eatingHabit">
                        <option
                            v-for="eatingHabit in props.event.eatingHabits"
                            :value="eatingHabit.data.slug">{{eatingHabit.data.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Anmerkungen:</td>
                <td><textarea rows="5" v-model="props.formData.anmerkungen" style="width: 100%;"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" class="btn-row">
                    <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
                    <button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
                </td>
            </tr>
        </table>
    </div>
</template>
