<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CardList from 'src/components/ui/CardList.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';

const { t } = useI18n();
const route = useRoute();
const routeId = route.params.id;
</script>
<template>
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnPaginate
                data-key="AgencyModes"
                :url="`AgencyModes`"
                :filter="{ where: { agencyFk: routeId } }"
                order="name"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList
                        :id="row.id"
                        :key="row.id"
                        :title="row.name"
                        v-for="row of rows"
                    >
                        <template #list-items>
                            <VnLv
                                :label="t('globals.description')"
                                :value="row?.description"
                            />
                            <VnLv
                                :label="t('deliveryMethod')"
                                :value="row?.deliveryMethodFk"
                            />
                            <VnLv label="m3" :value="row?.m3" />
                            <VnLv :label="t('inflation')" :value="row?.inflation" />
                            <VnLv :label="t('globals.code')" :value="row?.code" />
                        </template>
                    </CardList>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>
<i18n>
    es: 
        isOwn: Tiene propietario
        isAnyVolumeAllowed: Permite cualquier volumen
        Search agency: Buscar agencia
        You can search by name: Puedes buscar por nombre
        deliveryMethod: Método de entrega
        inflation: Inflación
    en:
        isOwn: Has owner
        isAnyVolumeAllowed: Allows any volume
</i18n>
