<template>
    <section class="products-toolbar">
        <div>
            <template v-for="(btn, i) in btns.toolbar" :key="i">
                <Button v-bind="btn.props" @click="btn.click" />
            </template>
        </div>
        <div>
            <span>{{ $t("allCommodities") }}</span>
            <span>{{ data.products.length }} {{ $t("commodity") }}</span>
        </div>
    </section>
</template>

<script setup>
const route = useRoute()
const { btns } = inject('init')
const data = inject('data')
route.meta.data = data
</script>

<style lang="scss">
.products-toolbar {
    @apply w-full flex flex-col gap-4;

    &>div:nth-of-type(1) {
        @apply h-[3.8rem] flex items-center border-b border-[#E5E5E5];

        button {
            @apply h-12 text-[#333333] first:-mr-5 -ml-3 #{!important};

            .p-button-label {
                @apply text-xs font-vazir;
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply flex items-center justify-between;

        span {
            @apply text-[#999999] text-[0.7em] font-medium font-vazir;
        }
    }
}
</style>
