---
import { getCollection } from "astro:content";

const projects = await getCollection("projects");

let lastYear = 0;
---

<div>
    {projects.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()).map((project) => {
        const isNewYear = project.data.date.getFullYear() !== lastYear;
        lastYear = project.data.date.getFullYear();

        return <>
            {isNewYear && <div class="seperator"><span class="year">{project.data.date.getFullYear()}</span></div>}
            <details>
                <summary>
                    <span class="name">{project.data.name}</span>
                    <time class="date" datetime={project.data.date.toISOString().split("T")[0]}>{project.data.dateVisual || project.data.date.toLocaleString("default", { month: "long" })}</time>
                </summary>
                <div class="open">
                    <p>{project.data.description}</p>
                    <div class="links">
                        {project.data.links.map((link) => {
                            return <a class="link" target="_blank" rel="noopener" href={link}>{link}</a>;
                        })}
                    </div>
                </div>
            </details>
        </>;
    })}
</div>
<style>
    .seperator {
        background: linear-gradient(transparent calc(50% - 1px), var(--foreground-light) calc(50%), transparent calc(50% - 1px));
        margin: .5em 0;
        text-align: center;

        & .year {
            background: var(--background);
        }
    }

    summary {
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }
    details .open {
        background-color: var(--background-light);
        padding: .5em 1em;
        margin: .5em 0;
    }

    .name {
        flex: 1 1 0;
    }
    .date {
        flex: 0 0 auto;
        color: var(--foreground-light);
    }

    .links {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .link {
        word-break: break-all;
    }
</style>
