<script lang="ts">
    import { notes } from '$lib';
    import { stripMarkdown } from '$lib/markdown';
    import { onMount } from 'svelte';
    import Navigation from '$lib/components/Navigation.svelte';
    
    onMount(() => {
        notes.load();
        return () => notes.add();
    });
</script>

<Navigation />

<div class="container">
    <section class="section">
        <h1 class="title">My Notes</h1>
        
        <div class="buttons">
            <a href="/notes/new" class="button is-primary">
                New Note
            </a>
        </div>

        {#if $notes.length === 0}
            <div class="notification is-info">
                No notes yet. Create your first note!
            </div>
        {:else}
            <div class="columns is-multiline">
                {#each $notes as note}
                    <div class="column is-one-third">
                        <div class="card">
                            <div class="card-content">
                                <p class="title is-4">{note.title}</p>
                                <p class="subtitle is-6">
                                    Last updated: {note.updatedAt.toLocaleDateString()}
                                </p>
                                <div class="content">
                                    {#if note.content.length > 100}
                                        {stripMarkdown(note.content.slice(0, 100))}...
                                    {:else}
                                        {stripMarkdown(note.content)}
                                    {/if}
                                </div>
                            </div>
                            <footer class="card-footer">
                                <a href="/notes/{note.id}" class="card-footer-item">View</a>
                                <a href="/notes/{note.id}?edit=true" class="card-footer-item">Edit</a>
                                <button 
                                    class="card-footer-item button is-ghost has-text-danger"
                                    on:click={() => notes.delete(note.id)}
                                >
                                    Delete
                                </button>
                            </footer>
                        </div>
                    </div>
                {/each}
            </div>
        {/if}
    </section>
</div>
