@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')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
    @endpush
@endonce