<script setup lang="ts">
import { routeLocationKey } from 'vue-router';
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import TableHeader from '~/components/parts/TableHeader.vue';

const { locale } = useI18n();
const localePath = useLocalePath()

const {data: posts} = useAsyncData('art-posts', async () => 
await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).order('date', 'DESC').all()
, {watch: [locale, () => useRoute().path]});

</script>

<template>
    <TableHeader></TableHeader>

    <FixedLayout>
        <Container>
            <div class="grid">
                <NuxtLink v-for="art in posts"
                :key="art.slug"
                class="selector"
                :style="`background-image: url('${art.thumb}');`"
                :to="localePath(`/art/${art.slug}`)">
                    <div class="overlay-text">{{ art.title }}</div>
                </NuxtLink>
                
                <!-- 
                <div class="selector" style="background-image: url('/art/nozt/nozt-full-low.png');">
                    <div class="overlay-text">Test</div>
                </div>

                <div class="selector" style="background-image: url('/art/knocking/knocking-low.png');">
                    <div class="overlay-text">Test</div>
                </div>

                <div class="selector" style="background-image: url('/art/valentin/valentin.png');">
                    <div class="overlay-text">Test</div>
                </div>

                <div class="selector" style="background-image: url('/art/miirym/miirym.png');">
                    <div class="overlay-text">Test</div>
                </div>

                <div class="selector" style="background-image: url('/art/silang-3d/silang-3d.png');">
                    <div class="overlay-text">Test</div>
                </div>

                <div class="selector" style="background-image: url('/art/yharon/yharon.png'); background-position-y: 0px;">
                    <div class="overlay-text">Test</div>
                </div>
                -->
            </div>
        </Container>
    </FixedLayout>
    <Footer></Footer>
</template>

<style lang="scss" scoped>
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 16px;
    padding: 40px 20px 40px 20px;
}
.selector {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.selector:hover {
    transform: scale(1.03);
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    pointer-events: none;
}
h2 {
    margin-left: 20px;
}

p {
    margin-left: 30px;
}

.two-columns {
    display: flex;
    width: 100%;
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

@media (max-width: 500px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
</style>