{% extends "base_generic.html" %}
{% load static %}
{% load tz %}
{% block meta %}
<meta id="_token" content="{{ csrf_token }}">
{% endblock %}

{% get_current_timezone as TIME_ZONE %}
{% block headbar %}
{{ request.user.shown_name }} (<a href="/user/{{ request.user.username}}">My timeline</a>) - <a href="/account/config">Configs</a> - <a href="/account/logout">Log out</a>
{% endblock %}

{% block content %}
<div id="intro"><div id="intro-shown-name">{{user_shown_name}}</div><div id="intro-id-name">{{username}}</div>
{% if username == request.user.username %}
My account<br>
{% endif %}
{% if username != request.user.username %}
{% if following_status == "unfollowed" %}<button value="send-following-request" id="follow-user-button">Follow</button><br>{% endif %}
{% if following_status == "undecided" %}<button value="cancel-following-request" id="follow-user-button">Cancel Following Request</button><br>{% endif %}
{% if following_status == "yes" %}<button value="unfollow" id="follow-user-button">Unfollow</button><br>{% endif %}

{% endif %}
Following: <span class="fo-number">{{user_following_number}}</span> Follower: <span class="fo-number">{{user_follower_number}}</span></div>

  <div id="public_timeline">
    <div id="new_post_notifier" value=""></div>
    <div id="latest_time" style="display: block;">{{latest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>

    {% for post in viewed_timeline_list %}

  <div id="post-{{post.id}}" class="post"><a href="/user/{{post.poster}}">{{post.poster.shown_name}}</a>
    at <a href="/post/{{post.id}}" class="post-time">{{post.post_time|date:"Y-m-d H:i:s.u"}}+0000</a><br/>
    {{post.text|linebreaksbr}}<br/>
    <span id="reply-{{post.id}}" value="{{post.id}}" class="reply">↩️</span>
    - <span id="repost-{{post.id}}" value="{{post.id}}" class="repost">🔁</span> 
    - <span id="fav-{{post.id}}" value="{{post.id}}" class="fav">⭐</span>
</div>
  {% endfor %}
  <div id="previous_post_loader">More posts</div>
  <div id="oldest_time" style="display: block;">{{oldest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>

  </div>


  <script type="text/javascript" src="{% static 'timeline.js' %}">



</script>
{% endblock %}