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

{% block heading %}
    {% blocktrans trimmed with msg_type=msg_type %}
        Sending {{ msg_type }} message
    {% endblocktrans %}
{% endblock %}

{% block subcontent %}
    <p><a class="button" href="{{ success_url }}">Go back</a></p>
    {{ msg_type_raw }}
    {% if msg_type_raw == "MESH_ROUTE_REQUEST" %}
        <p>Route to <a href="{% url "mesh.node.detail" pk=msg_data.content.address %}">{{ msg_data.content.address }} {% if node_name %} ({{ node_name }}){% endif %}</a></p>
    {% endif %}
    <div class="columns">
        <div>
            <h4>Sending progress</h4>
            <table>
                <tr>
                    <th>Recipient</th>
                    <th>Status</th>
                </tr>
                {% for address, name in recipients %}
                    <tr>
                        <td>
                            {% if address != "ff:ff:ff:ff:ff:ff" %}<a href="{% url "mesh.node.detail" pk=address %}">{% endif %}
                            {{ address }}{% if name %} ({{ name }}){% endif %}
                            {% if address != "ff:ff:ff:ff:ff:ff" %}</a>{% endif %}
                        </td>
                        <td id="sending-status-{{ address }}"></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
        {% if msg_type_raw == "MESH_ROUTE_REQUEST" %}
            <div style="min-width: 12vw;">
                <h4>Routes</h4>
                <table>
                    <thead>
                        <tr>
                            <th>{% trans 'Node' %}</th>
                            <th>{% trans 'Route' %}</th>
                        </tr>
                    </thead>
                    <tbody id="route-responses"></tbody>
                </table>
            </div>
            <div style="min-width: 12vw;">
                <h4 class="white-space: nowrap;">No Route</h4>
                <table>
                    <thead>
                        <tr>
                            <th>{% trans 'Node' %}</th>
                        </tr>
                    </thead>
                    <tbody id="no-routes"></tbody>
                </table>
            </div>
            <div style="min-width: 12vw;">
                <h4>Trace</h4>
                <table>
                    <thead>
                        <tr>
                            <th>{% trans 'Hop' %}</th>
                        </tr>
                    </thead>
                    <tbody id="route-trace"></tbody>
                </table>
            </div>
        {% endif %}
    </div>
    {% include "mesh/fragment_mesh_websocket.html" %}

{% endblock %}
