<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
    <h3 class="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100">
        可用变量
    </h3>
    
    <div class="text-sm text-gray-600 dark:text-gray-400 mb-4">
        在提示词模板中使用 <code class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded">{变量名}</code> 格式引用变量
    </div>

    @php
        $variables = config('prompt_variables.variables', []);
        $categories = config('prompt_variables.categories', []);
        $groupedVariables = collect($variables)->groupBy('category');
    @endphp

    <div class="space-y-4">
        @foreach($groupedVariables as $category => $vars)
            <div>
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">
                    {{ $categories[$category] ?? $category }}
                </h4>
                <div class="space-y-2">
                    @foreach($vars as $variable)
                        <div class="flex items-start gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <code class="px-2 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 rounded text-xs font-mono whitespace-nowrap">
                                {{'{'}}{{ $variable['name'] }}{{'}'}}
                            </code>
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-sm text-gray-900 dark:text-gray-100">
                                    {{ $variable['label'] }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $variable['description'] }}
                                </div>
                                <div class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                                    示例: <span class="font-mono">{{ $variable['example'] }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">使用示例</h4>
        <div class="bg-gray-50 dark:bg-gray-900 rounded p-3 text-xs font-mono">
            <div class="text-gray-600 dark:text-gray-400">你好，{{'{'}}user{{'}'}}！</div>
            <div class="text-gray-600 dark:text-gray-400">当前时间是 {{'{'}}time{{'}'}}，你在 {{'{'}}station{{'}'}}</div>
            <div class="text-gray-600 dark:text-gray-400">请参考以下知识库：{{'{'}}knowledge_bases{{'}'}}。</div>
        </div>
    </div>
</div>
