<template>
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-6">🏫 Classes List</h2>
  
      <div v-if="loading" class="text-gray-500">Loading classes...</div>
  
      <div v-else-if="classes.length">
        <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
          <thead class="bg-gray-100">
            <tr>
              <th class="text-left px-4 py-2">#</th>
              <th class="text-left px-4 py-2">Class Name</th>
              <th class="text-left px-4 py-2">Section</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(cls, index) in classes" :key="cls.id" class="border-t">
              <td class="px-4 py-2">{{ index + 1 }}</td>
              <td class="px-4 py-2">{{ cls.name }}</td>
              <td class="px-4 py-2">{{ cls.section }}</td>
            </tr>
          </tbody>
        </table>
      </div>
  
      <div v-else class="text-gray-500 mt-4">No classes found.</div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useDirectus } from '../../app/composables/useDirectus'
  
  const directus = useDirectus()
  const classes = ref([])
  const loading = ref(true)
  
  onMounted(async () => {
    try {
      const { data } = await directus.items('classes').readByQuery({
        fields: ['id', 'name', 'section'],
        sort: ['name']
      })
      classes.value = data
    } catch (err) {
      console.error('Error loading classes:', err)
    } finally {
      loading.value = false
    }
  })
  </script>
  
  <style scoped>
  table {
    border-collapse: collapse;
  }
  th, td {
    border-bottom: 1px solid #e5e7eb;
  }
  </style>
  