{% extends "home_base.html" %}

{% load seahub_tags avatar_tags i18n %}

{% block sub_title %}{% trans "Clients" %} - {% endblock %}
{% block cur_clients %}tab-cur{% endblock %}

{% block right_panel %}
<h3 class="hd">{% trans "Clients" %}</h3>
{% if clients %}
<table class="client-list">
    <tr>
        <th width="20%">{% trans "Client Name" %}</th>
        <th width="20%">{% trans "Library" %}</th>
        <th width="20%">{% trans "IP" %}</th>
        <th width="20%">{% trans "Last Sync" %}</th>
        <th width="20%">{% trans "Operations" %}</th>
    </tr>
    {% for client in clients %}
    <tr data-repoid="{{client.repo_id}}" data-token="{{client.token}}">
        <td>
        {% if client.peer_name %}
            {% if client.show_peer_name %}
            {{ client.peer_name }}
            {% endif %}
        {% else %}
        --
        {% endif %}
        </td>
        <td>
            <a href="{% url 'repo' client.repo_id %}">{{ client.repo_name }}</a>
        </td>
        <td>
        {% if client.peer_ip %}
        {{ client.peer_ip }}
        {% else %}
        --
        {% endif %}
        </td>
        <td>
        {% if client.sync_time > 0 %}
        {{ client.sync_time|translate_seahub_time }}
        {% else %}
        {% trans "Not synced" %}
        {% endif %}
        </td>
        <td>
            <div><a href="#" class="unsync-client op vh">{% trans "Unsync" %}</a></div>
        </td>
    </tr>
    {% endfor %}
</table>
<div class="op-confirm unsync-confirm hide" id="unsync-cfm-popup">
    <p>{% trans "Really want to unsync it?" %}</p>
    <button class="yes">{% trans "Yes" %}</button>
    <button class="no">{% trans "No" %}</button>
</div>
{% else %}
<div class="empty-tips">
    <h2 class="alc">{% trans "You do not have connected clients" %}</h2>
    <p>{% trans "The libraries synced to desktop clients are listed in this page. You can see the client's name and its IP address. You may unsync a client from a library if you no longer want to sync it." %}</p>
</div>
{% endif %}

{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript">
$('#main-panel').removeClass('ovhd');
$('.unsync-client').click(function() {
    var op = $(this);
    var cont = op.parent().css({'position': 'relative'}),
        cfm;
    
    // only show 1 popup each time.
    $('.unsync-confirm', op.parents('table')).addClass('hide');

    if (cont.find('.unsync-confirm').length == 1) {
        cfm = cont.find('.unsync-confirm');
    } else {
        cfm = $('#unsync-cfm-popup').clone().removeAttr('id'); 
        cont.append(cfm);
        cfm.css({'left': op.position().left + op.width() + 10, 'top': op.position().top, 'white-space':'nowrap'});
    }
    cfm.removeClass('hide');
    $('.no',cfm).click(function() {
        cfm.addClass('hide');
    });
    $('.yes',cfm).click(function() {
        var tr = op.parents('tr');
        $.ajax({
            url: '{% url 'client_unsync' %}?repo_id=' + e(tr.data('repoid')) + '&token=' + e(tr.data('token')),
            dataType: 'json',
            success: function() {
                var repo_name_td = $($('td', tr)[0]);
                var next_repo_name_td = $($('td', tr.next())[0]);
                if ($.trim(repo_name_td.html()) && !$.trim(next_repo_name_td.html())) {
                    next_repo_name_td.replaceWith(repo_name_td);
                }
                tr.remove();
                feedback("{% trans "Successfully unsynced." %}", 'success');
            },
            error: ajaxErrorHandler
        });
    });
    return false;
});

$("tr:gt(0)", $('.client-list')).unbind().hover(
    function() {
        if ($('.unsync-confirm:visible', $('.client-list')).length == 0) {
            $(this).addClass('hl');
            $(this).find('.op').removeClass('vh');
        }   
    },  
    function() {
        if ($('.unsync-confirm:visible', $('.client-list')).length == 0) {
            $(this).find('.op').addClass('vh');
            $(this).removeClass('hl');
        }   
    }   
);
</script>
{% endblock %}
