<script setup>
import { Link } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'

defineProps({
  reports: { type: Array, required: true },
})
</script>

<template>
  <AppLayout title="Poročila">
    <template #header />
    <div class="pt-8">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="mb-6">
          <h1 class="text-2xl font-semibold">Poročila</h1>
          <p class="text-gray-600">Izberite poročilo za pregled in izvoz.</p>
        </div>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <div v-for="r in reports" :key="r.slug" class="border rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition">
            <h2 class="text-lg font-medium mb-1">{{ r.name }}</h2>
            <p class="text-sm text-gray-600 mb-3">{{ r.description }}</p>
            <Link :href="route('reports.show', r.slug)" class="inline-flex items-center text-indigo-600 hover:underline">Odpri →</Link>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
