<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-6">
        <h1 class="text-3xl font-display font-bold text-gray-900">
          Mitgliederverwaltung
        </h1>
        <p class="mt-1 text-sm text-gray-500">
          Anträge und Mitgliederliste verwalten
        </p>
      </div>

      <!-- Mitgliedschaftsanträge oben (nur sichtbar wenn Anträge vorhanden) -->
      <div
        v-show="antraegeRef?.hasApplications"
        class="mb-10"
      >
        <CmsMitgliedschaftsantraege ref="antraegeRef" />
      </div>
      <div
        v-if="antraegeRef?.hasApplications"
        class="border-t border-gray-300 mb-10"
      />

      <!-- Mitgliederliste darunter -->
      <CmsMitglieder />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CmsMitglieder from '~/components/cms/CmsMitglieder.vue'
import CmsMitgliedschaftsantraege from '~/components/cms/CmsMitgliedschaftsantraege.vue'

const antraegeRef = ref(null)

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'Mitgliederverwaltung – CMS'
})
</script>
