{% extends 'mesh/base.html' %}
{% load static %}
{% load i18n mesh_node %}

{% block heading %}{% trans 'Mesh messages' %}{% endblock %}

{% block subcontent %}
    <style>
        .mesh-message-filter .field > select[multiple] {
            width: 100%;
        }

        .mesh-message-filter .field > input.mesh-message-search {
            margin-bottom: 2px;
        }
    </style>
    <div class="columns">
        <div>
            <h4>Send messages</h4>
            <form method="POST">
                {% csrf_token %}
                <select name="send_msg_type" style="display: inline-block; width: auto;" required>
                    <option value="">select type</option>
                    {% for category, msg_types in send_msg_types %}
                        <optgroup label="{{ category }}">
                            {% for value, label in msg_types %}
                                <option value="{{ value }}">{{ label }}</option>
                            {% endfor %}
                        </optgroup>
                    {% endfor %}
                </select>
                <button type="submit">{% trans 'Send message' %}</button>
            </form>
        </div>
    </div>
    <form>
        <h4>Filter</h4>
        <div class="fields mesh-message-filter">
            <div class="field">
                <input type="text" placeholder="search" class="mesh-message-search" id="mesh-message-type-search"
                       aria-label="search message types"/>
                {{ form.message_types }}
            </div>
            <div class="field">
                <input type="text" placeholder="search" class="mesh-message-search" id="mesh-message-node-search"
                       aria-label="search nodes"/>
                {{ form.src_nodes }}
            </div>
            <div class="field">
                <button type="submit">Filter</button>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="{% static 'mesh/js/searchable-select.js' %}"></script>
    <script type="text/javascript">
        (function () {
            const typeSearch = document.getElementById('mesh-message-type-search');
            const nodeSearch = document.getElementById('mesh-message-node-search');
            SearchableSelect(typeSearch.nextElementSibling, typeSearch);
            SearchableSelect(nodeSearch.nextElementSibling, nodeSearch);
        })();
    </script>

    {% include 'control/fragment_pagination.html' %}

    <table>
        <tr>
            <th>{% trans 'Time' %}</th>
            <th>{% trans 'Node' %}</th>
            <th>{% trans 'Type' %}</th>
            <th>{% trans 'Data' %}</th>
            <th>{% trans 'Uplink' %}</th>
        </tr>
        {% for msg in mesh_messages %}
            <tr>
                <td>{{ msg.datetime.date }} {{ msg.datetime.time|date:"H:i:s" }}</td>
                <td>{% mesh_node msg.src_node %}</td>
                <td>{{ msg.get_message_type_display }}</td>
                <td>

                    {% if msg.message_type == "ECHO_RESPONSE" %}
                        <strong>Content:</strong> {{ msg.parsed.content.content }}

                    {% elif msg.message_type == "CONFIG_NODE" %}
                        <strong>Number:</strong> {{ msg.parsed.content.number }},
                        <strong>Name:</strong> {{ msg.parsed.content.name }}

                    {% elif msg.message_type == "CONFIG_IBEACON" %}
                        <strong>UUID:</strong> {{ msg.parsed.content.uuid }}<br>
                        <strong>Major:</strong> {{ msg.parsed.content.major }},
                        <strong>Minor:</strong> {{ msg.parsed.content.minor }}

                    {% elif msg.message_type == "CONFIG_HARDWARE" %}
                        <strong>Chip:</strong> {{ msg.parsed.content.chip.pretty_name }} rev
                        {{ msg.parsed.content.revision_major }}.{{ msg.parsed.content.revision_minor }}

                    {% elif msg.message_type == "CONFIG_BOARD" %}
                        <strong>Board:</strong> {{ msg.parsed.content.board_config.board.pretty_name }}

                        {% if msg.parsed.content.led %}
                            <br>
                            <strong>Status LED:</strong> {{ msg.parsed.content.led }}
                        {% endif %}

                        {% if msg.parsed.content.uwb %}
                            <br>
                            <strong>UWB:</strong> {{ msg.parsed.content.led }}
                        {% endif %}

                    {% elif msg.message_type == "CONFIG_FIRMWARE" %}
                        <strong>Firmware:</strong> {{ msg.parsed.content.app_desc.project_name }}
                        {{ msg.parsed.content.app_desc.version }} (IDF {{ msg.parsed.content.app_desc.idf_version }})
                        <br>
                        <strong>Compile Date:</strong> {{ msg.parsed.content.app_desc.compile_date }}
                        {{ msg.parsed.content.app_desc.compile_time }}
                        <br>
                        <strong>SHA256:</strong> <small>{{ msg.parsed.content.app_desc.app_elf_sha256 }}</small>

                    {% elif msg.message_type == "CONFIG_UPLINK" %}
                        <strong>Enabled:</strong> {{ msg.parsed.content.enabled }},
                        <strong>SSID:</strong> {{ msg.parsed.content.ssid }},
                        <strong>Channel:</strong> {{ msg.parsed.content.channel }}<br>
                        <strong>Host:</strong> {{ msg.parsed.content.host }},
                        <strong>Port:</strong> {{ msg.parsed.content.port }},
                        <strong>UDP:</strong> {{ msg.parsed.content.udp }},
                        <strong>SSL:</strong> {{ msg.parsed.content.ssl }}

                    {% elif msg.message_type == "CONFIG_LED" %}
                        <strong>LED config:</strong> {{ msg.parsed.led_config }}

                    {% elif msg.message_type == "CONFIG_POSITION" %}
                        <strong>X=</strong>{{ msg.parsed.content.x_pos }}, <strong>Y=</strong>
                        {{ msg.parsed.content.y_pos }}, <strong>Z=</strong>{{ msg.parsed.content.z_pos }}

                    {% elif msg.message_type == "MESH_ADD_DESTINATIONS" or msg.message_type == "MESH_REMOVE_DESTINATIONS" %}
                        <strong>adresses:</strong><br>
                        <ul style="margin: 0;">
                            {% for address in msg.parsed.content.addresses %}
                                <li style="margin: 0;">{{ address }}</li>
                            {% endfor %}
                        </ul>

                    {% elif msg.message_type == "OTA_STATUS" %}
                        <strong>OTA Status:</strong> {{ msg.parsed.content.status }},
                        <strong>Update ID:</strong> {{ msg.parsed.content.update_id }},
                        <strong>Recv Bytes:</strong> {{ msg.parsed.content.received_bytes }},
                        <strong>Next Chunk:</strong> {{ msg.parsed.content.next_expected_chunk }},<br>
                        <strong>Auto Apply:</strong> {{ msg.parsed.content.auto_apply }},
                        <strong>Auto Reboot:</strong> {{ msg.parsed.content.auto_reboot }},

                    {% elif msg.message_type == "LOCATE_RANGE_RESULTS" %}
                        <table>
                            <tr>
                                <th>peer</th>
                                <th>RSSI</th>
                                <th>distance</th>
                            </tr>
                            {% for entry in msg.parsed.content.ranges %}
                                <tr>
                                    <td>{% mesh_node entry.peer %}</td>
                                    <td>{{ entry.rssi }}</td>
                                    <td>
                                        {% if entry.distance == 65535 %}
                                            {{ entry.distance | cm_to_m }}
                                        {% else %}
                                            <em>very low</em>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>

                    {% elif msg.message_type == "LOCATE_RAW_FTM_RESULTS" %}
                        <p><strong>peer:</strong> {% mesh_node msg.parsed.content.peer %}</p>
                        <table class="smalltable">
                            <tr>
                                <th>token</th>
                                <th>rssi</th>
                                <th>rtt</th>
                                <th>t1</th>
                                <th>t2</th>
                                <th>t3</th>
                                <th>t4</th>
                            </tr>
                            {% for entry in msg.parsed.content.results %}
                                <tr>
                                    <td>{{ entry.dlog_token }}</td>
                                    <td>{{ entry.rssi }}</td>
                                    <td>{{ entry.rtt }}</td>
                                    <td>{{ entry.t1 }}</td>
                                    <td>{{ entry.t2 }}</td>
                                    <td>{{ entry.t3 }}</td>
                                    <td>{{ entry.t4 }}</td>
                                </tr>
                            {% endfor %}
                        </table>

                    {% else %}
                        {% for key, value in msg.data.items %}
                            {% if key != "src" and key != "dst" and key != "msg_type" %}
                                <div class="mesh-msg-data mesh-msg-type-{{ key }}">
                                    <strong>{{ key }}</strong>: {{ value }}
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </td>
                {% comment %}todo: more details{% endcomment %}
                <td>{% mesh_node msg.uplink.node %}</td>
            </tr>
        {% endfor %}
    </table>

    {% include 'control/fragment_pagination.html' %}
{% endblock %}
