<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">Replays</h1>

    <table class="w-full border text-left">
      <thead>
        <tr class="bg-gray-100">
          <th class="p-2">ID</th>
          <th class="p-2">Email</th>
          <th class="p-2">Started</th>
        </tr>
      </thead>
      <tbody>

        <tr v-for="replay in data.replays" :key="replay.id" class="border-t">
          <td class="p-2">{{ replay.id }}</td>
          <td class="p-2">{{ replay.user.email ?? replay.user.display_name }}</td>
          <td class="p-2">{{ replay.started_at }}</td>
          
        </tr>
      </tbody>
    </table>

    <!-- Pagination -->
    <div class="mt-4 flex space-x-2">
      <template v-for="link in data.meta.links" :key="link.label">
        <Link
          :href="link.url"
          class="px-2 py-1 border rounded"
          :class="{ 'font-bold bg-gray-200': link.active, 'text-gray-400': !link.url }"
        />
      </template>
    </div>
  </div>
</template>

<script setup>
import { Link, usePage } from '@inertiajs/vue3'

const props = defineProps({
  data: Object
})
</script>
