<template>
  <section class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
    <div class="mb-6 flex flex-col justify-between gap-4 md:flex-row md:items-center">
      <div>
        <h2 class="text-3xl font-bold">Employee Management</h2>
        <p class="text-slate-400">Profiles, hierarchy, documents, salary, bank, and transfer records.</p>
      </div>
      <button class="rounded-2xl bg-cyan-400 px-5 py-3 font-semibold text-slate-950">Add Employee</button>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full min-w-[760px] text-left text-sm">
        <thead class="text-slate-400">
          <tr><th class="py-3">Code</th><th>Name</th><th>Branch</th><th>Department</th><th>Status</th><th>Salary</th></tr>
        </thead>
        <tbody>
          <tr v-for="employee in employees" :key="employee.code" class="border-t border-white/10">
            <td class="py-4">{{ employee.code }}</td><td>{{ employee.name }}</td><td>{{ employee.branch }}</td><td>{{ employee.department }}</td><td>{{ employee.status }}</td><td>{{ employee.salary }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>

<script setup>
const employees = [
  { code: 'EMP-1001', name: 'Ayesha Rahman', branch: 'Head Office', department: 'HR', status: 'Active', salary: '$2,800' },
  { code: 'EMP-1002', name: 'Tanvir Ahmed', branch: 'Factory A', department: 'Production', status: 'Active', salary: '$1,950' },
  { code: 'EMP-1003', name: 'Nusrat Jahan', branch: 'Factory B', department: 'Finance', status: 'Active', salary: '$2,400' }
]
</script>
