<template>
    <div class="p-4">
      <h2 class="text-xl font-bold mb-4">Add New Class</h2>
      <form @submit.prevent="addClass" class="space-y-4">
        <div>
          <label class="block mb-1">Class Name</label>
          <input v-model="newClass.name" class="border p-2 w-full" required />
        </div>
        <div>
          <label class="block mb-1">Section</label>
          <input v-model="newClass.section" class="border p-2 w-full" required />
        </div>
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Add Class</button>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useDirectus } from '../../app/composables/useDirectus'
  
  const { createItem } = useDirectus()
  
  const newClass = ref({
    name: '',
    section: '',
  })
  
  const addClass = async () => {
    try {
      await createItem('classes', newClass.value)
      alert('Class added successfully!')
      newClass.value = { name: '', section: '' }
    } catch (err) {
      alert('Failed to add class.')
      console.error(err)
    }
  }
  </script>
  