<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">
          Sportbetrieb verwalten
        </h1>
        <p class="mt-1 text-sm text-gray-500">
          Termine, Mannschaften und Spielpläne pflegen
        </p>
      </div>

      <!-- Tabs -->
      <div class="border-b border-gray-200 mb-6">
        <nav
          class="-mb-px flex space-x-8 overflow-x-auto"
          aria-label="Tabs"
        >
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
            :class="activeTab === tab.id
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
            @click="activeTab = tab.id"
          >
            {{ tab.label }}
          </button>
        </nav>
      </div>

      <!-- Tab Content -->
      <div>
        <CmsTermine v-if="activeTab === 'termine'" />
        <CmsMannschaften v-if="activeTab === 'mannschaften'" />
        <CmsSpielplaene v-if="activeTab === 'spielplaene'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CmsTermine from '~/components/cms/CmsTermine.vue'
import CmsMannschaften from '~/components/cms/CmsMannschaften.vue'
import CmsSpielplaene from '~/components/cms/CmsSpielplaene.vue'

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

useHead({
  title: 'Sportbetrieb verwalten – CMS'
})

const activeTab = ref('termine')

const tabs = [
  { id: 'termine', label: 'Termine' },
  { id: 'mannschaften', label: 'Mannschaften' },
  { id: 'spielplaene', label: 'Spielpläne' }
]
</script>
