{{template "base.html" .}}

{{define "content"}}
<div class="max-w-4xl mx-auto p-6">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-white mb-4">Create New Note</h1>
        {{if .folder_path}}
        <p class="text-gray-400">
            <i class="fas fa-folder mr-2"></i>
            Creating in: <span class="text-blue-400">{{.folder_path}}</span>
        </p>
        {{end}}
    </div>

    <!-- Create Form -->
    <form id="create-form" class="space-y-6">
        <div class="bg-gray-800 rounded-lg p-6">
            <!-- Title Input -->
            <div class="mb-6">
                <label for="title" class="block text-sm font-medium text-gray-300 mb-2">
                    Note Title
                </label>
                <input type="text" id="title" name="title" required
                       class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="Enter note title (e.g., My New Note)">
                <p class="text-xs text-gray-500 mt-1">The .md extension will be added automatically</p>
            </div>

            <!-- Content Editor -->
            <div class="mb-6">
                <label for="content" class="block text-sm font-medium text-gray-300 mb-2">
                    Content
                </label>
                <textarea id="content" name="content" rows="20"
                          class="editor-textarea"
                          placeholder="# Your Note Title

Start writing your note here using Markdown syntax...

## Examples

- **Bold text**
- *Italic text*
- [Links](https://example.com)
- ![Images](image.png)
- `Code snippets`

```javascript
// Code blocks
console.log('Hello, World!');
```

> Blockquotes

| Tables | Work | Too |
|--------|------|-----|
| Cell 1 | Cell 2 | Cell 3 |
"></textarea>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-between">
                <a href="{{if .folder_path}}/folder/{{.folder_path}}{{else}}/{{end}}" class="btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Cancel
                </a>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i>Create Note
                </button>
            </div>
        </div>
    </form>
</div>
{{end}}

{{define "scripts"}}
<script>
    const createForm = document.getElementById('create-form');
    const titleInput = document.getElementById('title');
    const contentTextarea = document.getElementById('content');

    createForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const title = titleInput.value.trim();
        const content = contentTextarea.value;
        const folderPath = '{{.folder_path}}';

        if (!title) {
            showNotification('Please enter a note title', 'error');
            return;
        }

        const formData = new FormData();
        formData.append('title', title);
        formData.append('content', content);
        formData.append('folder_path', folderPath);

        fetch('/create', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Note created successfully', 'success');
                if (data.redirect) {
                    window.location.href = data.redirect;
                }
            } else {
                throw new Error(data.error || 'Failed to create note');
            }
        })
        .catch(error => {
            showNotification('Error: ' + error.message, 'error');
        });
    });

    // Auto-resize textarea
    contentTextarea.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });

    // Keyboard shortcuts
    contentTextarea.addEventListener('keydown', function(e) {
        // Ctrl+S or Cmd+S to save
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            createForm.dispatchEvent(new Event('submit'));
        }
        
        // Tab for indentation
        if (e.key === 'Tab') {
            e.preventDefault();
            const start = this.selectionStart;
            const end = this.selectionEnd;
            const value = this.value;
            
            this.value = value.substring(0, start) + '\t' + value.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
        }
    });
</script>
{{end}}