@php
    $inputName = $field ?? 'body';
    $previewElementId = $previewId ?? 'preview-'.str_replace(['[', ']', '.'], '-', $inputName);
    $inputValue = old($inputName, $value ?? '');
    $isRequired = (bool) ($required ?? false);
    $editorRows = (int) ($rows ?? 14);
@endphp

<div class="editor-shell">
    <div class="editor-card js-md-shell">
        <div class="editor-card-head editor-card-head-split">
            <div class="editor-card-head-main">
                <span>
                    {{ $label ?? '正文内容' }}
                    @if($isRequired)
                        <span class="required-star">*</span>
                    @endif
                </span>
                <div class="editor-tab-switch" role="tablist" aria-label="编辑区域切换">
                    <button class="editor-tab-btn js-md-tab-btn is-active" type="button" data-tab="edit" aria-selected="true">编辑</button>
                    <button class="editor-tab-btn js-md-tab-btn" type="button" data-tab="preview" aria-selected="false">预览</button>
                </div>
            </div>
            <div class="editor-card-head-actions">
                <button class="btn btn-sm btn-outline-secondary js-md-fullscreen-btn" type="button" aria-label="切换全屏编辑">
                    <i class="bi bi-arrows-fullscreen me-1"></i>全屏
                </button>
                <button class="btn btn-sm btn-outline-primary js-md-upload-advanced-btn" type="button" data-editor-target="{{ $inputName }}">
                    <i class="bi bi-image me-1"></i>上传图片
                </button>
            </div>
        </div>

        <div class="editor-panels">
            <div class="editor-panel is-active" data-panel="edit">
                <div class="p-2">
                    <textarea
                        class="form-control js-md-editor-modern"
                        name="{{ $inputName }}"
                        rows="{{ $editorRows }}"
                        data-preview-target="#{{ $previewElementId }}"
                        placeholder="{{ $placeholder ?? '支持 Markdown 语法，建议使用标题和列表组织内容。' }}"
                        @if($isRequired) required @endif
                        @if(!empty($minlength)) minlength="{{ (int) $minlength }}" @endif
                    >{{ $inputValue }}</textarea>

                    @if(!empty($hint))
                        <div class="form-hint">{{ $hint }}</div>
                    @endif
                </div>
            </div>

            <div class="editor-panel" data-panel="preview">
                <div class="preview-card-head">
                    <span>实时预览</span>
                    <span class="text-muted">自动渲染</span>
                </div>
                <div class="preview-content js-md-preview" id="{{ $previewElementId }}">
                    <div class="preview-placeholder">在左侧输入 Markdown 内容，这里会实时显示预览。</div>
                </div>
            </div>
        </div>
    </div>
</div>