{{define "note"}}
  {{template "base" .}}
{{end}}

{{define "note_content"}}
<div class="max-w-4xl mx-auto p-6">
    <!-- Note Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-3xl font-bold text-white">{{.title}}</h1>
            <div class="flex items-center space-x-3">
                <a href="/edit/{{.note_path}}" class="btn-primary">
                    <i class="fas fa-edit mr-2"></i>Edit
                </a>
                <a href="/download/{{.note_path}}" class="btn-secondary">
                    <i class="fas fa-download mr-2"></i>Download
                </a>
                <button class="btn-danger delete-note-btn" data-path="{{.note_path}}">
                    <i class="fas fa-trash mr-2"></i>Delete
                </button>
            </div>
        </div>
        
        {{if .folder_path}}
        <p class="text-gray-400">
            <i class="fas fa-folder mr-2"></i>
            <a href="/folder/{{.folder_path}}" class="text-blue-400 hover:text-blue-300">{{.folder_path}}</a>
        </p>
        {{end}}
    </div>

    <!-- Note Content | safeHTML -->
    <div class="bg-gray-800 rounded-lg p-6">
        <div class="prose prose-dark max-w-none">
            {{.content | safeHTML}}
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="modal-overlay hidden">
    <div class="modal-content">
        <h3 class="text-lg font-medium text-white mb-4">Confirm Delete</h3>
        <p class="text-gray-300 mb-6">Are you sure you want to delete this note? This action cannot be undone.</p>
        <div class="flex justify-end space-x-3">
            <button id="cancel-delete" class="btn-secondary">Cancel</button>
            <button id="confirm-delete" class="btn-danger">Delete</button>
        </div>
    </div>
</div>
{{end}}

{{define "note_scripts"}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const deleteBtn = document.querySelector('.delete-note-btn');
    const modal = document.getElementById('delete-modal');
    const cancelBtn = document.getElementById('cancel-delete');
    const confirmBtn = document.getElementById('confirm-delete');
    
    if (deleteBtn) {
        deleteBtn.addEventListener('click', function() {
            modal.classList.remove('hidden');
        });
    }
    
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function() {
            modal.classList.add('hidden');
        });
    }
    
    if (confirmBtn) {
        confirmBtn.addEventListener('click', function() {
            const path = deleteBtn.dataset.path;
            fetch(`/delete/${path}`, {
                method: 'DELETE'
            })
            .then(response => {
                if (response.ok) {
                    window.location.href = '/';
                } else {
                    alert('Error deleting note');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error deleting note');
            });
        });
    }
    
    // Re-highlight code blocks that might have been added dynamically
    hljs.highlightAll();
});
</script>
{{end}}