<script setup>
import AppLayout from "../../Layouts/AppLayout.vue"
import TableCards from './DataTable/Index.vue'
import { NInput, NFlex, NDivider, NDatePicker } from 'naive-ui'

const props = defineProps({
    cards: {
        type: Array,
        default: []
    }
})
</script>

<template>
    <AppLayout>
        <template #header>
            <NFlex class="py-4" align="center" :wrap="false">
                <NInput placeholder="Поиск по ФИО, № карты" />
                <NDivider vertical />
                <NDatePicker type="daterange" clearable start-placeholder="Дата выписки с" end-placeholder="по" />
            </NFlex>
        </template>
        <TableCards :data="cards.data" min-height="calc(100vh - 136px)" max-height="calc(100vh - 136px)" />
    </AppLayout>
</template>

<style scoped>

</style>
