{% extends "myhome_base.html" %}
{% load seahub_tags group_avatar_tags i18n %}
{% load url from future %}

{% block main_panel %}
<div class="user-profile narrow-panel ovhd">
  <div class="pic fleft">
    {% grp_avatar group.id 48 %}
    <button id="add">{% trans "Join Group" %}</button>
  </div>

  <div class="txt fright">
    <p>{% trans "Name: " %}{{ group.group_name }}</p>
    <p>{% trans "Creator: " %}{{ group.creator_name|email2nickname }}</p>
    <p>{% trans "Create at: " %}{{ group.timestamp|tsstr_sec }}</p>
    <p>{% trans "Members: " %}{{ members|length }}</p>
  </div>
</div>

<form id="group-join-form" class="hide" action="" method="post">{% csrf_token %}
  <label>{% trans "Verification Message" %}</label><br />
  <textarea id="id_group_join_msg" name="group_join_msg"></textarea><br />
  <p class="error hide"></p>
  <input type="submit" value="{% trans "Submit" %}" id="group-join-submit" />
</form>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('#add').click(function() {
    $('#group-join-form').modal({appendTo: '#main'});
});

$('#group-join-submit').click(function() {
    var self = $(this);
    self.attr('disabled', 'disabled');
    
    $.ajax({
        url: '{% url 'group_joinrequest' group.id %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'group_join_msg': $('#id_group_join_msg').val(),
        },
        success: function(data) {
            self.removeAttr('disabled');
            location.reload(true);
        },
        error: function(data, textStatus, jqXHR) {
            var errors = $.parseJSON(data.responseText);
            $.each(errors, function(index, value) {
                if (index == 'error') {
                    apply_form_error('group-join-form', value);
                } else {
                    apply_form_error('group-join-form', value[0]);
                }
            });
            self.removeAttr('disabled');
        }
    });

    return false;
});
</script>
{% endblock %}
