{% extends "base.html" %}
{% block head %}
<script src="/static/js/vendor/tiptap-bundle.min.js"></script>
{% endblock %}

{% block content %}
<!-- 左侧边栏 -->
<aside class="sidebar">
    <input class="input" type="text" placeholder="搜索笔记…" id="noteSearch">

    <button class="btn btn-primary btn-block" onclick="createNote()">新建笔记</button>

    <div class="sidebar-label">
        <span>文件夹</span>
        <span onclick="addFolder()" style="cursor:pointer; color:var(--brand); font-size:15px;" title="新建文件夹">+</span>
    </div>

    <div style="overflow-y:auto; flex-shrink:1;">
        {% for folder in folders %}
        <div class="folder-item {% if loop.first %}active{% endif %}" data-folder-id="{{ folder.id }}"
             onclick="filterByFolder({{ folder.id }}, this)" style="position:relative;">
            <span>📂</span>
            <span style="flex:1;">{{ folder.name }}</span>
            <span class="count">{{ folder.notes|length }}</span>
            <span class="folder-more" onclick="event.stopPropagation();toggleFolderMenu(this)" title="更多">⋮</span>
            <div class="folder-menu hidden">
                <div class="folder-menu-item" onclick="renameFolder({{ folder.id }})">✏️ 重命名</div>
                <div class="folder-menu-item danger" onclick="deleteFolder({{ folder.id }})">🗑 删除</div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 笔记列表 -->
    <div id="folderNoteList" class="hidden" style="flex:1; overflow-y:auto;"></div>

    <div class="sidebar-label">标签</div>
    <div style="display:flex; flex-wrap:wrap; gap:4px;">
        {% for tag in tags %}
        <span class="tag-badge" onclick="filterByTag({{ tag.id }}, this)">{{ tag.name }}</span>
        {% endfor %}
        <span class="tag-badge tag-add" onclick="addTag()">+</span>
    </div>
</aside>

<!-- 右侧编辑器 -->
<section class="content">
    <div class="content-header">
        <input class="content-title" id="noteTitle" value="" placeholder="无标题笔记">
        <div class="toggle-group">
            <button class="active" data-mode="edit" onclick="setViewMode('edit')">编辑</button>
            <button data-mode="preview" onclick="setViewMode('preview')">预览</button>
            <button data-mode="split" onclick="setViewMode('split')">分屏</button>
        </div>
        <span class="save-badge" id="saveStatus">已保存</span>
        <button class="btn btn-danger-ghost btn-sm" onclick="deleteCurrentNote()">删除</button>
    </div>

    <div class="editor-wrap" id="editorContainer">
        <div class="editor-pane" id="editPane">
            <div id="tiptapToolbar" class="tb-bar"></div>
            <div id="tiptapEditor"></div>
        </div>
        <div class="editor-pane hidden" id="previewPane">
            <div id="previewContent" style="font-size:14px; line-height:1.8;"></div>
        </div>
    </div>
</section>

<input type="hidden" id="currentNoteId" value="">
{% if notes %}<input type="hidden" id="firstNoteId" value="{{ notes[0].id }}">{% endif %}
{% endblock %}

{% block scripts %}
<script src="/static/js/editor.js"></script>
<script src="/static/js/notes.js"></script>
{% endblock %}