<?php snippet('layout', slots: true) ?>

    <?php
        // Filterfunktionalität implementieren
        $posts = $page->children()->sortBy('date', 'desc');

        // Nach Kategorie (Tag) filtern
        if($tag = param('tag')) {
            $posts = $posts->filterBy('tags', $tag, ',');
        }
    ?>

    <?php foreach($posts as $post): ?>
    <article class="relative flex flex-col gap-8 lg:flex-row py-12">
        <div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
            <img src="<?= $post->image()->url() ?>" alt="" class="absolute inset-0 size-full rounded-xl object-cover" />
            <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div>
            <div class="flex items-center gap-x-4 text-m justify-between">
                <div>
                    <time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
                </div>
                <div>
                    <?php foreach($post->tags()->split() as $tag): ?>
                        <a href="<?= $page->url(['params' => ['tag' => $tag]]) ?>" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="group relative">
                <h2>
                    <a href="<?= $post->url() ?>" class="relative">
                        <span class="absolute inset-0"></span>
                        <?= $post->headline() ?>
                    </a>
                </h2>
                <p><?= $post->summary() ?></p>
            </div>
            <?php if ($user = $post->author()->toUser()): ?>
            <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                <div class="relative flex items-center gap-x-4">
                    <img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
                    <div class="text-sm/6">
                        <p>
                            <span class="absolute inset-0"></span>
                            <div class="text-xl">
                                <?= $user->username() ?>
                            </div>
                        </p>
                        <p class="text-sm"><?= $user->role()->title() ?></p>
                    </div>
                </div>
            </div>
            <?php endif ?>
        </div>
    </article>
    <?php endforeach ?>
    
    <?php if(param('tag')): ?>
    <div class="my-8">
        <a href="<?= $page->url() ?>" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded">
            Alle Beiträge anzeigen
        </a>
    </div>
    <?php endif ?>

<?php endsnippet() ?>