{% extends "base.html" %}

{% load static %}

{% block title %}My amazing blog{% endblock %}

{% block content %}

<div class="post_padding">

  {% if post.style == 1 %}
  <div class="quote">
  {% endif %}
  {% if post.style != 2 %}
    <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  {% endif %}
  {% if post.style == 1 %}
  </div>
  {% endif %}

  <div class="postintro">
    {{ post.date }} - {{ post.author.username }}
  </div>
</div>

{% if post.style != 1 %}
<img src="{% static 'media/' %}{{ post.image_url }}"/>
{% endif %}

<div class="post_padding">

{% if post.style == 0 %}
  <p class="contentbody">
    {{ post.body }}
  </p>
{% endif %}
  <br/>

  <form action="{% url 'news:comment' post.id %}" method="post">
    {% csrf_token %}
    <p>Add comment</p>
    <p>
      <textarea name="body" rows="3" cols="50"></textarea>
    </p>
    <button class="primary_button" type="submit">Submit</button>
  </form>

  <script type="text/javascript">
    function myFunction(divID) {
    var x = document.getElementById(divID);
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
  </script>

  <br/>

  <!-- Comments -->
  {% for comment in comments %}
    {% for n in comment.level %}<ul>{% endfor %}

      <span class="info">{{ comment.author.username }} - {{ comment.date }} - score: {{ comment.score }}</span>
      <br/>
      {{ comment.body }}

      <div>
        {% if comment.upvoted == False %}
        <form action="{% url 'news:upvote' comment.id %}" method="post" class="inline">
          {% csrf_token %}
          <button class="primary_button" type="submit">+1</button>
        </form>
        {% endif %}

        {% if comment.is_deletable %}
        <form action="{% url 'news:delete_comment' comment.id %}" method="post" class="inline">
          {% csrf_token %}
          <button class="secondary_button" type="submit">delete</button>
        </form>
        {% endif %}

        <button class="secondary_button inline" onclick="myFunction('div_{{ comment.id }}')">reply</button>

        <div id="div_{{ comment.id }}" class="inline reply_form" style="display:none">
          <form action="{% url 'news:comment_with_parent' post.id comment.id %}" method="post">
            {% csrf_token %}
            <textarea name="body" rows="3" cols="50"></textarea>
            <button class="primary_button" type="submit">Submit</button>
          </form>
        </div>

      </div>

    {% for n in comment.level %}</ul>{% endfor %}

{% endfor %}

</div>

{% endblock content %}
