{% extends "base.html" %}

{% block content %}
<section class="playground-page">
    <div class="playground-container">
        <div class="editor-panel">
            <div class="panel-header">
                <div class="file-path-container">
                    <input type="text" id="file-path" value="com/example/forum/thread.mlf" spellcheck="false" />
                </div>
                <button id="share-btn" class="share-btn" title="Share this code">Share</button>
            </div>
            <textarea id="mlf-editor" spellcheck="false">/// A forum thread
record thread {
    /// Thread title
    title!: string constrained {
        maxLength: 200,
        minLength: 1,
    },
    /// Thread body
    body: string constrained {
        maxLength: 10000,
    },
    /// Thread creation timestamp
    createdAt!: Datetime,
}</textarea>
        </div>

        <div class="output-panel">
            <div class="panel-header">
                <div class="tabs">
                    <button class="tab active" data-tab="generate">Generate</button>
                    <button class="tab" data-tab="validate">Validate</button>
                </div>
                <div class="generator-selector">
                    <select id="generator-select">
                        <option value="json">Lexicon (JSON)</option>
                        <option value="typescript">TypeScript</option>
                        <option value="go">Go</option>
                        <option value="rust">Rust</option>
                    </select>
                </div>
            </div>

            <div id="generate-output" class="output-content active">
                <textarea id="generate-result" readonly spellcheck="false" placeholder="Generated code will appear here..."></textarea>
            </div>

            <div id="validate-output" class="output-content">
                <textarea id="record-input" placeholder='Paste a JSON record to validate, e.g.:
{
  "title": "Welcome to the forums!",
  "body": "This is my first thread.",
  "createdAt": "2024-01-15T10:30:00Z"
}'></textarea>
                <div id="validate-result"></div>
            </div>
        </div>
    </div>
    <div id="errors" class="errors"></div>
</section>
{% endblock %}

{% block extra_scripts %}
<script type="module" src="{{ get_url(path='js/app.js') }}"></script>
{% endblock %}