<script setup>
import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";

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

const acceptAll = () => {
    Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
    emit('next', STEP_ALLERGIES)
}

const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
</script>

<template>
    <div>
        <h3>Fotoerlaubnis</h3>
        <div v-for="[key, label] in [['socialmedia','Social Media'],['print','Printmedien'],['webseite','Webseite'],['partner','Partnerorganisationen'],['intern','Interne Zwecke']]"
             :key="key"
             style="margin-bottom: 10px;">
            <label style="display: flex; gap: 10px; cursor: pointer;">
                <input type="checkbox" v-model="formData.foto[key]" />
                {{ label }}
            </label>
        </div>
        <div class="btn-row">
            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
            <button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
            <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
        </div>
    </div>
</template>
