<script>
    import Note from "$lib/components/Note.svelte";
    export let data;
    let notes = data.notes;

    let notesSorted = notes.sort(
        (a, b) => new Date(b.createdOn) - new Date(a.createdOn),
    );
</script>

<div id="notes">
    {#if notes.length === 0}
        <h1 id="noNoteMsg">Es wurden noch keine Notizen geschrieben :(</h1>
    {/if}
    {#each notesSorted as note}
        <Note data={note}></Note>
    {/each}
</div>

<style>
    #notes {
        display: flex;
        flex-direction: row;
        gap: 15px;
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    #noNoteMsg{
        position: absolute;
        top: 48%;
    }
</style>
