strat-gameplay-webapp/frontend-sba/pages/games/index.vue

<template>
  <div>
    <div class="mb-8 flex items-center justify-between">
      <div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">My Games</h1>
        <p class="text-gray-600">
          View and manage your active and completed games
        </p>
      </div>
      <NuxtLink
        to="/games/create"
        class="px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition"
      >
        Create New Game
      </NuxtLink>
    </div>

    <!-- Tabs -->
    <div class="mb-6 border-b border-gray-200">
      <nav class="flex space-x-8">
        <button
          @click="activeTab = 'active'"
          :class="[
            'py-4 px-1 border-b-2 font-medium text-sm transition',
            activeTab === 'active'
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          Active Games
        </button>
        <button
          @click="activeTab = 'completed'"
          :class="[
            'py-4 px-1 border-b-2 font-medium text-sm transition',
            activeTab === 'completed'
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          Completed
        </button>
      </nav>
    </div>

    <!-- Games List -->
    <div v-if="activeTab === 'active'">
      <!-- Empty State -->
      <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-16 w-16 mx-auto text-gray-400 mb-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
          />
        </svg>
        <h3 class="text-xl font-bold text-gray-900 mb-2">
          No Active Games
        </h3>
        <p class="text-gray-600 mb-6">
          You don't have any active games right now. Create a new game to get started!
        </p>
        <NuxtLink
          to="/games/create"
          class="inline-block px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg transition"
        >
          Create Your First Game
        </NuxtLink>
      </div>

      <!-- TODO Phase F6: Replace with actual games list -->
      <!-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <GameCard v-for="game in activeGames" :key="game.id" :game="game" />
      </div> -->
    </div>

    <div v-else-if="activeTab === 'completed'">
      <!-- Empty State -->
      <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-16 w-16 mx-auto text-gray-400 mb-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
          />
        </svg>
        <h3 class="text-xl font-bold text-gray-900 mb-2">
          No Completed Games
        </h3>
        <p class="text-gray-600">
          You haven't completed any games yet.
        </p>
      </div>

      <!-- TODO Phase F6: Replace with actual completed games list -->
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ['auth'], // Require authentication
})

const activeTab = ref<'active' | 'completed'>('active')

// TODO Phase F6: Fetch games from API
// const { data: activeGames } = await useFetch('/api/games?status=active')
// const { data: completedGames } = await useFetch('/api/games?status=completed')
</script>

<style scoped>
/* Additional component styles if needed */
</style>