<script>
    import { showSearch, loading } from '$lib/stores';
    import { postGridPreviewQuality, imageGridColumns } from '$lib/settings';

    export let posts = [];
</script>

<div class="grid gap-3" style={`grid-template-columns: repeat(${$imageGridColumns}, minmax(0, 1fr))`}>
    {#each posts as post}
        <a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" on:click={() => {
            $loading = true;
            $showSearch = false
        }}>
            <header class="card-header p-0"></header>
            <section class="flex flex-col">
                <img src={post[$postGridPreviewQuality].url}
                     loading="lazy"
                     alt={`Post ${post.id}`} />
                <div class="bg-black px-2 py-1">
                    <p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
                </div>
            </section>
            <footer >
            </footer>
        </a>
    {/each}
</div>
