{% load static %}
{% load i18n %}

{% block content %}
    {% trans "consumption_energy_unit" as power_unit %}
    <div class="section_print one-page-only">
        <div class="nav_breadcrumb">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-11">
                        <ul class="breadcrumb">
                            {% for nav in navigations %}
                                {% if forloop.last %}
                                    <li id="{{ area.parent }}_{{ area.id }}_index" class="breadcrumb_end">{{ nav.name }}</li>
                                {% else %}
                                    <a href="#{{ nav.id }}_index">
                                        <li class="breadcrumb">{{ nav.name }}</li>
                                    </a>
                                    <li class="arrow">
                                        <img src="{% static "commissioning/img/arrow.svg" %}" alt="arrow">
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
{#                TODO это номера разделов а не страниц#}
                    <div class="col-1 d-flex justify-content-end"><h4>{{ area.counter }}</h4></div>
                </div>
            </div>
        </div>
        <div class="properties">
            <div class="container-fluid">
                <div class="row one-page-only">
                    <div class="col-12 d-flex">
                        <div>
                            <img src="{{ area.preview_lights }}" alt="Location" class="picture_location">
                            <div class="picture_signature_lights">
                                <div class="signature_lights">
                                    <svg class="circle_lights"></svg>
                                    <h4 style="margin-bottom: 0">Светильники</h4>
                                </div>
                                <div class="signature_lights">
                                    <svg class="circle_switch"></svg>
                                    <h4 style="margin-bottom: 0">Выключатели</h4>
                                </div>
                            </div>
                        </div>
                        <div class="properties_text">
                            <h4><p class="descriptor_location" style="text-transform: capitalize">{%  trans "area" %}</p></h4>
                            <h2><p class="name_loaction">{{ area.name }}</p></h2>
                            <p class="item_properties">Энергопотребление . . . . . . . . .
                                <span class="value_kwh">
                                    <span id="{{ area.id }}" class="value_kwh" total-power-{{ area.id }}="{{ area.total_power }}">-</span>
                                 {{ power_unit }}
                                </span>
                            </p>
                            <p class="item_properties">Светильники . . . . . . . . . . . . . . . . . . . . . . . .
                                <span class="value2">
                                    {{ area.actuators|length }} шт.
                                </span>
                            </p>
                            <p class="item_properties">Датчики присутствия . . . . . . . . . . . . . . .
                                <span class="value2">
                                    {{ area.presences|length }} шт.
                                </span>
                            </p>
                            <p class="item_properties">Датчики освещенности . . . . . . . . . . . . .
                                <span class="value2">
                                    {{ area.luminosities|length }} шт.
                                </span>
                            </p>
                            <p class="item_properties">Настенные выключатели . . . . . . . . . . . .
                                <span class="value2">
                                    {{ area.buttons|length }} шт.
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="properties">
            <div class="container-fluid">
                <div class="row one-page-only">
                    <div class="col-12 d-flex ">
                        <div>
                            <img src="{{ area.preview_sensors }}" alt="Location" class="picture_location">
                            <div class="picture_signature_lights">
                                <div class="signature_lights">
                                    <svg class="circle_presence"></svg>
                                    <h4 style="margin-bottom: 0">Датчики присутствия</h4>
                                </div>
                                <div class="signature_lights">
                                    <svg class="circle_illumination"></svg>
                                    <h4 style="margin-bottom: 0">Датчики освещенности</h4>
                                </div>
                            </div>
                        </div>
                        <div class="strategy_in_properties">
                            {% include "commissioning/strategy.html" with strategy=area.strategy %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="container-fluid">
                <div class="row one-page-only">
                    <div class="col-12, d-flex, flex-direction: column">
                        <div class="dash_background">
                            <table class="col-12">
                                <tr>
                                    <th class="left_align_table" colspan="2">
                                        <img src="{% static "commissioning/img/Name=bulb.svg" %}" alt="lightarea_icon">
                                        <span class="name_tables1">Светильники</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="left_align_table"><span class="name_tables2">№</span></th>
                                    <th><span class="name_tables2">Яркость min, %</span></th>
                                    <th><span class="name_tables2">Яркость max, %</span></th>
                                    <th><span class="name_tables2">Время вкл/выкл, сек</span></th>
                                    <th><span class="name_tables2">Мощность, Вт</span></th>
                                    <th><span class="name_tables2">Время работы, ч</span></th>
                                    <th><span class="name_tables2">Расход, КВт-ч</span></th>
                                </tr>
                                {% for actuator in area.actuators %}
                                    <tr>
                                        <div id="{{ actuator.state }}DimmingCurve" class="state" hidden></div>
                                        <td class="left_align_table">{{ forloop.counter }}</td>
                                        <td id="{{ actuator.state }}MinLevelRaw" class="state percent">-</td>
                                        <td id="{{ actuator.state }}MaxLevelRaw" class="state percent">-</td>
                                        <td>
                                            <select disabled id="{{ actuator.state }}FadeTime" class="state">
                                                <option selected disabled hidden>-</option>
                                                <option disabled value="ft0">0</option>
                                                <option disabled value="ft7">0.7</option>
                                                <option disabled value="ft10">1</option>
                                                <option disabled value="ft14">1.4</option>
                                                <option disabled value="ft20">2</option>
                                                <option disabled value="ft28">2.8</option>
                                                <option disabled value="ft40">4</option>
                                                <option disabled value="ft57">5.7</option>
                                                <option disabled value="ft80">8</option>
                                                <option disabled value="ft113">11.3</option>
                                                <option disabled value="ft160">16</option>
                                                <option disabled value="ft226">22.6</option>
                                                <option disabled value="ft320">32</option>
                                                <option disabled value="ft453">45.3</option>
                                                <option disabled value="ft640">64</option>
                                                <option disabled value="ft905">90.5</option>
                                            </select>
                                        </td>
                                        <td>{{ actuator.power }}</td>
                                        <td id="worktime-{{ actuator.id }}">-</td>
                                        <td id="{{ actuator.id }}" class="chartable" partof="{{ area.id }}" chart="{{ actuator.chart }}" consumption-chart="area">-</td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="container-fluid">
                <div class="row one-page-only">
                    <div class="col-12, d-flex, flex-direction: column">
                        <div class="dash_background">
                            <table id="{{ area.state }}Profiles" class="col-12 state profiles" factor="{{ area.light_factor }}">
                                <tr>
                                    <th class="left_align_table" colspan="2"><img src="{% static "commissioning/img/Name=profil.svg" %}" alt="lightarea_icon"><span class="name_tables1">Профили</span></th>
                                </tr>
                                <tr>
                                    <th class="left_align_table"><span class="name_tables2">№</span></th>
                                    <th><span class="name_tables2">Датчик присут.</span></th>
                                    <th><span class="name_tables2">Датчик осв.</span></th>
                                    <th><span class="name_tables2">Целевая освещенность, Lx</span></th>
                                    <th><span class="name_tables2">Задержка, сек</span></th>
                                    <th><span class="name_tables2">Движение есть</span></th>
                                    <th><span class="name_tables2">Движения нет</span></th>
                                </tr>

                                {% for profile in 12345|make_list %}
                                    <tr id="Profile{{ forloop.counter }}">
                                        <td class="left_align_table">{{ forloop.counter }}</td>
                                        <td>
                                            <select disabled name="TuningType">
                                                <option selected disabled hidden>-</option>
                                                <option value="Combo">Вкл</option>
                                                <option value="Presence">Вкл</option>
                                                <option value="Luminosity">Выкл</option>
                                                <option value="Idle">Выкл</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select disabled name="TuningType">
                                                <option selected disabled hidden>-</option>
                                                <option value="Combo">Вкл</option>
                                                <option value="Presence">Выкл</option>
                                                <option value="Luminosity">Вкл</option>
                                                <option value="Idle">Выкл</option>
                                            </select>
                                        </td>
                                        <td><input disabled name="TargetLuminosity" value="-"></td>
                                        <td><input disabled name="HoldTime" value="-"></td>
                                        <td>
                                            <select disabled name="OccupancyAction">
                                                <option selected disabled hidden>-</option>
                                                <option value="MaxLevel">MaxLevel</option>
                                                <option value="LastLevel">LastLevel</option>
                                                <option value="Level">Level</option>
                                                <option value="Scene">Scene</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select disabled name="VacancyAction">
                                                <option selected disabled hidden>-</option>
                                                <option value="MinLevel">MinLevel</option>
                                                <option value="Off">Off</option>
                                                <option value="Level">Level</option>
                                                <option value="Scene">Scene</option>
                                            </select>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if area.actuators|length > 0 %}
        {% trans "chart_area_header" as header %}
        {% include "commissioning/chart.html" with header=header time_from='' time_to='' id=area.id %}
    {% endif %}
{% endblock content %}