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

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

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

{% block right_panel %}
<div class="ovhd hd">
    <h3 class="fleft">{% trans "Contacts"%}</h3>
    <button id="contact-add" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "Add Contacts"%}</span></button>
</div>
{% if contacts %}
<table>
    <tr>
        <th width="4%"></th>
        <th width="35%">{% trans "Email "%}</th>
        <th width="20%">{% trans "Name"%}</th>
        <th width="26%">{% trans "Note"%}</th>
        <th width="15%">{% trans "Operations"%}</th>
    </tr>
    {% for contact in contacts %}
    <tr>
        <td>{% avatar contact.contact_email 20 %}</td>
        <td><a href="{% url 'user_profile' contact.contact_email|id_or_email%}">{{ contact.contact_email }}</a></td>
        <td>{{ contact.contact_name }}</td>
        <td>{{ contact.note }}</td>
        <td data-email="{{ contact.contact_email }}" data-name="{{ contact.contact_name }}" data-note="{{ contact.note }}">
            <img src="{{MEDIA_URL}}img/edit.png" alt="" class="contact-edit op-icon vh" title="{% trans "Edit" %}" />
            <img src="{{MEDIA_URL}}img/rm.png" alt="" data-url="{{ SITE_ROOT }}contacts/delete/?email={{ contact.contact_email|urlencode}}" data-target="{{ contact.contact_email}}" class="contact-delete op-icon vh" title="{% trans "Delete" %}" />
        </td>
    </tr>
{% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="alc">{% trans "You don't have any contacts" %}</h2>
  <p>{% trans "Add your contacts so you can quickly share libraries and send file shared link." %}</p>
</div>
{% endif %}

<form action="" method="post" id="contact-add-form" class="hide">{% csrf_token %}
    <h3>{% trans "Add Contacts"%}</h3>
    <label>{% trans "Email"%}</label><br />
    <input maxlength="255" name="contact_email" type="text" class="input" /><br />
    <label>{% trans "Name(optional)"%}</label><br />
    <input maxlength="255" name="contact_name" type="text" class="input" /><br />
    <label>{% trans "Note(optional)"%}</label><br />
    <input maxlength="255" name="note" type="text" class="input" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}"  class="submit" />
</form>
<form action="" method="post" id="contact-edit-form" class="hide">{% csrf_token %}
    <h3>{% trans "Edit Contact"%}</h3>
    <label>{% trans "Email"%}</label><br />
    <input maxlength="255" name="contact_email" readonly="readonly" type="text" class="input" /><br />
    <label>{% trans "Name(optional)"%}</label><br />
    <input maxlength="255" name="contact_name" type="text" class="input" /><br />
    <label>{% trans "Note(optional)"%}</label><br />
    <input maxlength="255" name="note" type="text" class="input" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit"%}"  class="submit" />
</form>

{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript">
$('.contact-edit').click(function() {
    var contact = $(this).parent();
    var form = $('#contact-edit-form');
    form.find('[name="contact_email"]').val(contact.data('email'));
    form.find('[name="contact_name"]').val(contact.data('name'));
    form.find('[name="note"]').val(contact.data('note'));
    form.modal({appendTo: '#main'});
    return false;
});
$('#contact-edit-form').submit(function() {
    var form = $(this),
        form_id = $(this).attr('id');
    $.ajax({
        url: '{% url 'contact_edit' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'user_email': '{{request.user.username}}',
            'contact_email': form.find('input[name="contact_email"]').val(),
            'contact_name': form.find('input[name="contact_name"]').val(),
            'note': form.find('input[name="note"]').val()
        },  
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if (jqXHR.responseText) {
                var errors = $.parseJSON(jqXHR.responseText);
                var str = '';
                for (var i in errors) {
                    str += errors[i].join();
                }
                apply_form_error(form_id, str);
            } else {
                apply_form_error(form_id, "{% trans "Failed. Please check the network." %}");
            }
        }
    });

    return false;
});

addConfirmTo($('.contact-delete'), {'title':"{% trans "Delete Contact" %}", 'con':"{% trans "Are you sure you want to delete %s ?" %}"});

$('#contact-add').click(function() {
    $('#contact-add-form').modal({appendTo: '#main'});
})
$('#contact-add-form').submit(function() {
    var form = $(this),
        form_id = $(this).attr('id'),
        email = $.trim(form.find('input[name="contact_email"]').val());
    if(!email) {
        apply_form_error(form_id, "{% trans "Email is required." %}");
        return false;
    }
    if (email == '{{request.user.username}}') {
        apply_form_error(form_id, "{% trans "You cannot add yourself." %}");
        return false;
    }

    $.ajax({
        url: '{% url 'contact_add_post' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'contact_email': email,
            'contact_name': form.find('input[name="contact_name"]').val(),
            'note': form.find('input[name="note"]').val()
        },  
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if (jqXHR.responseText) {
                location.reload(true);
            } else {
                apply_form_error(form_id, "{% trans "Failed. Please check the network." %}");
            }
        }
    });

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