{# What is on the mirror, as its three bands (top, middle, bottom), each with left, center and right.
   Heights follow the content, so a busy position never squeezes the others. Needs screen_layout; with
   interactive set, a module opens its settings and has a switch that turns it on or off. #}
{% macro icon(m) %}{% if m.icon.startswith('data:') %}<span class="module-svg-icon" style="--icon: url('{{ m.icon }}')" aria-hidden="true"></span>{% else %}<i class="fas {{ m.icon }}" aria-hidden="true"></i>{% endif %}{% endmacro %}
<div class="mirror-pane">
    {% for row in ['top', 'middle', 'bottom'] %}
        <div class="mirror-band">
            <span class="mirror-band-label">{{ row|capitalize }}</span>
            <div class="mirror-slots">
                {% for col in ['left', 'center', 'right'] %}
                    {% set placed = screen_layout.get(row ~ '_' ~ col, []) %}
                    <div class="mirror-slot{% if not placed %} empty{% endif %}" title="{{ row|capitalize }} {{ col }}">
                        {% for m in placed %}
                            {% if not m.module %}
                                <div class="mirror-tile missing">
                                    <span class="mirror-tile-top">{{ icon(m) }}</span>
                                    <span class="mirror-tile-name">{{ m.name }}</span>
                                    <span class="mirror-tile-note">{% if m.disabled_reason %}Off: {{ m.disabled_reason }}{% else %}Not installed{% endif %}</span>
                                    {% if interactive %}
                                        {# Its module is gone (uninstalled elsewhere, a backup from another mirror), so only the settings are left #}
                                        <button type="button" class="btn secondary btn-sm"
                                                hx-post="/admin/panels/modules/config/{{ m.id }}/remove?instance_id={{ m.id }}"
                                                hx-confirm="Remove {{ m.name }} from the mirror? Its settings are deleted."
                                                hx-target="#global-status">Remove</button>
                                    {% endif %}
                                </div>
                            {% elif interactive %}
                                {# The name is the button; its ::after covers the tile, the switch sits above it #}
                                <div class="mirror-tile{% if not m.enabled %} off{% endif %}">
                                    <span class="mirror-tile-top">
                                        {{ icon(m) }}
                                        <label class="switch">
                                            <input type="checkbox" {% if m.enabled %}checked{% endif %}
                                                   aria-label="{{ m.name }} on the mirror"
                                                   hx-post="/admin/panels/modules/config/{{ m.module }}/toggle?instance_id={{ m.id }}"
                                                   hx-trigger="change" hx-swap="none"
                                                   hx-on::after-request="if (event.detail.successful) htmx.trigger(document.body, 'refreshModules')">
                                            <span class="slider round"></span>
                                        </label>
                                    </span>
                                    <button type="button" class="mirror-tile-name"
                                            aria-label="{{ m.name }} settings, {{ row }} {{ col }}"
                                            hx-get="/admin/panels/modules/config/{{ m.module }}?instance_id={{ m.id }}"
                                            hx-target="#config-fields-global"
                                            onclick='openConfigureModule({{ m.module | tojson }}, {{ m.package | tojson }}, {{ m.id | tojson }})'>{{ m.name }}</button>
                                </div>
                            {% else %}
                                <div class="mirror-tile{% if not m.enabled %} off{% endif %}">
                                    <span class="mirror-tile-top">{{ icon(m) }}{% if not m.enabled %}<span class="mirror-tile-note">Off</span>{% endif %}</span>
                                    <span class="mirror-tile-name">{{ m.name }}</span>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>