{% if error is defined and error %}
<div class="error-box on">{{ error }}</div>
{% endif %}

{% if result is defined and result %}
<div class="result-card on" id="result-data" data-result='{{ result | tojson }}'>
    <div class="result-header">
        <span>Evaluation</span>
        <div style="display:flex; align-items:center; gap:8px;">
            <span class="result-count">{{ result|length }} pair(s)</span>
            <button class="copy-btn" onclick="copyResult()" title="Copy to clipboard">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" />
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                </svg>
            </button>
        </div>
    </div>
    <div class="result-grid">
        {% for prod, inj in result %}
        <div class="result-pair">
            <span class="rp-prod">{{ prod }}</span>
            <span class="rp-arrow">→</span>
            <span class="rp-inj">{{ inj }}</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}