{% extends 'home_base.html' %}
{% load seahub_tags avatar_tags i18n %}

{% block sub_title %}{% trans "Messages" %} - {% endblock %}

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

{% block right_panel %}
<h3 class="hd">{% blocktrans with name=to_email|email2nickname%}Messages with {{name}}{% endblocktrans %}</h3>

<div id="personal-msg-panel" class="msg-panel personal-msg-panel">
    {% if to_email %}
    <form id="personal-message-form" class="msg-form" action="{% url 'message_send' %}?from=user" method="post">{% csrf_token %}
       {% avatar request.user.username 48 %}
        <textarea name="mass_msg" id="message" placeholder="{% trans "Send a message..." %}" class="msg-input"></textarea><br />
        <input type ="hidden" value="{{ to_email }}" name="mass_email" />
        {% 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>
    {% endif %}

    {% if person_msgs %}
    <ul class="msg-list">
    {% for msg in person_msgs.object_list %}
        {% if msg.to_email == request.user.email %}
        <li class="msg msg-received w100 ovhd">
        <a href="{% url 'user_profile' msg.from_email|id_or_email %}" class="pic fright">{% avatar msg.from_email 48 %}</a>
        {% else %}        
        <li class="msg w100 ovhd">
        <a href="{% url 'user_profile' msg.from_email|id_or_email %}" class="pic fleft">{% avatar msg.from_email 48 %}</a> 
        {% endif %}
        <div class="txt">
            <div class="msg-main">
                <div class="msg-hd w100 ovhd">                    
                    <a class="author" href="{% url 'user_profile' msg.from_email|id_or_email %}">{{ 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.attachments %}
                <ul class="msg-attachment">
                    {% for att in msg.attachments %}
                    <li>
                        <img src="{{ MEDIA_URL }}img/file/{{ att.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
                        <a href="{% url 'view_priv_shared_file' att.token %}" target="_blank" class="vam">{{ att.name }}</a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                <span class="say"></span>
            </div>
        </div>
        </li>
    {% endfor %}
    </ul>
    {% endif %}


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

    {% if person_msgs.object_list|length > 5 %}
    <a href="#personal-msg-panel" id="msg-upward" class="hide">{% trans "↑Top" %}</a>
    {% endif %}
</div>

{% include 'snippets/add_to_contacts_form.html' %}
{% endblock %}


{% block extra_script %}{{block.super}}
<script type="text/javascript">
{% if person_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 %}

$('#message').focus(function() {
    $(this).height(75);
    $('#personal-message-form').find('.submit, .cancel').removeClass('hide');
});
$('#personal-message-form .cancel').click(function() {
    $(this).addClass('hide');
    $('#personal-message-form .submit').addClass('hide');
    $('#message').val('').height(25);
});

$('#personal-message-form').submit(function() {
    var form = $(this),
        msg_input = $('[name="mass_msg"]', form),
        msg = $.trim(msg_input.val());
    
    if (!msg) {
        return false;
    }

    var sb_btn = $('.submit', form);
    disable(sb_btn);
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: 'json',
        beforeSend: prepareCSRFToken,
        data: { 'mass_msg': msg, 'mass_email': '{{to_email}}' },
        success: function(data) {
            var new_msg = $(data['html']);
            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[0];
            } else {
                err_msg = "{% trans "Failed. Please check the network." %}";
            }    
            apply_form_error(form.attr('id'), err_msg);
        }
    });
    return false;
});
</script>

{% include 'snippets/add_to_contacts_js.html' %}

{% endblock %}


