{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}
<h1>🖥️ Monitoring en direct</h1>

<style>
    .controls {
        margin-bottom: 1em;
        background: #f3f3f3;
        padding: 1em;
        border-radius: 6px;
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        align-items: center;
    }

    .device-grid {
        display: grid;
        gap: 1rem;
    }

    .device-card {
        border: 1px solid #ccc;
        padding: 1rem;
        background: #fff;
        text-align: center;
        overflow: hidden;
    }

    .device-card img {
        width: 100%;
        height: auto;
    }
</style>

<div class="controls">
    <label>Colonnes :
        <select id="columns" onchange="updateGrid()">
            <option>1</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </label>

    <label>Taille image :
        <select id="imageSize" onchange="updateImageSize()">
            <option value="300">300px</option>
            <option value="400" selected>400px</option>
            <option value="600">600px</option>
            <option value="800">800px</option>
        </select>
    </label>
</div>

<div id="grid" class="device-grid">
    {% for deviceId in devices %}
        <div class="device-card">
            <h4>{{ deviceId }}</h4>
            <img id="img-{{ deviceId }}" src="/monitoring/{{ deviceId }}/screenshot.png?{{ random() }}" alt="Capture {{ deviceId }}">
        </div>
    {% endfor %}
</div>

<script>
    function updateGrid() {
        const columns = document.getElementById('columns').value;
        document.getElementById('grid').style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
        localStorage.setItem('columns', columns);
    }

    function updateImageSize() {
        const size = document.getElementById('imageSize').value;
        document.querySelectorAll('.device-card img').forEach(img => {
            img.style.maxWidth = size + 'px';
        });
        localStorage.setItem('imageSize', size);
    }

    // Chargement initial depuis localStorage
    window.addEventListener('DOMContentLoaded', () => {
        const storedCols = localStorage.getItem('columns') || '2';
        const storedSize = localStorage.getItem('imageSize') || '400';

        document.getElementById('columns').value = storedCols;
        document.getElementById('imageSize').value = storedSize;

        updateGrid();
        updateImageSize();
    });

    // Refresh images toutes les 5 sec
    setInterval(() => {
        document.querySelectorAll('img[id^="img-"]').forEach(img => {
            const src = img.src.split('?')[0];
            img.src = src + '?t=' + new Date().getTime();
        });
    }, 5000);
</script>
{% endblock %}