Implemented additional event information

app/Domains/Event/Views/Partials/ParticipantsByOption.vue

@@ -0,0 +1,67 @@
+<script setup>
+import {computed, inject} from "vue";
+import ParticipantsList from "./ParticipantsList.vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({participants: {}, event: {}, listType: ''}),
+    },
+});
+
+// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
+// Teilnahmeoptionen konfiguriert werden.
+const selectTab = inject('selectTab', null);
+
+const hasOptions = computed(() => (props.data?.event?.participationOptions?.length ?? 0) > 0);
+
+function goToOverview() {
+    if (selectTab) {
+        selectTab(0);
+    }
+}
+</script>
+
+<template>
+    <ParticipantsList v-if="hasOptions" :data="data" :show-group-mail="false"/>
+
+    <div v-else class="no-options">
+        <h3>Keine Teilnahmeoptionen angelegt</h3>
+        <p>
+            Für diese Veranstaltung sind noch keine Teilnahmeoptionen angelegt. Sobald du unter
+            <strong>Übersicht → Teilnahmeoptionen</strong> Fragen definierst, werden die Teilnehmenden hier nach
+            ihrer Auswahl gruppiert.
+        </p>
+        <button v-if="selectTab" type="button" class="button" @click="goToOverview">
+            Zu den Teilnahmeoptionen
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.no-options {
+    max-width: 640px;
+    margin: 20px auto;
+    padding: 24px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.no-options p {
+    color: #4b5563;
+    line-height: 1.6;
+}
+
+.button {
+    margin-top: 12px;
+    padding: 8px 18px;
+    background: #2563eb;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+}
+</style>