{% extends "base.html" %}
{% block title %}
Profiles {{obj_user.username}}
{% endblock title %}Profiles {{obj_user.username}}

{% block script %}
$( document ).ready(function() {
    loadTweetContainer("tweet-container")
});
{% endblock script %}

{% block content %}

<div class="row">
    <div class="col-sm-3 col-xs-12">
        <ul style="list-style:none;">
            <div class="profile-img-profile"><img src="{{ obj_user.profile.avatar.url }}" class="img-fluid" /></div>
            <li><h2 class='text-center'>{{obj_user.username}}</h2></li>
            {% if user != obj_user %}<li><h2 class='text-center'><a class="btn btn-link follow-btn" href="{% url 'profiles:follow' username=obj_user.username %}">{% if is_follow %}Unfollow{%else%}Follow{%endif%}</a></h2></li>{% endif %}
        </ul>
        <hr/>

        <ul class="follow-list">
        <li><h4>Following ({{ obj_user.profile.following.all.count }})</h4></li>
        {% for obj in obj_user.profile.following.all %}
            <li><a href="/{{ obj.username }}">{{ obj.username }}</a><br></li>
        {% empty %}
            <li><p>not followind any user</p><br></li>
        {% endfor %}
        </ul>

        <br>

        <ul class="follow-list">
        <li><h4>Followed By ({{ obj_user.followed_by.all.count }})</h4></li>
        {% for obj in obj_user.followed_by.all %}
            <li><a href="/{{ obj.user.username }}">{{ obj.user.username }}</a><br></li>
        {% empty %}
            <li><p>not followed by any user</p><br></li>
        {% endfor %}
        </ul>

    </div>
    <div class="col-sm-9 col-xs-12">
        <br>
        
        <div id="tweet-container"  data-url="/api/{{obj_user.username}}/tweets/">

        </div>
        <span id="loadmore">Load More ... </span>

        <br><br>
    </div>
</div>

{% endblock content %}