---
import Layout from "../../layouts/Layout.astro";
import { getCollection, type CollectionEntry } from "astro:content";

const posts = (await getCollection("blog")).sort(
    (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) =>
        b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<Layout title="System Logs">
    <div class="split-layout">
        <main class="content-workspace">
            <div class="content-container">
                <header class="page-header">
                    <a href="/" class="back-link"> &larr; Back to Home </a>
                    <h1>Blog Articles</h1>
                    <div class="divider"></div>
                </header>

                <ul class="post-list">
                    {
                        posts.map((post: any) => (
                            <li>
                                <a
                                    href={`/blog/${post.slug}/`}
                                    class="post-link"
                                >
                                    <div class="post-meta">
                                        <span class="date">
                                            {post.data.pubDate
                                                .toISOString()
                                                .slice(0, 10)}
                                        </span>
                                    </div>
                                    <div class="post-info">
                                        <span class="title">
                                            {post.data.title}
                                        </span>
                                        <span class="desc">
                                            {post.data.description}
                                        </span>
                                    </div>
                                </a>
                            </li>
                        ))
                    }
                </ul>

                <footer>
                    <p>&copy; {new Date().getFullYear()} Syntaxbullet</p>
                </footer>
            </div>
        </main>
    </div>
</Layout>

<style>
    /* Split Layout - Consistent with Homepage */
    .split-layout {
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: var(--bg-color);
    }

    /* Content Workspace (Right Side) */
    .content-workspace {
        flex-grow: 1;
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: auto; /* Enable scrolling for content */
        overflow-x: hidden;
    }

    .content-container {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
        padding: 4rem 2rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    /* Header Styling */
    .page-header {
        margin-bottom: 3rem;
    }

    .back-link {
        display: inline-block;
        margin-bottom: 1.5rem;
        font-family:
            system-ui,
            -apple-system,
            sans-serif;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.2s;
    }

    .back-link:hover {
        color: #fff;
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 1rem 0;
        letter-spacing: -0.5px;
        color: #fff;
    }

    .divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        width: 100%;
    }

    /* Post List Styling */
    .post-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        flex-grow: 1;
    }

    .post-link {
        display: flex;
        flex-direction: column; /* Mobile first */
        gap: 0.5rem;
        text-decoration: none;
        padding: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.02);
        transition: all 0.2s ease;
        border-radius: 4px;
    }

    .post-link:hover {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.05);
        transform: translateY(-2px);
    }

    .post-meta {
        font-family: var(--font-mono);
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.5);
    }

    .post-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #fff;
    }

    .desc {
        color: rgba(255, 255, 255, 0.7);
        font-family:
            system-ui,
            -apple-system,
            sans-serif;
        font-size: 1rem;
        line-height: 1.5;
    }

    footer {
        margin-top: 4rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        opacity: 0.5;
        font-size: 0.8rem;
        font-family: var(--font-mono);
        color: rgba(255, 255, 255, 0.6);
    }

    /* Responsive */
    @media (min-width: 768px) {
        .post-link {
            flex-direction: row;
            align-items: baseline;
            gap: 1.5rem;
        }

        .post-meta {
            min-width: 120px;
            text-align: right;
        }
    }

    @media (max-width: 1024px) {
        .split-layout {
            flex-direction: column;
            overflow: hidden; /* Prevent body scroll, use inner scrolling */
            height: 100dvh;
        }

        .content-workspace {
            height: auto;
            flex-grow: 1; /* Fill remaining space */
            overflow-y: auto;
        }
    }
</style>