<script setup>
import AppLayout from "../../Layouts/AppLayout.vue";
import {NList, NListItem, NFlex, NText, NH1, NTag} from 'naive-ui'

const props = defineProps({
    is_view_only: {
        type: Boolean,
        default: false
    },
    period: {
        type: Object,
        default: {}
    },
    group: {
        type: Object,
        default: {}
    },
    metrics: {
        type: Object,
        default: {}
    },
    form: {
        type: Object,
        default: {}
    },
})
</script>

<template>
    <AppLayout>
        <div class="max-w-6xl mx-auto mt-4 mb-4">
            <div class="flex items-center justify-between">
                <div>
                    <n-h1 class="!mb-2">{{ group.name }}</n-h1>
                    <n-text depth="3" v-if="group.description">
                        {{ group.description }}
                    </n-text>
                </div>
            </div>
            <NList>
                <NListItem v-for="metric in metrics.values">
                    <NFlex justify="space-between" align="center" class="w-full px-4">
                        <div>
                            {{metric.item_name}}
                        </div>
                        <div>
                            {{metric.sum}}
                        </div>
                    </NFlex>
                </NListItem>
            </NList>
        </div>
    </AppLayout>
</template>

<style scoped>

</style>
