{% load i18n %}
<div data-ng-controller="TribController" data-ng-init="addOldTribs();pollNewTribs()">
    <div class="alert-placeholder">
        <span data-alert data-ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
            {% verbatim %}{{ alert.msg }}{% endverbatim %}
        </span>
    </div>
    <div data-ng-show="template_name == 'dashboard' || template_name == 'profile'" class="action_publisher">
        <form autocomplete="off" name="action_form" data-ng-submit="createNewTrib()">
            <div class="row-fluid">
                <span class="span1">
                    <span class="action_avatar" data-ng-style="{'background-image': 'url(\''+user_gravatar+'\')'}"></span>
                </span>
                <span class="span9 action_body">
                    <span class="arrow_left"></span>
                    <span class="action_bubble">
                        <textarea data-ng-model="trib_content" id="id_trib_content" name="trib_content" class="action_textarea" cols="40" rows="2" placeholder="{% blocktrans %}What are you doing?{% endblocktrans %}"></textarea>
                        <span class="action_validation"></span>
                    </span>
                </span>
                <span class="span2">
                    <button class="btn btn-success action_button" disabled="disabled">
                        <span class="icon-pencil"></span>
                        {% trans 'Publish' %}
                    </button>
                </span>
            </div>
        </form>
    </div>
    <div class="trib_list" infinite-scroll="addOldTribs()" infinite-scroll-disabled="controller_busy" infinite-scroll-distance="0">
        <ul>
            <li data-ng-show="tribs.length == 0 && template_name == 'dashboard'" class="trib_intro">
                <span class="trib_body">
                    <span class="trib_title">
                        <h2>{% trans 'Welcome to Tribus!' %}</h2>
                    </span>
                    <span class="trib_content">
                        <p>{% trans 'This is the dashboard, a place where you can follow the updates of your favorite projects and partners.' %}</p>
                        <p>{% blocktrans %}Start by looking for your friends in the search bar on the top of the screen. Then, click on the Follow button in your friend's profile to start following their updates in your dashboard.{% endblocktrans %}</p>
                        <p>{% trans 'You can always come back here by clicking on the Tribus logo.' %}</p>
                    </span>
                </span>
            </li>
            <li data-ng-show="tribs.length == 0 && template_name == 'profile'" class="trib_intro">
                <span class="trib_body">
                    <span class="trib_content">
                        <p>{% blocktrans %}Hi {{ user_from_template }}, this is your profile.{% endblocktrans %}</p>
                        <p>{% blocktrans %}Start by writing something on your wall.{% endblocktrans %}</p>
                    </span>
                </span>
            </li>
            <li data-ng-show="tribs.length == 0 && template_name == 'profileView'" class="trib_intro">
                <span class="trib_body">
                    <span class="trib_content">
                        <p>{% blocktrans %}This is the profile of {{ user_from_template }}.{% endblocktrans %}</p>
                        <p>{% blocktrans %}{{ user_from_template }} has not written anything yet.{% endblocktrans %}</p>
                    </span>
                </span>
            </li>
            <li data-ng-show="tribs.length > 0" id="{% verbatim %}{{ trib.id }}{% endverbatim %}" class="row-fluid trib_item" data-ng-repeat="trib in tribs | orderBy: trib_orderby | limitTo: trib_limit_to track by trib.id">
                <span class="span2">
                    <span class="trib_avatar" data-ng-style="{'background-image': 'url(\''+trib.author_gravatar+'\')'}"></span>
                </span>
                <span class="arrow_left"></span>
                <span class="span10 trib_body">
                    <span class="trib_title">
                        <h3>
                            <a href="/profile/{% verbatim %}{{ trib.author_username }}{% endverbatim %}">
                                {% verbatim %}
                                {{ trib.author_first_name }} {{ trib.author_last_name }}
                                {% endverbatim %}
                            </a>
                        </h3>
                        <h4>{% verbatim %}@{{ trib.author_username }}{% endverbatim %}</h4>
                        <h4 class="pull-right" data-am-time-ago="trib.trib_pub_date"></h4>
                    </span>
                    <span class="trib_content" ng-bind-html="trib.trib_content"></span>
                    <span class="trib_interact">
                        <span class="pull-right" data-ng-click="toggleComments()">
                            <a href=""><span class="icon-chevron-down"></span>{% trans 'Comment' %}</a>
                        </span>
                        <span data-ng-if="trib.author_id == {{ user.id }}" data-ng-click="showDeleteModal()">
                            <a href=""><span class="icon-trash"></span>{% trans 'Delete' %}</a>
                        </span>
                    </span>
                    <span class="trib_reply">
                        <span class="comment_list" data-ng-controller="CommentController" data-ng-if="trib.coments_show" data-ng-init="this.trib_id = trib.id;addOldComments();">
                            <ul>
                                <li data-ng-if="comments.length > 0 && !comments_end" class="row-fluid comment_item">
                                    <button class="btn btn-beige btn-block btn-mini" data-ng-click="addOldComments()">
                                        {% trans 'Load more comments' %}
                                    </button>
                                </li>
                                <li id="{% verbatim %}{{ comment.id }}{% endverbatim %}" class="row-fluid comment_item" data-ng-repeat="comment in comments | orderBy: comment_orderby | limitTo: comment_limit_to track by comment.id">
                                    <span class="span1">
                                        <span class="comment_avatar" data-ng-style="{'background-image': 'url(\''+comment.author_gravatar+'\')'}"></span>
                                    </span>
                                    <span class="span11 comment_body">
                                        <span class="comment_text">
                                            <h3>
                                                <a href="/profile/{% verbatim %}{{ comment.author_username }}{% endverbatim %}">
                                                    {% verbatim %}
                                                    {{ comment.author_first_name }} {{ comment.author_last_name }}
                                                    {% endverbatim %}
                                                </a>
                                            </h3>
                                            <span data-ng-bind-html="comment.comment_content"></span>
                                        </span>
                                        <span data-ng-if="comment.author_id == {{ user.id }}" class="close"
                                        data-ng-click="showDeleteModal()">
                                            <span class="icon-remove"></span>
                                        </span>
                                        <span class="comment_date">
                                            <h4 data-am-time-ago="comment.comment_pub_date"></h4>
                                        </span>
                                    </span>
                                </li>
                                <li class="comment_box">
                                    <form data-ng-submit="createNewComment()">
                                        <div class="row-fluid">
                                            <span class="span1">
                                                <span class="comment_avatar" data-ng-style="{'background-image': 'url(\''+comment_gravatar+'\')'}"></span>
                                            </span>
                                            <span class="span9 comment_body">
                                                <span class="arrow_left"></span>
                                                <span class="comment_bubble">
                                                    <textarea data-ng-model="comment_content" id="id_comment_content" name="comment_content" class="comment_textarea" cols="40" rows="1" placeholder="{% blocktrans %}What do you want to say?{% endblocktrans %}"></textarea>
                                                    <span class="comment_validation"></span>
                                                </span>
                                            </span>
                                            <span class="span2">
                                                <button class="btn btn-success btn-xs comment_button" disabled="disabled">
                                                    {% trans 'Comment' %}
                                                </button>
                                            </span>
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </span>
                    </span>
                </span>
            </li>
        </ul>
    </div>
    <script type="text/ng-template" id="delete_modal_template.html">
        <div class="modal-body">
            <button type="button" class="close" data-ng-click="cancel()">
                <span class="icon-remove"></span>
            </button>
            <h4>{% trans 'Are you sure you want to delete this message?' %}</h4>
        </div>
        <div class="modal-footer">
            <button class="btn" data-ng-click="cancel()">
                {% trans 'Cancel' %}
            </button>
            <button class="btn btn-success" data-ng-click="ok()">
                {% trans 'Delete message' %}
            </button>
        </div>
    </script>
</div>