{% set messages = get_flashed_messages(request) %}
{% if messages %}
  <div class="mb-6 space-y-3">
    {% for msg in messages %}
      <div class="
        {% if msg.category == 'success' %} bg-green-900/20 border-green-500/50 text-green-400
        {% elif msg.category == 'error' %} bg-red-900/20 border-red-500/50 text-red-400
        {% else %} bg-blue-900/20 border-blue-500/50 text-blue-400
        {% endif %}
        border px-4 py-3 rounded-xl relative shadow-lg" role="alert">
        
        <div class="flex justify-between items-center">
            <span class="block sm:inline font-medium">{{ msg.message }}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="text-current opacity-50 hover:opacity-100 text-xl font-bold">&times;</button>
        </div>

        {% if msg.trace %}
        <div class="mt-3 pt-3 border-t border-current/10">
            <details class="group">
                <summary class="cursor-pointer text-[10px] uppercase font-black tracking-widest opacity-60 hover:opacity-100 flex items-center gap-2">
                    <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                    View Diagnostic Trace
                </summary>
                <div class="mt-3 relative">
                    <pre class="bg-black/60 p-4 rounded-lg font-mono text-[10px] overflow-x-auto custom-scrollbar text-current border border-current/5 max-h-64">{{ msg.trace }}</pre>
                    <button onclick="copyTrace(this, `{{ msg.trace | e }}`)" 
                            class="absolute top-2 right-2 bg-white/5 hover:bg-white/10 border border-white/10 px-2 py-1 rounded text-[9px] font-bold uppercase transition-all">
                        Copy Trace
                    </button>
                </div>
            </details>
        </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  <script>
    function copyTrace(btn, text) {
        // Unescape the text received from the template
        const textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            const original = btn.innerText;
            btn.innerText = "COPIED ✓";
            btn.classList.add('text-green-400');
            setTimeout(() => {
                btn.innerText = original;
                btn.classList.remove('text-green-400');
            }, 2000);
        } catch (err) {
            console.error('Copy failed', err);
        }
        document.body.removeChild(textArea);
    }
  </script>
{% endif %}