{% extends 'profile/base.html' %}
{% load i18n %}
{% block title %}{% trans 'Profile' %}{% endblock %}
{% block content %}
<div class="jumbotron">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3" data-ng-controller="UserController">
                <span class="profile_avatar_container">
                    <span class="profile_avatar" data-ng-style="{'background-image': 'url(\''+profile_gravatar+'\')'}"></span>
                </span>
                <span class="profile_buttons">
                    <a class="btn btn-sm btn-block btn-success" href="https://es.gravatar.com/gravatars/new/">
                        <i class="icon-camera bigger-120"></i>
                        <span class="bigger-110">{% trans 'Change avatar' %}</span>
                    </a>
                </span>
                <span class="profile_info">
                    <h3>{{ user_view.first_name }}</h3>
                    <h3>{{ user_view.last_name }}</h3>
                    <span>
                        <i class="icon-user"></i>
                        {{ user_view.username }}
                    </span>
                    <span>
                        <i class="icon-envelope-alt"></i>
                        {{ user_view.email }}
                    </span>
                    {% if user_view.description %}
                    <span>
                        <i class="icon-book"></i>
                        {{ user_view.description }}
                    </span>
                    {% endif %}
                </span>
            </div>
            <div class="span9">
                <div class="row-fluid">
                    <tabset>
                        <tab>
                            <tab-heading>
                                <i class="icon-list"></i>
                                {% trans 'Wall' %}
                            </tab-heading>
                            {% include 'tribs.html' with user_from_template=user_view.first_name %}
                        </tab>
                        <tab>
                            <tab-heading>
                                <i class="icon-user"></i>
                                {% trans 'Edit Profile' %}
                            </tab-heading>
                            <form name="edit_profile_form" accept-charset="UTF-8" action="profile/done" autocomplete="off" novalidate method="post">
                                {% csrf_token %}
                                <ul class="unstyled row-fluid">      
                                    <li><label class ="span2 offset1">{% trans 'Description'%}:</label>{{ editForm.descripcion }}</li>
                                </ul>
                                <div class="span2 offset3" >
                                    <button class="btn btn-success btn-block" type="submit">{% trans 'Confirm' %} </button>
                                </div>
                            </form>
                        </tab>
                        <tab>
                            <tab-heading>
                                <i class="icon-group"></i>
                                {% trans 'Follows' %}
                            </tab-heading>
                            <div data-ng-controller="FollowsController">
                                <div class="action_publisher">
                                    <form autocomplete="off" name="action_form">
                                        <div class="row-fluid">
                                            <span class="span6"></span>
                                            <span class="span6 action_body">
                                                <span class="action_bubble">
                                                    <input data-ng-model="follows_filter" id="id_follows_filter" name="follows_filter" class="action_input" placeholder="{% blocktrans %}Are you looking for someone?{% endblocktrans %}"></input>
                                                </span>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                                <div class="follows_list">
                                    <ul>
                                        <li class="row-fluid follows_item" data-ng-repeat="follow in follows | filter: follows_filter | startFrom: currentPage*pageSize | limitTo: pageSize">

                                            <span class="span1">

                                                <a href="/profile/{% verbatim %}{{ follow.username }}{%endverbatim %}">
                                                    <span class="follows_avatar" data-ng-style="{'background-image': 'url(\''+convertmd5(follow.email)+'\')'}"></span>
                                                </a>
                                            </span>
                                            <span class="span11 follows_body">
                                                <span class="follows_title" >
                                                    <h3>
                                                        <a href="/profile/{% verbatim %}{{ follow.username }}{% endverbatim %}">
                                                            {% verbatim %}
                                                            {{ follow.first_name }} {{ follow.last_name }}
                                                            {% endverbatim %}
                                                        </a>
                                                    </h3>
                                                    <h4>{% verbatim %}@{{ follow.username }}{% endverbatim %}</h4>
                                                    <span class="pull-right">
                                                        <button  class="btn btn-danger btn-xs"  data-ng-click="eliminar(this.follow.id)">
                                                            <i class="icon-remove icon-only"></i>
                                                        </button>
                                                    </span>
                                                </span>
                                            </span>
                                        </li>
                                        <li data-ng-show="filtername.length==0 && follows.length>0" class="follows_intro">
                                            <span class="follows_body">
                                                <span class="follows_title">
                                                    <h2>{% trans 'No matches found!' %}</h2>
                                                </span>
                                                <span class="follows_content">
                                                    <p>{% trans 'We were unable to find a user that matches your query.' %}</p>
                                                </span>
                                            </span>
                                        </li>
                                        <li data-ng-show="filtername.length==0 && follows.length==0" class="follows_intro">
                                            <span class="follows_body">
                                                <span class="follows_title">
                                                    <h2>{% trans 'You are not following anyone' %}</h2>
                                                </span>
                                                <span class="follows_content">
                                                    <p>{% trans 'You are not following any user in Tribus. See if your friends are in Tribus by entering their names in the search bar on the top of the page.' %}</p>
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                    <span class="pull-right" data-ng-hide="filtername.length<=pageSize">
                                        <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1">
                                            {% trans 'Previous' %}
                                        </button>
                                        {% verbatim %}
                                        {{ currentPage+1 }}/{{ numberOfPages() }} 
                                        {{ filtername.length }}
                                        {% endverbatim %}
                                        <button data-ng-disabled="currentPage >= filtername.length/pageSize - 1" data-ng-click="currentPage= currentPage+1" >
                                            {% trans 'Next' %}
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </tab>
                        <tab>
                            <tab-heading>
                                <i class="icon-group"></i>
                                {% trans 'Followers' %}
                            </tab-heading>
                            <div data-ng-controller="FollowersController">
                                <div class="action_publisher">
                                    <form autocomplete="off" name="action_form">
                                        <div class="row-fluid">
                                            <span class="span6"></span>
                                            <span class="span6 action_body">
                                                <span class="action_bubble">
                                                    <input data-ng-model="followers_filter" id="id_followers_filter" name="followers_filter" class="action_input" placeholder="{% blocktrans %}Are you looking for someone?{% endblocktrans %}"></input>
                                                </span>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                                <div class="followers_list">
                                    <ul>
                                        <li class="row-fluid followers_item" data-ng-repeat="follow in followers | filter: followers_filter | startFrom: currentPage*pageSize | limitTo: pageSize">
                                            <span class="span1">
                                                <a href="/profile/{% verbatim %}{{ follow.username }}{%endverbatim %}">
                                                    <span class="followers_avatar" data-ng-style="{'background-image': 'url(\''+convertmd5(follow.email)+'\')'}"></span>
                                                </a>
                                            </span>
                                            <span class="span11 followers_body">
                                                <span class="followers_title">
                                                    <h3>
                                                        <a href="/profile/{% verbatim %}{{ follow.username }}{% endverbatim %}">
                                                            {% verbatim %}
                                                            {{ follow.first_name }} {{ follow.last_name }}
                                                            {% endverbatim %}
                                                        </a>
                                                    </h3>
                                                    <h4>{% verbatim %}@{{ follow.username }}{% endverbatim %}</h4>
                                                </span>
                                            </span>
                                        </li>
                                        <li data-ng-show="filtername.length==0 && followers.length>0" class="followers_intro">
                                            <span class="followers_body">
                                                <span class="followers_title">
                                                    <h2>{% trans 'No matches found!' %}</h2>
                                                </span>
                                                <span class="followers_content">
                                                    <p>{% trans 'We were unable to find a user that matches your query.' %}</p>
                                                </span>
                                            </span>
                                        </li>
                                        <li data-ng-show="filtername.length==0 && followers.length==0" class="followers_intro">
                                            <span class="followers_body">
                                                <span class="followers_title">
                                                    <h2>{% trans 'You have no followers!' %}</h2>
                                                </span>
                                                <span class="followers_content">
                                                    <p>{% trans 'You have no followers (yet). Start following people and write about you so that other people take interest in what you write.' %}</p>
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                    <span class="pull-right" data-ng-hide="filtername.length<=pageSize">
                                        <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1">
                                            {% trans 'Previous' %}
                                        </button>
                                        {% verbatim %}
                                        {{ currentPage+1 }}/{{ numberOfPages() }} 
                                        {{ filtername.length }}
                                        {% endverbatim %}
                                        <button data-ng-disabled="currentPage >= filtername.length/pageSize - 1" data-ng-click="currentPage= currentPage+1" >
                                            {% trans 'Next' %}
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
    {% if user.is_authenticated %}
    var user_id = '{{ user.id }}';
    var user_username = '{{ user.username }}';
    var user_first_name = '{{ user.first_name }}';
    var user_last_name = '{{ user.last_name }}';
    var user_email = '{{ user.email }}';
    var profile_gravatar = 'http://www.gravatar.com/avatar/'+md5(user_email)+'?d=mm&s=250&r=x';
    var user_gravatar = 'http://www.gravatar.com/avatar/'+md5(user_email)+'?d=mm&s=40&r=x';
    var comment_gravatar = 'http://www.gravatar.com/avatar/'+md5(user_email)+'?d=mm&s=30&r=x';
    {% endif %}

    var template_name = "profile";
    var userview_id = '{{ user_view.id }}';    
    var trib_limit_to = 0;
    var trib_offset = 0;
    var trib_add = 10;
    var trib_limit = 10;
    var trib_orderby = '-trib_pub_date';
    var controller_busy = false;

    var comment_limit_to = 0;
    var comment_offset = 0;
    var comment_add = 10;
    var comment_limit = 10;
    var comment_orderby = 'comment_pub_date';

    // Messages
    var trib_save_success = '{% trans "Your message has been published." %}';
    var trib_save_error = '{% trans "There has been an error publishing your message. Please try again later." %}';
    var trib_delete_success = '{% trans "Your message has been deleted." %}';
    var trib_delete_error = '{% trans "There has been an error deleting your message. Please try again later." %}'
    var trib_add_error = '{% trans "There has been an error consulting more messages. Please try again later." %}'
    var comment_save_success = '{% trans "Your comment has been published." %}';
    var comment_save_error = '{% trans "There has been an error publishng your comment. Please try again later." %}';
    var comment_delete_success = '{% trans "Your comment has been deleted." %}'
    var comment_delete_error = '{% trans "There has been an error deleting your comment. Please try again later." %}'

    var follows_limit_to = 0;
    var follows_offset = 0;
    var follows_add = 10;
    var follows_limit = 10;
    var follows_orderby = 'username';
</script>
{% endblock %}
