{% extends "base.html" %}

{% block title %}Notes - GoalsBreakDown{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/notes.css') }}">
{% endblock %}

{% block content %}
<div class="notes-page">
    <div class="notes-header">
        <h1>Notes</h1>
        <button id="create-note-btn" class="btn-success">+ New Note</button>
    </div>

    <div class="notes-filters">
        <div class="filter-group">
            <label for="filter-goal">Goal:</label>
            <select id="filter-goal">
                <option value="">All Goals</option>
            </select>
        </div>
        <div class="filter-group search-group">
            <input type="text" id="filter-search" placeholder="Search notes..." autocomplete="off">
        </div>
    </div>

    <div id="notes-list" class="notes-list"></div>
</div>

<div id="note-modal" class="modal">
    <div class="modal-content note-modal-content">
        <div class="modal-header">
            <h2 id="note-modal-title">New Note</h2>
            <button class="modal-close" id="note-modal-close">&times;</button>
        </div>
        <form id="note-form" autocomplete="off">
            <input type="hidden" id="note-id">
            <div class="form-group">
                <label for="note-title">Title</label>
                <input type="text" id="note-title" required>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="note-goal">Goal</label>
                    <select id="note-goal">
                        <option value="">None</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="note-task">Task</label>
                    <select id="note-task">
                        <option value="">None</option>
                    </select>
                </div>
            </div>
            <div class="form-group note-editor">
                <div class="editor-panes">
                    <div class="editor-pane">
                        <label>Content (Markdown)</label>
                        <textarea id="note-content" rows="16"></textarea>
                    </div>
                    <div class="preview-pane">
                        <label>Preview</label>
                        <div id="note-preview" class="markdown-preview"></div>
                    </div>
                </div>
            </div>
            <div id="note-error" class="error-message"></div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary">Save</button>
                <button type="button" class="btn-secondary" id="note-modal-cancel">Cancel</button>
                <button type="button" class="btn-danger" id="delete-note-btn" style="display:none;">Delete</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js"></script>
<script src="{{ url_for('static', filename='js/notes.js') }}"></script>
{% endblock %}