{% if snapshot.chargers_truncated %}
<p class="projection-overflow" role="status">
    Showing the first {{ snapshot.charger_limit }} chargers. Additional chargers are not shown.
</p>
{% endif %}
{% for charger in snapshot.chargers %}
<div class="charger-card" role="region" aria-label="Charger {{ charger.name }}">
    <div class="card-header bg-dark border-bottom border-secondary py-3" style="background:#000;color:#fff;">
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="mb-0 h5" style="color:#fff;">{{ charger.name }}</h2>
            <span class="badge bg-secondary opacity-100" style="background:#333;color:#fff;">{{ charger.model_name }}</span>
        </div>
        <small class="text-muted" style="color:#444 !important;">{{ charger.ip_address }}</small>
    </div>

    <div class="slots-list">
        {% for slot in charger.slots %}
        <div class="slot-item {% if not slot.is_functional %}opacity-50{% endif %}" role="group" aria-label="Slot {{ slot.slot_number }}{% if slot.occupied %} occupied{% else %} empty{% endif %}">
            <div class="slot-number" style="color:#111;">{{ slot.slot_number }}</div>

            <div class="d-flex align-items-center flex-grow-1 gap-3">
                {% if slot.occupied %}
                    {% with performer=slot.performer %}
                        {% if performer and performer.photo_url %}
                            <img src="{{ performer.photo_url }}" class="performer-photo" alt="Photo of {{ performer.name }}" style="border:2px solid #111;"/>
                        {% else %}
                            <div class="performer-photo d-flex align-items-center justify-content-center bg-secondary" style="background:#333;">
                                <span class="small text-light">No photo</span>
                            </div>
                        {% endif %}

                        <div class="flex-grow-1">
                            <div class="fw-bold" style="color:#111;">{{ performer.name|default:slot.device_serial }}</div>
                            <div class="small text-muted" style="color:#444;">{{ performer.title|default:slot.device_model }}</div>

                            {% if slot.device_status == "updating" %}
                                <div class="status-updating" style="color:#005a8c;">
                                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-label="Updating"></span>
                                    Firmware: {{ slot.device_firmware_version }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="text-end" style="width: 80px;">
                            <div class="battery-bar mb-1" style="background:#444;">
                                <div class="battery-fill {% if slot.battery_percent < 20 %}bg-danger{% elif slot.battery_percent < 50 %}bg-warning{% else %}bg-success{% endif %}"
                                     style="width: {{ slot.battery_percent|default:0 }}%;background-color:{% if slot.battery_percent < 20 %}#a60000{% elif slot.battery_percent < 50 %}#f7b500{% else %}#005a00{% endif %};color:#fff;" aria-label="Battery at {{ slot.battery_percent|default:'unknown' }} percent"></div>
                            </div>
                            <div class="small fw-bold" style="color:#111;">{{ slot.battery_percent|default:"?" }}%</div>
                        </div>
                    {% endwith %}
                {% else %}
                    <div class="text-muted italic small py-2" style="color:#444;">Empty Slot</div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        {% if charger.slots_truncated %}
        <p class="projection-overflow" role="status">
            Showing the first {{ charger.slot_limit }} slots. Additional slots are not shown.
        </p>
        {% endif %}
    </div>
</div>
{% endfor %}