<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-between">
            <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
            <NuxtLink
                to="/admin/carrier"
                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
            >
                <Icon name="mdi:plus" size="28" />
                Ajouter
            </NuxtLink>
        </div>

        <div class="mt-6 mb-16">
            <UiDataTable
                v-model:page="page"
                v-model:per-page="perPage"
                :columns="columns"
                :items="items"
                :total-items="totalItems"
                :loading="loading"
                row-clickable
                @row-click="goToCarrier"
            >
                <template #header-name>
                    <UiTextInput v-model="filters.name" placeholder="Label" size="compact" />
                </template>
                <template #header-code>
                    <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
                </template>
            </UiDataTable>
        </div>
    </div>
</template>

<script setup lang="ts">
useHead({ title: 'Transporteurs' })

import type { CarrierData } from '~/services/dto/carrier-data'
import { useDataTableServerState } from '~/composables/useDataTableServerState'

const router = useRouter()

const { items, totalItems, page, perPage, filters, loading, reload } =
    useDataTableServerState<CarrierData>(
        'carriers',
        {
            name: '',
            code: ''
        }
    )

const columns = [
    { key: 'name', label: 'Label' },
    { key: 'code', label: 'Code' }
]

const goToCarrier = (carrier: CarrierData) => {
    router.push(`/admin/carrier/${carrier.id}`)
}

onMounted(reload)
</script>
