{% extends "profile/profile_base.html" %}
{% load avatar_tags i18n seahub_tags %}

{% block extra_style %}
<style type="text/css">
.avatar-cont {
    padding:25px;
    border:2px solid #ddd;
    border-radius:3px;
    text-align:center;
}
.add-to-contacts, #send-msg {
    margin-top:8px;
}
</style>
{% endblock %}

{% block left_panel %}
<div class="avatar-cont">
    {% if user %}
    {% avatar user.username 80 %}
    {% else %}
    {% avatar "" 80 %}
    {% endif %}
</div>

{% if add_to_contacts %}
<button class="add-to-contacts w100" data-email="{{user.username}}">{% trans "Add to Contacts" %}</button>
{% endif %}

{% if user %}
<button id="send-msg" class="w100">{% trans "Send message" %}</button>
{% endif %}

{% endblock %}

{% block right_panel %}
<h3 class="hd">{% trans "Info" %}</h3>

<dl>
    <dt>{% trans "Name" context "true name" %}</dt>
    <dd>{{ nickname }}</dd>

    <dt>{% trans "Self-introduction" %}</dt>
    <dd>{{ intro }}</dd>

    {% if d_profile %}
    <dt>{% trans "Department" %}</dt>
    <dd>{{ d_profile.department }}</dd>

    <dt>{% trans "Telephone" %}</dt>
    <dd>{{ d_profile.telephone }}</dd>
    {% endif %}
</dl>

{% if add_to_contacts %}
{% include 'snippets/add_to_contacts_form.html' %}
{% endif %}

{% endblock %}

{% block extra_script %}
<script type="text/javascript">
{% if user %}
$('#send-msg').click(function() {
    location.href = "{% url 'user_msg_list' username_or_id %}";
});
{% endif %}
</script>
{% include 'snippets/add_to_contacts_js.html' %}
{% endblock %}
