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

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';

const $props = defineProps({ id: { type: Number, default: 0 } });
const { t } = useI18n();
const entityId = computed(() => $props.id || useRoute().params.id);
</script>

<template>
    <div class="q-pa-md">
        <CardSummary :url="`Agencies/${entityId}`" data-key="Agency">
            <template #header="{ entity: agency }">{{ agency.name }}</template>
            <template #body="{ entity: agency }">
                <QCard class="vn-one">
                    <VnTitle
                        :url="`#/agency/${entityId}/basic-data`"
                        :text="t('globals.pageTitles.basicData')"
                    />
                    <VnLv :label="t('globals.name')" :value="agency.name" />
                    <QCheckbox
                        :label="t('agency.isOwn')"
                        v-model="agency.isOwn"
                        :disable="true"
                    />
                    <QCheckbox
                        :label="t('agency.isAnyVolumeAllowed')"
                        v-model="agency.isAnyVolumeAllowed"
                        :disable="true"
                    />
                </QCard>
            </template>
        </CardSummary>
    </div>
</template>
