{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='lighting.css') }}">
<script src="{{ url_for('static', filename='lighting.js') }}" defer></script>

{% endblock %}

{% block content %}
<main>
    {% for group in ldatas %}
    {% if ldatas[group]["lights"] %}
    <div class="group">
        <h2>{{ ldatas[group]["name"] }}</h2>
        <div>
            {% for light in ldatas[group]["lights"] %}
            <form method="post" class="light">
                {% set ldata = ldatas[group]["lights"][light] %}
                <h3>{{ ldata["name"] }}</h3>
                <div class="view">
                    <div class="view-symb">
                        <svg version="1.1" width="100" height="100" xmlns="http://www.w3.org/2000/svg" class="symb-btn">
                            <polyline points="50,0 100,50 50,100 0,50" fill="#666666" />
                            <polyline points="50,5 95,50 50,95 5,50" fill="{{ ldata['display'] }}" />
                        </svg>
                    </div>
                    <input type="range" orient="vertical" class="brightness" name="brightness" min="0" max="254"
                        step="1" value="{{ ldata['state']['bri'] if ldata['state']['on'] else 0 }}">
                </div>
                {% if "ct" in ldata["state"] %}
                <div class="colormode">
                    <output>{{ ldata["state"]["colormode"].upper() }}</output>
                    <input class="ctsel" type="number" min="100" max="600" step="1" name="ct"
                        value="{{ ldata['state']['ct'] }}">
                    {% if "hue" in ldata["state"] %}
                    <input class="hssel" type="color" name="hs" value="{{ ldata['display'] }}">
                    {% endif %}
                    <input type="hidden" name="mode" value="{{ ldata['state']['colormode'] }}">
                </div>
                {% endif %}
                <input type="hidden" class="action" name="action" value="none">
                <input type="hidden" name="light" value="{{ light }}">
            </form>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% endfor %}
</main>
{% endblock %}