<template>
    <section class="product-wrapper">
        {{ data }}
        <h2 v-if="title">{{ $t(title) }}</h2>
        <div>
            <SearchFilters v-if="device == 'desktop'" />
            <div>
                <SearchSort v-if="device == 'desktop'" />
                <SearchToolbar v-if="device == 'mobile'" />
                <div>
                    <template v-for="(product, i) in products" :key="i">
                        <ProductCard :data="product" />
                    </template>
                </div>
                <AppPagination :pages="pages" />
            </div>
        </div>
    </section>
</template>

<script setup>
const { device } = inject('service')
const { products, pages } = inject('data')
</script>

<style lang="scss">
.product-wrapper {
    @apply w-full flex flex-col gap-4 lg:gap-[3.8rem] lg:pt-11 px-5;

    &>h2 {
        @apply w-full flex justify-center lg:justify-start gap-3 lg:gap-6 items-center text-[#333333] text-base lg:text-2xl font-bold font-vazir;

        &::before {
            @apply lg:content-['_'] h-8 w-1.5 rounded-full bg-primary-600;
        }
    }

    &>div {
        @apply w-full flex gap-6 justify-center;

        &>div {
            @apply w-full container mx-0 flex flex-col gap-10;


            &>div {
                @apply w-full flex max-lg:flex-col lg:flex-wrap gap-3 lg:gap-[1.4rem];

                @media (max-width: 1024px) {
                    .product-card {
                        @apply w-full h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
                        @apply mt-[1.1rem] border-b border-[#E5E5E5];

                        &>img {
                            @apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
                        }

                        &>div {
                            @apply pb-6;

                            h2 {
                                @apply mt-0 text-[0.7em];
                            }

                            h1 {
                                @apply text-xs;
                            }

                            &>button {
                                @apply left-0 bottom-3;

                                .p-button-icon {
                                    @apply text-xl;
                                }
                            }
                        }
                    }
                }
            }

            .pagination {
                @apply self-center mt-auto;
            }
        }
    }

}
</style>