{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Serial · Advanced{% endblock %}
{% block content %}
    {{ page_header('Serial', tabs=tabs, active_tab='advanced') }}
    <form method="post" action="{{ url_for('serial_advanced') }}" data-dirty-track
          x-data="{ valid: null, message: '' }">
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
            <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 px-4 py-2">
                <h3 class="font-semibold text-sm">Configuration (YAML)</h3>
                <div class="flex items-center gap-2 text-xs">
                    <template x-if="valid === true"><span class="text-emerald-600">✓ <span x-text="message"></span></span></template>
                    <template x-if="valid === false"><span class="text-red-600">✗ <span x-text="message"></span></span></template>
                    <button type="button" @click="
                        const body = document.getElementById('yaml-editor').value;
                        fetch('/api/validate-yaml', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify({yaml: body})
                        }).then(r => r.json()).then(d => { valid = d.valid; message = d.message; })
                        .catch(() => { valid = false; message = 'Validation request failed'; });"
                        class="px-2 py-1 rounded border border-slate-200 dark:border-slate-700"
                        title="Checks each connection block for: anchor name, accepter, connector, and valid TCP port">Validate</button>
                </div>
            </div>
            <textarea id="yaml-editor" name="yaml_content"
                      class="w-full font-mono text-sm p-4 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border-0 focus:ring-0 min-h-[400px]"
                      spellcheck="false">{{ yaml_content }}</textarea>
        </div>
        <div class="mt-4 flex justify-between">
            <a href="{{ url_for('serial_advanced') }}"
               class="inline-flex items-center gap-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 px-4 py-2 rounded-md text-sm">Revert</a>
            <button type="submit"
                    class="inline-flex items-center gap-2 btn-primary px-4 py-2 rounded-md text-sm font-medium">
                <i data-lucide="save" class="h-4 w-4"></i> Save YAML
            </button>
        </div>
    </form>
{% endblock %}