<%- include('partials/header') %>
<%- include('partials/welcome', { 
    user: user,
    contextButtons: [
        { href: `/campaign/${note.campaign_id}/view`, text: 'Back to Campaign', class: 'btn-secondary' }
    ]
}) %>

        <main class="character-creation">
            <h2>Edit Note</h2>
            
            <form action="/note/<%= note.id %>/edit" method="POST" class="character-form">
                <section class="form-section">
                    <div class="form-group">
                        <label for="title">Note Title</label>
                        <input type="text" name="title" id="title" required value="<%= note.title %>">
                    </div>
                    <div class="form-group">
                        <label for="content">Note Content</label>
                        <textarea name="content" id="content" rows="10" required><%= note.content %></textarea>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="visibility" value="private" <%= note.visibility === 'private' ? 'checked' : '' %>>
                            Make this note private <span style="color:#888;">(Visible only to you and the GM)</span>
                        </label>
                    </div>
                </section>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                    <a href="/campaign/<%= note.campaign_id %>/view" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
            <div class="delete-section" style="margin-top: 40px; text-align: center;">
                <hr style="border-color: #ff4444; margin-bottom: 20px;">
                <h3 style="color: #ff4444;">Danger Zone</h3>
                <p style="color: #cccccc; margin-bottom: 15px;">Deleting a note is permanent and will also remove all of its replies.</p>
                <form action="/note/<%= note.id %>/delete" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this note and all its replies?');">
                    <button type="submit" class="btn" style="border-color: #ff4444; color: #ff4444;">Delete Note</button>
                </form>
            </div>
        </main>
        
<%- include('partials/footer') %>