{% extends 'group/group_base.html' %}

{% load seahub_tags avatar_tags i18n %}

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

{% block right_panel %}
<div id="group-discussions" class="msg-panel">
    {% if request.user.is_authenticated %}
    <form id="group-message-form" action="" method="post" class="msg-form">{% csrf_token %}
        {% avatar request.user.username 48 %}
        <textarea name="message" id="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input">{{ form.data.message }}</textarea><br />
        {% for error in form.message.errors %}
        <p class="error">{{ error|escape }}</p>
        {% endfor %}
        <button type="submit" class="submit hide">{% trans "Submit" %}</button>
        <button type="button" class="cancel hide">{% trans "Cancel" %}</button>
        <span class="say"></span>
    </form>
    {% else %}
    <p>{% trans "After login, you can post discussions and add replies." %}</p>
    {% endif %}

    {% if group_msgs %}
    <ul class="msg-list">
    {% for msg in group_msgs.object_list %}
        <li class="msg w100 ovhd" data-id="{{msg.id}}">
        <a href="{% url 'user_profile' msg.from_email|id_or_email %}" class="pic fleft">{% avatar msg.from_email 48 %}</a>
        <div class="txt">
            <div class="msg-main">
                <div class="msg-hd w100 ovhd">
                    {% if is_staff or msg.from_email == request.user.username %}
                    <span class="msg-del op fright vh">{% trans "Delete" %}</span>
                    {% endif %}
                    <a href="{% url 'user_profile' msg.from_email|id_or_email %}" class="author">{{ msg.from_email|email2nickname }}</a>
                    <span class="time">{{ msg.timestamp|translate_seahub_time }}</span>
                </div>
                <p class="msg-con">{{ msg.message|seahub_urlize|find_at|linebreaksbr }}</p>
                {% if msg.attachment %}
                {% with ma=msg.attachment %}
                <div class="msg-attachment">
                    {% if ma.src == 'recommend' %}
                    {% if ma.attach_type == 'file' %}
                        {% if ma.filetype != 'Image'%}
                        <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
                        <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
                        {% else %}
                            {% if ma.err %}
                            <p class="error">{{ma.err}}</p>
                            {% else %}
                            <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="img-cont"><img src="{{ma.img_url}}" alt="{{ma.name}}" class="img" /></a>
                            {% endif %}
                        {% endif %}
                    {% else %}
                    <img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" height="20" class="vam" />
                    <a href="{% url 'repo' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
                    {% endif %}
                    {% endif %}

                    {% if ma.src == 'filecomment' %} {# compatible with comments already exist #}
                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
                    <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
                    {% endif %}
                </div>
                {% endwith %}
                {% endif %}
                <span class="say"></span>
            </div>
            <div class="msg-op">
                <div class="replies-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
                    <span class="unfold-replies">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
                    <span class="fold-replies hide">{% trans "Hide replies" %}</span>
                    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" width="16" class="replies-loading-icon hide" />
                </div>
                {% if msg.reply_cnt == 0 %}
                <ul class="reply-list hide"></ul>
                {% else %}
                <ul class="reply-list">
                    {% for r in msg.replies %}
                    <li class="reply w100 ovhd">
                    {% with id=r.from_email|id_or_email name=r.from_email|email2nickname %}
                    <a href="{% url 'user_profile' id %}" class="pic fleft">{% avatar r.from_email 28 %}</a>
                    <div class="txt">
                        <a href="{% url 'user_profile' id %}">{{ name }}</a>
                        <span class="time">{{ r.timestamp|translate_seahub_time }}</span>
                        <span class="reply-at op vh" data="{{ name }}">{% trans 'Reply' %}</span>
                        <p class="reply-con">{{ r.message|seahub_urlize|find_at }}</p>
                    </div>
                    {% endwith %}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% if request.user.is_authenticated %}
                <form action="" method="post" class="reply-form">
                    <textarea placeholder="{% trans "Add a reply..." %}" name="message" class="reply-input"></textarea>
                    <p class="error hide">{% trans "It can not be blank and should be no more than 2048 characters." %}</p>
                    <button type="submit" class="reply-submit hide">{% trans "Submit" %}</button>
                    <button type="button" class="reply-cancel hide">{% trans "Cancel" %}</button>
                </form>
                {% endif %}
            </div>
        </div>
        </li>
    {% endfor %}
    </ul>
    {% endif %}

    {% if group_msgs.has_other_pages %}
    <div id="paginator">
        {% if group_msgs.has_previous %}
        <a href="?page={{ group_msgs.previous_page_number }}" class="prev">{% trans "Previous" %}</a>
        {% endif %}
        {% for pr in group_msgs.page_range %}
          {% if pr == group_msgs.number %}
          <span class="cur">{{ pr }}</span>
          {% else %}
          <a href="?page={{ pr }}" class="pg">{{ pr }}</a>
          {% endif %}
        {% endfor %}
        {% if group_msgs.has_next %}
        <a href="?page={{ group_msgs.next_page_number }}" class="next">{% trans "Next"%}</a>
        {% endif %}
    </div>
    {% endif %}

    {% if group_msgs.object_list|length > 5 %}
    <a href="#group-discussions" id="msg-upward" class="hide">{% trans "↑Top" %}</a>
    {% endif %}

    {% if request.user.is_authenticated %}
    <ul class="new-msg-list hide">
        <li class="msg w100 ovhd hide">
        <a href="{% url 'user_profile' request.user.username|id_or_email %}" class="pic fleft">{% avatar request.user.username 48 %}</a>
        <div class="txt">
            <div class="msg-main">
                <div class="msg-hd w100 ovhd">
                    <span class="msg-del op fright vh">{% trans "Delete" %}</span>
                    <a href="{% url 'user_profile' request.user.username|id_or_email %}" class="author">{{ request.user.username|email2nickname }}</a>
                    <span class="time">{% trans "Just now" %}</span>
                </div>
                <p class="msg-con"></p>
                <span class="say"></span>
            </div>
            <div class="msg-op">
                <div class="replies-op hide" data-rstatus="hide">
                    <span class="unfold-replies" data-url="">{% blocktrans with amount=0 %}{{ amount }} replies{% endblocktrans %}</span>
                    <span class="fold-replies hide">{% trans "Hide replies" %}</span>
                    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" width="16" class="replies-loading-icon hide" />
                </div>
                <ul class="reply-list hide"></ul>
                <form action="" method="post" class="reply-form">
                    <textarea placeholder="{% trans "Add a reply..." %}" name="message" class="reply-input"></textarea>
                    <p class="error hide">{% trans "It can not be blank and should be no more than 2048 characters." %}</p>
                    <button type="submit" class="reply-submit hide">{% trans "Submit" %}</button>
                    <button type="button" class="reply-cancel hide">{% trans "Cancel" %}</button>
                </form>
            </div>
        </div>
        </li>
    </ul>
    {% endif %}
</div>
{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript">
{% if group_msgs.object_list|length > 5 %}
// 'back to top'
$(window).scroll(function() {
    var up_icon = $('#msg-upward');
    var msg_panel =  up_icon.parent();
    var msg_panel_offset = msg_panel.offset();
    var msg_panel_bot = msg_panel_offset.top + msg_panel.height(); 
    var win_st = $(window).scrollTop();
    var win_h = $(window).height() + win_st;

    if (win_st > msg_panel_offset.top) {
        up_icon.css({'left': msg_panel_offset.left + msg_panel.width() + 60}).removeClass('hide');
        if (win_h > msg_panel_bot) {
            up_icon.css({'bottom': win_h - msg_panel_bot + 15});
        } else {
            up_icon.css({'bottom': 15});
        }
    } else {
        up_icon.addClass('hide');
    }
});
{% endif %}

{% if request.user.is_authenticated %}
$('#message').focus(function() {
    $(this).height(75);
    $('.submit, .cancel', $('#group-message-form')).removeClass('hide');
});
$('#group-message-form .cancel').click(function() {
    $('.submit, .cancel', $('#group-message-form')).addClass('hide');
    $('#message').val('').height(25);
});
$('#group-message-form').submit(function() {
    var form = $(this);
    var msg_input = $('[name="message"]');
    if (!$.trim(msg_input.val())) {
        return false;
    }
    
    var sb_btn = $('.submit', form);
    disable(sb_btn);
    $.ajax({
        url: '{% url 'group_add_discussion' group.id %}',
        type: 'POST',
        dataType: 'json',
        beforeSend: prepareCSRFToken,
        data: { 'message': msg_input.val() },
        success: function(data) {
            var new_msg = $('.new-msg-list .msg').clone(true).attr('data-id', data['msg_id']);
            $('.msg-con', new_msg).html(data['msg_con']); 
            if ($('.msg-list').length == 0) { // the new discussion is the first discussion in this page
                form.after('<ul class="msg-list"></ul>');    
            }
            $('.msg-list').prepend(new_msg);
            new_msg.slideDown(400);
            msg_input.val('');
            enable(sb_btn);
        },
        error: function (xhr, textStatus, errorThrown) {
            var err_msg;
            if (xhr.responseText) {
                err_msg = $.parseJSON(xhr.responseText).error;
            } else {
                err_msg = "{% trans "Failed. Please check the network." %}";
            }    
            apply_form_error(form.attr('id'), err_msg);
        }
    });
    return false;
});
{% endif %}

{% include 'group/msg_js.html' %}

$('.msg-del').click(function() {
    var msg = $(this).parents('.msg');
    var cfm;
    if (msg.find('.msg-del-confirm').length > 0) {
        cfm = msg.find('.msg-del-confirm');
    } else {
        cfm = '<div class="op-confirm msg-del-confirm hide"><p>{% trans "Really want to delete this discussion?" %}</p><button class="yes">{% trans "Yes" %}</button><button class="no">{% trans "No" %}</button></div>';
        var msg_main = msg.find('.msg-main');
        var msg_hd = msg.find('.msg-hd');
        cfm = msg_main.append(cfm).children(':last');
        cfm.css({'right':msg_main.css('padding-right'), 'top':msg_hd.position().top + msg_hd.height()});
    }
    cfm.removeClass('hide');
    cfm.children('.yes').click(function() {
        cfm.addClass('hide');
        $.ajax({
            url: '{{SITE_ROOT}}group/{{group.id}}/msgdel/' + msg.attr('data-id') + '/',
            dataType:'json',
            success: function(data) {
                if (data['success']) {
                    msg.remove();
                    feedback('{% trans "Successfully deleted" %}', 'success');
                } else {
                    feedback('{% trans "Failed to delete: " %}' + data['err_msg'], 'error');
                }
            },
            error: function() {
                feedback('{% trans "Failed." %}', 'error');
            }
        });
    });
    cfm.children('.no').click(function() {
        cfm.addClass('hide');
    });
});
</script>
{% endblock %}
