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

{% block title %}{% blocktrans with device_name=device.name %}{{ device_name }} Device Syncing History{% endblocktrans %}{{ block.super }}{% endblock title %}

{% block i18n_do_not_translate %}
    {% block users_active %}active{% endblock users_active %}
    {% block manage_active %}active{% endblock manage_active %}
    {% block facility_active %}active{% endblock facility_active %}
{% endblock i18n_do_not_translate %}

{% block headcss %}{{ block.super }}
    <style>
        .toggle-sync-details {
            cursor: pointer;
        }
        .sync-details {
            font-size: 0.7em;
            padding-left: 20px;
            position: relative;
            display: none;
        }
        .sync-stderr {
            color: red;
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
<script>
    $(function() {
        $(".toggle-sync-details a").click(function() {
            // Toggle text 
            var toggle_text = $(".sync-details").is(":visible") ? gettext('show details') : gettext('hide details');
            $(".show-detail-text").text(toggle_text);
            // Flip caret
            $(".caret-indicator").toggleClass("caret-reversed");
            // Show and hide details
            $(".sync-details").slideToggle();
            return false;
        });
    });
</script>
{% endblock headjs %}

{% block buttons %}{{ block.super }}
    {% if is_own_device %}
        <div class="server-online-only">
            <a id="force-sync" class="registered-only btn btn-success">{% trans "Sync to central server!" %}</a>
            <a class="not-registered-only btn btn-success" href="{% url 'register_public_key' %}">{% trans "Register" %}</a>
        </div>
    {% endif %}
{% endblock buttons %}

{% block subnavbar %}{{block.super}}{% endblock subnavbar %}

{% block control_panel_content %}
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h3>
                {% trans "Device Metadata" %}
            </h3>

            <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>{{ device_version }}</dd>
                <dt>{% trans "Operating System" %}:</dt>
                <dd>{{ device_os }}</dd>
            {% endif %}
            </dl>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>
                {% trans "Sync Sessions" %}
            </h3>

            {% if not session_pages %}
                <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 %}

                {% if sync_job %}
                    {% if sync_job.is_running %}
                        <h3>
                            {% trans "A sync is currently in progress..." %} <a href=".">{% trans "(refresh)" %}</a>
                        </h3>
                    {% else %}
                        <h3>
                            {% if sync_job.last_run_successful %}
                                <span aria-hidden="true"><i class="glyphicon glyphicon-ok-circle text-success"></i></span>
                                {% trans "The last sync completed successfully" %}
                            {% else %}
                                <span aria-hidden="true"><i class="glyphicon glyphicon-remove-circle text-danger"></i></span>
                                {% trans "There was an error during the last sync" %}
                            {% endif %}
                            <small class="toggle-sync-details"><a><span class="show-detail-text">{% trans "show details" %}</span> <span class="caret-indicator caret"></span></a></small>
                        </h3>
                        <div class="sync-details">
                            <div class="sync-stdout">{{ sync_job.log_set.all.0.stdout|linebreaksbr }}</div>
                            <div class="sync-stderr">{{ sync_job.log_set.all.0.stderr|linebreaksbr }}</div>
                        </div>
                    {% endif %}
                {% endif %}

                <table class="table">
                    <thead>
                        <tr class="header-footer-bg">
                            <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>
                    </thead>
                    <tbody>
                    {% for sync_session in session_pages %}
                        <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 %}
                    </tbody>
                </table>
                {% if session_pages.num_listed_pages > 1 %}
                    <div class="pagination">
                            <a title="{% trans 'Browse to the previous page of sync sessions.' %}" {% if session_pages.has_previous %}href="{{ page_urls.prev_page }}"{% endif %}>&lt&lt</a>
                            {% for listed_page in session_pages.listed_pages %}
                                {% if listed_page == -1 %}
                                    <span class="disabled">&hellip;</span>
                                {% elif listed_page == session_pages.number %}
                                    <span class="current">
                                       {{ session_pages.number }}
                                    </span>
                                {% else %}
                                    <a title="{% blocktrans %}Browse to page # {{ listed_page }} of sessions.{% endblocktrans %}" href="{{ page_urls|get_item:listed_page }}">{{ listed_page }}</a>
                                {% endif %}
                            {% endfor %}
                            <a title="{% trans 'Browse to the next page of sessions.' %}" {% if session_pages.has_next %}href="{{ page_urls.next_page }}"{% endif %}>&gt&gt</a>
                    </div>
                {% endif %}
            {% endif%}
        </div>
    </div>
</div>
{% endblock control_panel_content %}
