{# Partial: _legend_modal.html.j2 — Legend overlay modal (both modes) #}
{# Implements: REQ-p00006-A #}

<div class="modal-overlay" id="legend-modal" onclick="closeLegendOnOverlay(event)">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h3 class="modal-title">Legend</h3>
            <button class="modal-close" onclick="toggleLegend()">&times;</button>
        </div>

        {% for group_name, entries in catalog.grouped_entries() %}
        <div class="legend-section">
            <h4>{{ group_name }}</h4>
            {% for entry in entries %}
            <div class="legend-item" {% if entry.long_description %}title="{{ entry.long_description }}"{% endif %}>
                {% if entry.color_key %}
                <span class="legend-swatch val-{{ entry.color_key }}"></span>
                <span>{{ entry.label }}</span>
                <span>{{ entry.description }}</span>
                {% elif entry.symbol %}
                <span class="legend-icon {% if entry.css_class %}{{ entry.css_class }}{% endif %}">{{ entry.symbol | safe }}</span>
                <span>{{ entry.description or entry.label }}</span>
                {% elif entry.css_class %}
                <span class="{{ entry.css_class }}" style="font-size: 0.75rem;">{{ entry.label }}</span>
                <span>{{ entry.description or entry.label }}</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</div>
