@page "/dev/creator-test"
@using Microsoft.AspNetCore.Authorization
@attribute [AllowAnonymous]

<PageTitle>Markdown Creator Test</PageTitle>

<div class="creator-test-container glass-panel">
    <div class="test-header">
        <h1>Milkdown WYSIWYG Integration (Stage 1)</h1>
        <p class="subtitle">Verifying bi-directional Markdown flow and GFM rendering.</p>
    </div>

    <div class="editor-section">
        <MarkdownEditor InitialMarkdown="@_initialMarkdown" OnSave="HandleSave" Height="400px" />
    </div>

    <div class="result-section">
        <h3>Retrieved Markdown Content</h3>
        <p class="description">This block shows the content received from the editor when you click "Fetch Markdown Content".</p>
        <div class="pre-wrapper">
            @if (string.IsNullOrEmpty(_savedMarkdown))
            {
                <span class="placeholder">No content fetched yet. Click "Fetch Markdown Content" above to retrieve data.</span>
            }
            else
            {
                <pre><code>@_savedMarkdown</code></pre>
            }
        </div>
    </div>
</div>

@code {
    private readonly string _initialMarkdown = @"# Milkdown WYSIWYG Test Page

This is a demonstration of the **Milkdown** editor embedded inside a Blazor WASM component.

## GFM Features Support

The editor supports Github Flavored Markdown out-of-the-box:

1. **Task Lists**
   - [x] Create reusable Blazor component
   - [x] Configure ESM dynamic wrapper
   - [ ] Implement stage 2 features

2. **Tables**

| Feature | Stage 1 Status | Stage 2 Plan |
| :--- | :---: | :---: |
| WYSIWYG Mode | Active | Polish UI |
| C# Interop | Done | Auto-Sync |
| GFM Support | Verified | Custom Nodes |

3. **Code Formatting**
```csharp
public class MarkdownEditor : ComponentBase
{
    // C# interop logic
}
```

Feel free to edit this text and click **Fetch Markdown Content** below!";

    private string _savedMarkdown = string.Empty;

    private void HandleSave(string markdown)
    {
        _savedMarkdown = markdown;
        StateHasChanged();
    }
}