{% extends "base.html" %}

{% block title %}My Notes - Notes App{% endblock %}

{% block content %}
<div class="flex-header">
    <h2>My Notes</h2>
    <a href="{{ url_for('notes.create_note') }}" class="btn">+ Create New Note</a>
</div>

{% if notes %}
    <div class="grid">
        {% for note in notes %}
            <div class="card note-card">
                <div class="note-title">{{ note.title }}</div>
                <div class="note-meta">
                    Created: {{ note.created_at.strftime('%Y-%m-%d %H:%M') }}
                    {% if note.updated_at != note.created_at %}
                        | Updated: {{ note.updated_at.strftime('%Y-%m-%d %H:%M') }}
                    {% endif %}
                </div>
                <div class="note-actions">
                    <a href="{{ url_for('notes.view_note', note_id=note.id) }}" class="btn">View</a>
                    <a href="{{ url_for('notes.edit_note', note_id=note.id) }}" class="btn">Edit</a>
                    <form method="POST" action="{{ url_for('notes.delete_note', note_id=note.id) }}" class="inline-form" data-confirm-delete data-confirm-message="Are you sure you want to delete this note?">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="card text-center">
        <h3>No notes yet!</h3>
        <p>Create your first note to get started.</p>
        <a href="{{ url_for('notes.create_note') }}" class="btn">Create Your First Note</a>
    </div>
{% endif %}
{% endblock %}