{% 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 %}
<form method="POST" id="posting-form">
    {% csrf_token %}
    <div class="posting-form-group">
      <label>Post</label>

      <textarea id="post_text" name="post_text" placeholder="What do you want to post?"
      maxlength="500" style="resize: none;"  oninput="auto_expand(this)"></textarea>
    </div>

    {% csrf_token %} 

    <label for="privilege">Privileges:</label>

    <select name="privilege" id="privil_choosing">
      <option value="public" selected>Public Timeline</option>
      <option value="unpublic">Not in Public Timeline</option>
      <option value="private">Private</option>
    </select> 

    <button id="submit_post"  type="button" class="btn">Post!</button>
  </form>

  <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 public_post in public_timeline_list %}

  <div id="post-{{public_post.id}}" class="post"><a href="/user/{{public_post.poster}}">{{public_post.poster.shown_name}}</a>
    at <a href="/post/{{public_post.id}}" class="post-time">{{public_post.post_time|date:"Y-m-d H:i:s.u"}}+0000</a><br/>
    {{public_post.text|linebreaksbr}}<br/>
    <span id="reply-{{public_post.id}}" value="{{public_post.id}}" class="reply">↩️</span>
    - <span id="repost-{{public_post.id}}" value="{{public_post.id}}" class="repost">🔁</span> 
    - <span id="fav-{{public_post.id}}" value="{{public_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 %}