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

const projects = await getEntry("projects", "projects");

let lastYear = 0;
---

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

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

        & .year {
            background: #eeeeee;
        }
    }

    summary {
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }
    details .open {
        background-color: #e2e2e2;
        padding: .5em 1em;
        margin: .5em 0;
    }

    .name {
        flex: 1 1 0;
    }
    .date {
        flex: 0 0 auto;
        color: #888888;
    }

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