@props(['content' => '', 'class' => ''])

<div
    class="markdown-content {{ $class }}"
    x-data="{
        init() {
            if (typeof window.renderMarkdown === 'function') {
                window.renderMarkdown(@js($content), this.$el);
            } else {
                // 如果渲染函数未加载，等待加载
                setTimeout(() => {
                    if (typeof window.renderMarkdown === 'function') {
                        window.renderMarkdown(@js($content), this.$el);
                    }
                }, 100);
            }
        }
    }"
    x-init="init()"
>
    <!-- Markdown 内容将在这里渲染 -->
    <div class="text-gray-500 italic">
        Loading markdown content...
    </div>
</div>

@once
    @push('scripts')
        <link rel="stylesheet" href="/css/katex/katex.min.css">
    @endpush
@endonce