{% extends "base.html" %}

{% load static %}

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

{% block content %}

<img src="{% static 'media/' %}{{ post.image_url }}"/>

<div class="padding">

  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="contentbody">
    {{ post.body }}
  </p>
  <div class="info">
    {{ post.date }} - {{ post.author.username }}
  </div>
  <br/>

  <form action="{% url 'news:comment' post.id %}" method="post">
    {% csrf_token %}
    <p>Add comment</p>
    <p>
      <textarea name="body" rows="8" cols="80"></textarea>
    </p>
    <input type="submit" value="Submit">
  </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/>
  {% for comment in comments %}
    <p>
    {% for n in comment.level %}<ul>{% endfor %}

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

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

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

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

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

      </p>

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

</div>

{% endfor %}

{% endblock content %}
