{% extends "objects/base.html" %}
{% load customfilters %}
{% load static %}
{% load i18n %}

{% block styles %}
    <link href="{% static "css/monitor_dali.css" %}" rel="stylesheet">
{% endblock styles %}

{%  block content %}
    <div class="main-panel-header">
        <a href="{% url 'box' box_id=box %}">{% trans "DB Box" %} {{ box }} ({{ box_name }})</a>
        <img src="{%  static "img/dot_black.png" %}">
        <a href="{% url 'module' box_id=box module_id=module %}">{% trans "Module" %} {{ module }}</a>
        <img src="{%  static "img/dot_black.png" %}">
        <a href="{% url 'channel' box_id=box module_id=module channel_id=channel %}">{% trans "Channel" %} {{ channel }}</a>
        <img src="{%  static "img/dot_black.png" %}">
        {% trans "index_monitor_bus" %}
        <span class="glyphicon glyphicon-play" onclick="setPlay()"></span>
        <span class="glyphicon glyphicon-pause" onclick="setPause()"></span>
    </div>

    <div class="content-owner">
        <div class="filters">
            <div class="panel panel-default panel-collapsed columns">
                <div class="panel-heading">{% trans "monitor_dali_filter_col" %}<span class="badge pull-left" hidden>0</span><span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
                <div class="panel-body"><table>
                    <tr><td><label>{% trans "monitor_dali_filter_col_time" %}<input type="checkbox" value="col-time" onchange="setColumn(this)"></label></td></tr>
                    <tr><td><label>{% trans "monitor_dali_filter_col_hex" %}<input type="checkbox" value="col-hex" onchange="setColumn(this)"></label></td></tr>
                    <tr><td><label>{% trans "monitor_dali_filter_col_address" %}<input type="checkbox" value="col-addr" onchange="setColumn(this)"></label></td></tr>
                    <tr><td><label>{% trans "monitor_dali_filter_col_instance" %}<input type="checkbox" value="col-ins" onchange="setColumn(this)"></label></td></tr>
                    <tr><td><label>{% trans "monitor_dali_filter_col_description" %}<input type="checkbox" value="col-desc" onchange="setColumn(this)"></label></td></tr>
                </table></div>
            </div>
            <div class="panel panel-default panel-collapsed marks">
                <div class="panel-heading">{% trans "monitor_dali_filter_packet_types" %}<span class="badge pull-left">0</span><span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
                <div class="panel-body"><table>
                    {% for line in marks %}
                        <tr>
                            {% for mark in line %}
                                <td><label>{{ mark }}
                                    <input type="checkbox" value="{{ mark }}" onchange="setMark(this);">
                                </label></td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </table></div>
            </div>
            <div class="panel panel-default panel-collapsed addresses">
                <div class="panel-heading">{% trans "monitor_dali_filter_addresses" %}<span class="badge pull-left">0</span><span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
                <div class="panel-body"><table>
                    {% for line in addresses %}
                        <tr>
                            {% for a in line %}
                                <td><label>D{{ a }}
                                    <input type="checkbox" value="D{{ a }}" onchange="setAddress(this);">
                                </label></td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                    <tr>
                        <td colspan="4"><label>{% trans "monitor_dali_filter_broadcast" %}<input type="checkbox" value="B" onchange="setAddress(this);"></label></td>
                        <td colspan="4"><label>{% trans "monitor_dali_filter_unaddressed" %}<input type="checkbox" value="U" onchange="setAddress(this);"></label></td>
                    </tr>
                </table></div>
            </div>
            <div class="panel panel-default addresses panel-collapsed groups">
                <div class="panel-heading">{% trans "monitor_dali_filter_groups" %}<span class="badge pull-left">0</span><span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
                <div class="panel-body">
                    <table>
                        {% for line in groups %}
                            <tr>
                                {% for a in line %}
                                    <td><label>G{{ a }}
                                        <input type="checkbox" value="G{{ a }}" onchange="setAddress(this);">
                                    </label></td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
            <div class="panel panel-default addresses panel-collapsed instances">
                <div class="panel-heading">{% trans "monitor_dali_filter_sensor_types" %}<span class="badge pull-left">0</span><span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
                <div class="panel-body">
                    <table>
                        <tr>
                            <td><label>{% trans "monitor_dali_filter_presence" %}<input type="checkbox" value="IT3" onchange="setInstance(this);"></label></td>
                            <td><label>{% trans "monitor_dali_filter_luminosity" %}<input type="checkbox" value="IT4" onchange="setInstance(this);"></label></td>
                            <td><label>{% trans "monitor_dali_filter_button" %}<input type="checkbox" value="IT1" onchange="setInstance(this);"></label></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="panel panel-default addresses panel-collapsed names">
                <div class="panel-heading">{% trans "monitor_dali_filter_names" %}
                    <span class="badge pull-left">0</span>
                    <span class="pull-right"><i class="glyphicon glyphicon-chevron-up"></i></span>
                </div>
                <div class="panel-body">
                    <table>
                        {% for line in names %}
                            <tr>
                                {% for name in line %}
                                    <td><label>{{ name }}
                                        <input type="checkbox" value="{{ name }}" onchange="setName(this);">
                                    </label></td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        <tr><td colspan="2"><label>{% trans "monitor_dali_filter_custom_command" %}
                            <input id="ch-name" type="checkbox" value="{{ item.attributes.bus }}" onchange="setName(this)">
                            <input id="input-name" type="text" placeholder="{% trans "monitor_dali_filter_custom_command_hint" %}" oninput="onFilterInput(this)">
                        </label></td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="content">
            <table>
                <tr class="title-row">
                    <th class="col-time">{% trans "monitor_dali_filter_col_time" %}</th>
                    <th class="col-hex">{% trans "monitor_dali_filter_col_hex" %}</th>
                    <th class="col-addr">{% trans "monitor_dali_filter_col_address" %}</th>
                    <th class="col-ins">{% trans "monitor_dali_filter_col_instance" %}</th>
                    <th class="col-desc" style="width: 100%">{% trans "monitor_dali_filter_col_description" %}</th>
                </tr>
            </table>
        </div>
    </div>

{%  endblock content %}

{% block scripts %}
    <script>
        const SOCKET_URL = '{{ socket }}';
        console.log(SOCKET_URL);
    </script>
    <script src="{% static "js/monitor/dali.js" %}"></script>
{% endblock scripts %}