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

{% block heading %}{% trans 'OTA Update' %}{% endblock %}

{% block subcontent %}

    <div class="columns">
        <div>
            <h4>{% trans 'Firmware Build' %}</h4>
            <strong>Firmware:</strong> <a href="{% url "mesh.firmwares.detail" pk=update.build.version.pk %}">
                {{ update.build.version.project_name }}
                {{ update.build.version.version }}
            </a><br>
            <strong>Build:</strong> <a href="{% url "mesh.firmwares.build.detail" pk=update.build.pk %}">
                {{ update.build.variant }}
            </a><br>
            <strong>Created:</strong> {{ update.created }}
        </div>
        <div>
            <table>
                <tr>
                    <th>{% trans 'Node' %}</th>
                    <th>{% trans 'Status' %}</th>
                    <th>{% trans 'Progress' %}</th>
                </tr>
            {% for recipient in update.recipients.all %}
                <tr id="ota-recipient-{{ update.pk }}-{{ recipient.node_id }}" data-recipient="{{ recipient.pk }}">
                    <td>{% mesh_node recipient.node %}</td>
                    <td>
                        <span class="status"></span><span class="device_status"></span><br>
                        <span class="auto-apply"><strong>auto apply:</strong> <a href="#"></a><br></span>
                        <span class="auto-reboot"><strong>auto reboot:</strong> <a href="#"></a><br></span>
                    </td>
                    <td>
                        <span class="progress">
                        <span class="received_bytes">??</span> of <span class="total_bytes">{{ update.build.binary.size }}</span> bytes
                        <br>
                        <progress id="file" max="{{ update.build.binary.size }}" value="0"></progress>
                        <br></span>
                        <button name="cancel">cancel</button> <button name="apply">apply</button> <button name="reboot"><span class="apply_and">apply &amp; </span>reboot</button>
                    </td>
                </tr>
            {% endfor %}
            </table>
        </div>
    </div>
    {% include "mesh/fragment_mesh_websocket.html" %}
{% endblock %}
