{% extends 'group/group_base.html' %}
{% load seahub_tags avatar_tags group_avatar_tags i18n staticfiles %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "css/select2.custom.css" %}" />
{% endblock %}

{% block cur_admin %}tab-cur{% endblock %}

{% block right_panel %}
<div id="tabs" class="tab-tabs">
    <div class="hd ovhd">
    <ul class="tab-tabs-nav fleft">
        <li class="tab"><a href="#members" class="a" id="members-tab">{% trans "Members" %}</a></li>
        <li class="tab"><a href="#administrators" class="a" id="admin-tab">{% trans "Admins" %}</a></li>
        <li class="tab"><a href="#settings" class="a" id="settings-tab">{% trans "Settings" %}</a></li>
    </ul>
    <div class="fright">
        <button id="group-member-add" class="hide"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "Add Members"%}</span></button>
        <button id="group-admin-add" class="hide"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "Add Admins"%}</span></button>
    </div>
    </div>
    <div id="members">
        {% if members %}
        <table>
            <tr>
                <th width="4%"></th>
                <th width="71%">{% trans "Email"%}</th>
                <th width="25%">{% trans "Operations"%}</th>
            </tr>

            {% for member in members %}
            <tr>
                <td>{% avatar member.user_name 20 %}</td>
                <td>{{ member.user_name }}</td>
                <td>
                    {% if member.user_name != request.user.username %}
                    <img src="{{MEDIA_URL}}img/rm.png" alt="" data-url="{{ SITE_ROOT }}group/{{ group.id }}/member/{{ member.user_name|urlencode }}/?op=delete" data-target="{{ member.user_name }}" class="rm-member op-icon vh" title="{% trans "Delete" %}" />
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}
    </div>

    <div class="hide" id="administrators">
        {% if admins %}
        <table>
            <tr>
                <th width="4%"></th>
                <th width="71%">{% trans "Email"%}</th>
                <th width="25%">{% trans "Operations"%}</th>
            </tr>

            {% for member in admins %}
            <tr>
                <td>{% avatar member.user_name 20 %}</td>
                <td>{{ member.user_name }}</td>
                <td>
                    {% if member.user_name != request.user.username %}
                    <img src="{{MEDIA_URL}}img/rm.png" alt="" data-url="{% url 'group_remove_admin' group.id %}?u={{ member.user_name|urlencode }}" data-target="{{ member.user_name }}" class="rm-member op-icon vh" title="{% trans "Delete"%}" />
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}
    </div>

    <div class="hide" id="settings">
        <div class="setting-item" style="margin-top:40px;">
            <h3>{% trans "Avatar" %}</h3>
            <div class="ovhd">
                <div class="fleft">{% grp_avatar group.props.id 48 %}</div>
                <form id="grp-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_group_add' group.id %}" class="fleft">{% csrf_token %}
                    <button type="button" id="grp-avatar-chg-btn">{% trans "Change" %}</button>
                    <input type="file" name="avatar" id="grp-avatar-input" />
                </form>
            </div>
        </div>
        <div class="setting-item">
            <h3>{% trans "Operations" %}</h3>
            <ul class="op-list">
                <li><a id="group-rename" href="#" data-url="{% url 'group_rename' group.id %}">{% trans "Rename" %}</a></li>
                {% if group.is_pub %}
                <li><a href="{% url 'group_revoke_pub' group.id %}">{% trans "Revoke Public" %}</a></li>
                {% else %}
                  {% if can_make_group_public %}                  
                  <li><a href="{% url 'group_make_pub' group.id %}">{% trans "Make Public" %}</a></li>
                  {% endif %}
                {% endif %}
                <li><a id="group-transfer" href="#" >{% trans "Transfer" %}</a></li>
                <li><a id="group-dismiss" href="#" data-url="{% url 'group_dismiss' group.id %}">{% trans "Dismiss" %}</a></li>
            </ul>
        </div>
    </div>

</div>

<form id="group-transfer-form" method="post" action="{% url 'group_transfer' group.id %}" class="hide">{% csrf_token %}
    <h3>{% trans "Transfer Group To"%}</h3>
    <input type="hidden" name="email" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}" />
</form>

<form id="group-rename-form" method="post" action="{% url 'group_rename' group.id %}" class="hide">{% csrf_token %}
    <h3>{% trans "Rename Group To"%}</h3>
    <input type="text" name="new_name" value="" class="input" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}" />
</form>

<form id="group-member-add-form" method="post" action="{% url 'group_add_member' group.id %}" class="hide">
    <h3>{% trans "Add members" %}</h3>
    <input type="hidden" name="user_name" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}" />
</form>

<form id="group-admin-add-form" method="post" action="{% url 'group_add_admin' group.id %}" class="hide">
    <h3>{% trans "Add administrators" %}</h3>
    <input type="hidden" name="user_name" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}" />
</form>
{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript" src="{% static "scripts/lib/select2-3.5.2.js" %}"></script>
{% include "snippets/avatar_upload_js.html" %}
<script type="text/javascript">
var cur_tab = $('.ui-tabs-selected .a');    
var member_add_btn = $('#group-member-add'),
    admin_add_btn = $('#group-admin-add');
if (cur_tab.attr('id') == 'members-tab') {
    member_add_btn.removeClass('hide');
}
if (cur_tab.attr('id') == 'admin-tab') {
    admin_add_btn.removeClass('hide');
}
$('#members-tab').click(function() {
    member_add_btn.removeClass('hide');
    admin_add_btn.addClass('hide');
});
$('#admin-tab').click(function() {
    member_add_btn.addClass('hide');
    admin_add_btn.removeClass('hide');
});
$('#settings-tab').click(function() {
    changeAvatar($('#grp-avatar-chg-btn'), $('#grp-avatar-input'), $('#grp-avatar-form'));
    member_add_btn.addClass('hide');
    admin_add_btn.addClass('hide');
});
addConfirmTo($("#group-dismiss"), {
        'title':"{% trans "Dismiss Group" %}",
        'con':"{% trans "Really want to dismiss this group?" %}"
});
addConfirmTo($(".rm-member"), {
        'title':"{% trans "Delete Member" %}",
        'con':"{% trans "Really want to delete %s ?" %}"
});

$("#group-member-add, #group-admin-add").click(function() {
    var form = $('#' + $(this).attr('id') + '-form');
    form.modal({appendTo: "#main", focus:false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});

    $('[name="user_name"]', form).select2($.extend({
        width: '268px',
        placeholder: "{% trans "Search users or enter emails" %}",
        formatInputTooShort: "{% trans "Please enter 1 or more character" %}",
        formatNoMatches: "{% trans "No matches" %}",
        formatSearching: "{% trans "Searching..." %}",
        formatAjaxError: "{% trans "Loading failed" %}"
    }, userInputOPtionsForSelect2('{% url 'search-user' %}')));
});

$('#group-member-add-form, #group-admin-add-form').submit(function() {
    var form = $(this);
    var user_name = $('[name="user_name"]', form).val();
    if (!$.trim(user_name)) {
        return false;
    }

    var submit_btn = $('[type="submit"]', form);
    disable(submit_btn);
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: 'json',
        cache: false,
        beforeSend: prepareCSRFToken,
        data: {
            'user_name': user_name
        },
        success: function() {
            location.reload(true);
        },
        error: function (xhr, textStatus, errorThrown) {
            var error;
            if (xhr.responseText) {
                error = $.parseJSON(xhr.responseText).error;
            } else {
                error = "{% trans "Failed. Please check the network." %}";
            }
            $('.error', form).html(error).removeClass('hide');
            enable(submit_btn);
        }
    });
    return false;
});

$('#group-transfer').click(function() {
    var form = $('#group-transfer-form');
    form.modal({appendTo: "#main", focus:false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});

    $('[name="email"]', form).select2($.extend({
        width: '268px',
        maximumSelectionSize: 1,
        placeholder: "{% trans "Search user or enter email" %}",
        formatInputTooShort: "{% trans "Please enter 1 or more character" %}",
        formatNoMatches: "{% trans "No matches" %}",
        formatSearching: "{% trans "Searching..." %}",
        formatAjaxError: "{% trans "Loading failed" %}",
        formatSelectionTooBig: "{% trans "You cannot select any more choices" %}"
    }, userInputOPtionsForSelect2('{% url 'search-user' %}')));

    return false;
});

$('#group-transfer-form').submit(function() {
    if (!$.trim($('[name="email"]', $(this)).val())) {
        return false;
    }
});

$('#group-rename').click(function() {
    $('#group-rename-form').modal({appendTo: "#main", focus:false});
    return false;
});
$('#group-rename-form').submit(function() {
    if (!$.trim($('[name="new_name"]', $(this)).val())) {
        return false;
    }
});
</script>
{% endblock %}
