{% extends "micboard/base.html" %}

{% block extrahead %}
<style>
    :root {
        --display-width: {{ display_width_px }}px;
    }
    .charger-container {
        width: var(--display-width);
        margin: 0 auto;
        padding: 20px;
        background: #1a1a1a;
        min-height: 100vh;
        color: #eee;
    }
    .charger-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 24px;
    }
    .charger-card {
        background: #2d2d2d;
        border: 1px solid #444;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.2s;
    }
    .performer-photo {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #555;
    }
    .slot-item {
        border-bottom: 1px solid #3d3d3d;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .slot-item:last-child {
        border-bottom: none;
    }
    .slot-number {
        font-weight: bold;
        color: #888;
        font-size: 0.9em;
        width: 24px;
    }
    .battery-bar {
        height: 8px;
        background: #444;
        border-radius: 4px;
        flex-grow: 1;
        overflow: hidden;
    }
    .battery-fill {
        height: 100%;
        transition: width 0.5s ease-in-out;
    }
    .status-updating {
        color: #0dcaf0;
        font-style: italic;
        font-size: 0.8em;
    }
    @media (max-width: {{ display_width_px }}px) {
        .charger-container {
            width: 100%;
            transform: scale(calc(100vw / {{ display_width_px }}));
            transform-origin: top center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="charger-container" role="main">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Charger Dashboard</h1>
            <span class="text-muted">Display Width: {{ display_width_px }}px</span>
        </div>
        <form class="d-flex gap-2" hx-post="{% url 'micboard:charger_dashboard' %}" hx-target=".charger-container" hx-select=".charger-container" hx-swap="outerHTML" aria-label="Set display width">
            {% csrf_token %}
            <label for="display-width-input" class="visually-hidden">Display width (pixels)</label>
            {{ display_width_form.display_width_px }}
            <button type="submit" class="btn btn-sm btn-outline-light">Set Width</button>
        </form>
        {% if display_width_form.errors %}
        <div class="alert alert-danger mt-2" role="alert">Enter a display width between 320 and 16384 pixels.</div>
        {% endif %}
    </div>
    <div id="charger-grid"
         class="charger-grid"
         hx-get="{% url 'micboard:charger_grid' %}"
         hx-trigger="every 10s"
         hx-swap="innerHTML"
         aria-live="polite"
         aria-label="Charger grid">
        {% include "micboard/partials/charger_grid.html" %}
    </div>
</div>
{% endblock %}