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

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

{% block right_panel %}
<div id="tabs" class="tab-tabs">
    <ul class="tab-tabs-nav hd ovhd">
        <li class="tab"><a href="#members" class="a">{% trans "Members" %}</a></li>
        <li class="tab"><a href="#administrators" class="a">{% trans "Admins" %}</a></li>
        <li class="tab"><a href="#settings" class="a" id="settings-tab">{% trans "Settings" %}</a></li>
    </ul>
    <div id="members">
        <div class="ovhd">
            <button id="group-member-add" class="fright"><span class="add icon-plus-sign-alt"></span>{% trans "Add Members"%}</button>
        </div>
        {% 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 %}
                    <a href="#" data-url="{{ SITE_ROOT }}group/{{ group.id }}/member/{{ member.user_name|urlencode }}/?op=delete" data-target="{{ member.user_name }}" class="member-remove-btn op vh">{% trans "Delete"%}</a>
                  {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}
    </div>

    <div class="hide" id="administrators">
        <div class="ovhd">
            <button id="group-admin-add" class="fright"><span class="add icon-plus-sign-alt"></span>{% trans "Add Admins"%}</button>
        </div>
        {% 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 %}
                    <a href="#" data-url="{% url 'group_remove_admin' group.id %}?u={{ member.user_name|urlencode }}" data-target="{{ member.user_name }}" class="member-remove-btn op vh">{% trans "Delete"%}</a>
                    {% 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 %}
                <li><a href="{% url 'group_make_pub' group.id %}">{% trans "Make Public" %}</a></li>
                {% 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="text" name="email" value="" placeholder="{% trans "email"%}" class="input" />
    <p class="tip">{% trans "Tip: the email should be already registered."%}</p>
    <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>

{% include 'group/grpmember_add_form.html' %} {# for member/admin add #}
{% endblock %}

{% block extra_script %}{{block.super}}
{% include "snippets/avatar_upload_js.html" %}
<script type="text/javascript">
$('#settings-tab').click(function() {
    changeAvatar($('#grp-avatar-chg-btn'), $('#grp-avatar-input'), $('#grp-avatar-form'));
});
addConfirmTo($("#group-dismiss"), {
        'title':'{% trans "Dismiss Group" %}',
        'con':'{% trans "Really want to dismiss this group?" %}'
});
addConfirmTo($(".member-remove-btn"), {
        'title':'{% trans "Delete Member" %}',
        'con':'{% trans "Really want to delete %s ?" %}'
});
var contact_list = [], contact_email;
{% for contact in contacts %}
contact_email = '{{ contact.contact_email }}';
contact_list.push({value:contact_email, label:contact_email});
{% endfor %}

{# for member/admin add #}
{% include 'group/grpmember_add_js.html' %}

$('#group-transfer').click(function() {
    $('#group-transfer-form').modal({appendTo: "#main", focus:false});
    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 %}
