{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <h1>Notepad</h1>
    {% if editing %}<a class="btn btn-sm" href="{{ url_for('tools.notepad') }}">New Note</a>{% endif %}
</div>

<div class="grid-2">
    <div class="panel form-card">
        <h3>{{ 'Edit Note' if editing else 'New Note' }}</h3>

        <form method="post" action="{{ url_for('tools.notepad_save') }}" class="form-grid">
            {% if editing %}<input type="hidden" name="note_id" value="{{ editing.id }}">{% endif %}

            <div class="form-group full-width">
                <label>Title</label>
                <input name="title" value="{{ editing.title if editing else '' }}" placeholder="Untitled note">
            </div>

            <div class="form-group full-width">
                <label>Content</label>
                <textarea name="content" rows="14">{{ editing.content if editing and editing.content else '' }}</textarea>
            </div>

            <label class="check">
                <input type="checkbox" name="pinned" {% if editing and editing.pinned %}checked{% endif %}>
                Pin to top
            </label>

            <div class="form-actions full-width">
                <button class="btn" type="submit">{{ 'Update Note' if editing else 'Save Note' }}</button>
            </div>
        </form>
    </div>

    <div class="panel">
        <h3>My Notes</h3>

        <div class="table-wrap">
            <table class="modern-table">
                <thead><tr><th>Title</th><th>Updated</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for n in notes %}
                    <tr>
                        <td>
                            <a href="{{ url_for('tools.notepad_edit', note_id=n.id) }}"><strong>{{ n.title }}</strong></a>
                            {% if n.pinned %}<span class="badge badge-warning">Pinned</span>{% endif %}
                            {% if n.content %}<br><small>{{ n.content[:80] }}{% if n.content|length > 80 %}...{% endif %}</small>{% endif %}
                        </td>
                        <td>{{ n.updated_at }}</td>
                        <td>
                            <form method="post" action="{{ url_for('tools.notepad_delete', note_id=n.id) }}"
                                  onsubmit="return confirm('Delete this note?')">
                                <button class="btn btn-sm danger" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="3" style="text-align:center;">No notes yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}