{% if error %}
<div class="alert alert-danger">
    <i class="bi bi-exclamation-triangle"></i>
    <strong>Error:</strong> {{ error }}
</div>
{% endif %}

{% if outputs %}
<div class="d-flex flex-column gap-3" id="outputs-list">
    {% for slot_name in slots_defined %}
    {% if slot_name in outputs %}
    <div class="card output-card" data-slot="{{ slot_name }}">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <button type="button" class="btn btn-sm pin-btn me-2"
                        onclick="togglePin(this)" title="Pin to top">
                    <i class="bi bi-pin"></i>
                </button>
                <code class="slot-name">{{ slot_name }}</code>
            </div>
            <button class="btn btn-link btn-sm text-muted p-0" onclick="copyOutput('{{ slot_name }}')"
                    title="Copy to clipboard">
                <i class="bi bi-clipboard"></i>
            </button>
        </div>
        <div class="card-body py-2">
            <div class="output-value" id="output-{{ slot_name }}">{% if outputs[slot_name] is mapping or (outputs[slot_name] is iterable and outputs[slot_name] is not string) %}<pre class="mb-0 small">{{ outputs[slot_name] | tojson(indent=2) }}</pre>{% else %}{{ outputs[slot_name] }}{% endif %}</div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>

{% else %}
<p class="text-muted text-center mt-5">
    <i class="bi bi-arrow-left-circle"></i>
    No outputs yet. Run the prompt to see results.
</p>
{% endif %}