AI Prompt Editor

<div class="w-full max-w-3xl mx-auto bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden shadow-2xl">
        <div class="flex items-center justify-between px-4 py-2 border-b border-zinc-800 bg-zinc-950/50">
            <span class="text-xs font-semibold text-zinc-500 uppercase tracking-wider">System Prompt Editor</span>
            <div class="flex gap-2">
                <div class="w-2.5 h-2.5 rounded-full bg-zinc-700"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-zinc-700"></div>
            </div>
        </div>
        <div class="p-6">
            <div class="mb-4 flex flex-wrap gap-2">
                <span
                    class="px-2 py-1 bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 rounded text-xs font-mono cursor-pointer hover:bg-indigo-500/20 transition-all">{{user_name}}</span>
                <span
                    class="px-2 py-1 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded text-xs font-mono cursor-pointer hover:bg-emerald-500/20 transition-all">{{last_purchase}}</span>
                <span
                    class="px-2 py-1 bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded text-xs font-mono cursor-pointer hover:bg-amber-500/20 transition-all">{{ticket_id}}</span>
            </div>
            <textarea
                class="w-full h-40 bg-transparent border-none text-zinc-300 resize-none focus:ring-0 font-mono text-sm leading-relaxed"
                placeholder="Write your system instructions here... Use {{}} to inject variables.">You are a helpful assistant for {{user_name}}. Your goal is to resolve ticket #{{ticket_id}} by referencing their last purchase: {{last_purchase}}.
    
Tone: Professional, empathetic, and concise.</textarea>
        </div>
        <div class="px-6 py-4 bg-zinc-950/50 flex justify-between items-center border-t border-zinc-800">
            <div class="flex items-center gap-4">
                <span class="text-xs text-zinc-500 font-medium">142 tokens</span>
                <div class="h-4 w-px bg-zinc-800"></div>
                <span class="text-xs text-zinc-500 font-medium italic">gpt-4-turbo-preview</span>
            </div>
            <button
                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-bold transition-all flex items-center gap-2">
                Save Prompt
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M5 13l4 4L19 7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </button>
        </div>
    </div>

    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const originalText = btn.innerText;
                if (originalText === 'PROCESSING...' || originalText === 'SUCCESS') return;
                btn.innerText = 'PROCESSING...';
                btn.classList.add('opacity-50');
                setTimeout(() => {
                    btn.innerText = 'SUCCESS';
                    btn.classList.remove('opacity-50');
                    setTimeout(() => btn.innerText = originalText, 1500);
                }, 800);
            });
        });
    </script>