{% extends 'main.jinja2' %}
{% block main %}
    <div class="pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Настройки</h1>
    </div>
{#    <h1 class="h4">Панель управления</h1>#}
{#    <div class="input-group mb-3">#}
{#        <span class="input-group-text">http://</span>#}
{#        <input type="text" class="form-control" id="hostname" value="{{ settings['hostname'] }}" />#}
{#        <span class="input-group-text">:</span>#}
{#        <input type="number" class="form-control" id="port" min="1024" max="65535" value="{{ settings['port'] }}" />#}
{#    </div>#}
    <section>
        <h1 class="h4">Датчики</h1>
        <div id="sensors">
            {% for hardware_type in settings['hardware_types'] %}
                <div class="mb-3 form-check" data-hardware-type-id="{{ hardware_type.id }}">
                    <input type="checkbox" class="form-check-input" id="hardware-type-{{ hardware_type.id }}" />
                    <label class="form-check-label" for="hardware-type-{{ hardware_type.id }}">{{ hardware_type.name }}</label>
                </div>
                {% for hardware in settings['hardware_types'][hardware_type] %}
                    <div class="ms-5">
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="hardware-{{ hardware.id }}" data-hardware-id="{{ hardware.id }}" />
                            <label class="form-check-label" for="hardware-{{ hardware.id }}">{{ hardware.name }} <small class="text-secondary">{{ hardware.identifier }}</small></label>
                        </div>
                        {% for sensor_type in settings['hardware_types'][hardware_type][hardware] %}
                            <div class="ms-5">
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="sensor-type-{{ sensor_type.id }}" data-sensor-type-id="{{ sensor_type.id }}" />
                                    <label class="form-check-label" for="sensor-type-{{ sensor_type.id }}">{{ sensor_type.name }}</label>
                                </div>
                                {% for sensor in settings['hardware_types'][hardware_type][hardware][sensor_type] %}
                                    <div class="ms-5">
                                        <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="sensor-{{ sensor.id }}" data-sensor-id="{{ sensor.id }}" {% if sensor.enabled %} checked {% endif %} />
                                            <label class="form-check-label" for="sensor-{{ sensor.id }}">{{ sensor.name }} <small class="text-secondary">{{ sensor.identifier }}</small></label>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    </section>
    <script>
    </script>
{#    <script>#}
{#        const $sensors = document.querySelector('#sensors');#}
{#        const xhr = new XMLHttpRequest();#}
{#        api_url.pathname = '/api/sensors';#}
{#        xhr.open('get', api_url);#}
{#        xhr.onload = () => {#}
{#            if (xhr.status !== 200) return;#}
{#            const sensors = JSON.parse(xhr.response);#}
{#            for (const sensor of sensors) {#}
{#                if ($sensors.querySelector(`[data-hardware-type-id="${ sensor.hardware.hardware_type.id }"]`) === null) {#}
{#                    let $div = document.createElement('div');#}
{#                    $div.classList.add('mb-3', 'form-check');#}
{#                    let $input = document.createElement('input');#}
{#                    $input.type = 'checkbox';#}
{#                    $input.classList.add('form-check-input');#}
{#                    $input.id = `hardware-type-${ sensor.hardware.hardware_type.id }`;#}
{#                    $input.dataset.hardwareTypeId = String(sensor.hardware.hardware_type.id);#}
{#                    let $label = document.createElement('label');#}
{#                    $label.classList.add('form-check-label');#}
{#                    $label.setAttribute('for', $input.id);#}
{#                    $label.textContent = sensor.hardware.hardware_type.name;#}
{#                    $div.append($input, $label);#}
{#                    $sensors.append($div);#}
{#                }#}
{#                #}
{#            }#}
{#        };#}
{#        xhr.send();#}
{#    </script>#}
{% endblock %}