{% extends "control_panel/base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}{{ device.name }}{% trans "Device Syncing History" %}{{ block.super }}{% endblock title %}

{% block headcss %}{{ block.super }}
    <style>
        dl{margin-bottom:20px}dt,dd{line-height:20px}dt{font-weight:bold}dd{margin-left:10px}.dl-horizontal{*zoom:1}.dl-horizontal:before,.dl-horizontal:after{display:table;line-height:0;content:""}.dl-horizontal:after{clear:both}.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}
    </style>
{% endblock headcss %}

{% block buttons %}{{ block.super }}
    {% if is_own_device %}
        <div class="server-online-only">
            <a class="registered-only green_button" href="javascript:force_sync()">{% trans "Sync Now!" %}</a>
            <a class="not-registered-only green_button" href="{% url register_public_key %}">{% trans "Register" %}</a>
        </div>
    {% endif %}
{% endblock buttons %}

{% block control_panel_content %}
    <div id="zone_container">

        <div class="device_metadata">
            <h2>{% trans "Device Metadata" %}</h2>

            <dl class="dl-horizontal">
            {% if software_version %}
                <!---Current System status -->
                <dt>{% trans "Device ID" %}:</dt>
                <dd>{{ device.id }}</dd>
                <dt>{% trans "Current Version" %}:</dt>
                <dd>{{ software_version }}</dd>
                <dt>{% trans "Released Date" %}:</dt>
                <dd>{{ software_release_date }}</dd>
                <dt>{% trans "Database Size" %}:</dt>
                <dd>{{ database_size|floatformat }} MB</dd>
                <dt>{% trans "Database last update" %}:</dt>
                <dd>{{ database_last_updated }}</dd>
                <dt>{% trans "Install Directory" %}:</dt>
                <dd>{{ install_dir }}</dd>

            {% elif not shown_sessions %}

            {% else %}
                <!---Remote system status -->
                <dt>{% trans "Version" %}:</dt>
                <dd>{{ shown_sessions.0.client_version }}</dd>
                <dt>{% trans "Operating System" %}:</dt>
                <dd>{{ shown_sessions.0.client_os }}</dd>
            {% endif %}
            </dl>
        </div>

        <div class="sync_sessions">
            <div>
                <h2>{% trans "Sync Sessions" %}</h2>
            </div>

            {% if not shown_sessions %}
                <p class="registered-only">{% trans "This device has never synced with the central server." %}</p>
                <p class="not-registered-only">{% trans "This device is not registered, and so cannot sync data with the central server." %}</p>
            {% else %}
                {% with shown_sessions|length as shown_count %}
                {# Translators: shown_count and total_sessions are integer variables; do not translate them! #}
                <span>({% blocktrans %}showing {{ shown_count }} of {{ total_sessions }}{% endblocktrans %})</span>
                {% endwith %}
                <table class="simple-table">
                    <tr>
                        <th width="250px">{% trans "Sync Date" %}</th>
                        <th width="250px">{% trans "Device IP Address" %}</th>
                        <th width="200px">{% trans "# Models Uploaded" %}</th>
                        <th width="200px">{% trans "# Models Downloaded" %}</th>
                        <th width="200px">{% trans "# Errors" %}</th>
                    </tr>
                    {% for sync_session in shown_sessions %}
                        <tr>
                            <td>{{ sync_session.timestamp }}</td>
                            <td>{{ sync_session.ip }}</td>
                            <td>{{ sync_session.models_uploaded }}</td>
                            <td>{{ sync_session.models_downloaded }}</td>
                            <td>{{ sync_session.errors }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% endif %}
        </div>

    </div><!-- zone_container -->
{% endblock control_panel_content %}