---
import { getCollection } from 'astro:content'

import PageLayout from '@layouts/PageLayout.astro'

const guides = await getCollection('guides')
---

<PageLayout title="Guide | PHC" pageTags="guide">
    <h1>
        <a href="/guide">Guide</a>
    </h1>
    <div class="card-list">
        {
            guides.toReversed().map(guide => (
                <div class="card">
                    <div class="title">
                        <a href={`/guide/${guide.data.id}`}>{guide.data.title}</a>
                    </div>
                    <div class="text">{guide.data.description}</div>
                    <div class="tags">
                        {guide.data.tags.map((tag: string) => (
                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
                        ))}
                    </div>
                </div>
            ))
        }
    </div>
</PageLayout>