<Table
  :records="employeeRecords"
  :columns="employeeColumns"
  rowKey="id"
  :maxHeight="400"
  rowSelection
  expandableRows
  reorderableColumns
  reorderableRows
  @row-click="handleRowClick"
>
  <template #cell-selection="{ row, checked, toggle }">
    <Checkbox :modelValue="checked" @update:modelValue="toggle" />
  </template>

  <template #cell-drag-handle="{ row }">
    <img :src="row.avatar" alt="Example user avatar" class="h-9 w-9 rounded-full" />
    <span>{{ row.name }}</span>
  </template>

  <template #cell-status="{ row }">
    <span :class="getStatusBadgeVariant(row.status)">{{ row.status }}</span>
  </template>

  <template #expanded-row="{ row }">
    Contact: {{ row.email }}
  </template>

  <template #pagination>
    <Pagination v-model:currentPage="currentPage" v-model:rowsPerPage="rowsPerPage" :totalRecords="employeeRecords.length" />
  </template>
</Table>

<Table :records="crewRecords" :columns="crewColumns" treeNodeKey="crewList">
  <!-- treeNodeKey tells Table which key holds nested rows - this dataset uses
       "crewList" instead of the library's default "children" -->
  <!-- #row intercepts the whole <tr>, so a record with a nested crewList
       array can render a full-width, colspan-ed group header instead of normal cells -->
  <template #row="{ row, depth, expanded, toggle, colspan }">
    <template v-if="row.batchName">
      <td :colspan="colspan" @click="toggle">
        <Icon :icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'" />
        {{ row.batchName }} ({{ row.crewList.length }} Crew)
        <span>{{ row.status }}</span>
      </td>
    </template>

    <template v-else>
      <td :style="{ paddingLeft: `${depth * 20 + 16}px` }">{{ row.name }}</td>
      <td>{{ row.rank }}</td>
      <td>{{ row.nationality }}</td>
      <td>{{ row.passport }}</td>
    </template>
  </template>
</Table>

<Table :records="vofRecords" :columns="vofColumns">
  <template #cell-plateNumber="{ row }">
    <InputText v-model="row.plateNumber" size="sm" />
  </template>

  <template #cell-qty="{ row }">
    <InputNumber v-model="row.qty" :min="0" size="sm" />
  </template>

  <template #cell-rate="{ row }">
    <InputNumber v-model="row.rate" mode="currency" currency="PHP" size="sm" />
  </template>

  <template #cell-total="{ row }">
    {{ (row.qty * row.rate).toLocaleString('en-PH', { style: 'currency', currency: 'PHP' }) }}
  </template>
</Table>

<Table :records="accountingRecords" :columns="accountingColumns" stripedRows>
  <template #cell-amount="{ row }">
    {{ row.amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' }) }}
  </template>

  <!-- #footer spans the full width beneath every row, ideal for aggregation -->
  <template #footer>
    <div class="flex justify-end gap-8">
      <span>Grand Total</span>
      <span>{{ totalAmount }}</span>
    </div>
  </template>
</Table>

<Table :records="ratesRecords" :columns="ratesColumns">
  <!-- #filter-{key} renders an input directly in that column's header cell -->
  <template #filter-route>
    <InputText v-model="filters.route" placeholder="Filter Routes..." icon="lucide:search" />
  </template>

  <template #filter-containerType>
    <InputText v-model="filters.containerType" placeholder="Filter Type..." />
  </template>

  <template #cell-baseRate="{ row }">
    {{ row.baseRate ? `$${row.baseRate}` : '-' }}
  </template>

  <template #cell-total="{ row }">
    {{ row.total ? `$${row.total}` : '-' }}
  </template>
</Table>