{%extends 'base.html'%}
{%load static%}
{%block extracss%}
<link rel="stylesheet" href="{% static 'Community/css/post_details.css' %}">
{%endblock extracss%}
{%block content%}
<div class="page-container">
<div id="title">{{object.title}}
<div class='icons'>
    {% if user == object.author %}
    <a href="{% url 'edit_post' pk=object.id %}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
</svg></a>
<a href="{% url 'delete_post' pk=object.id %}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
  <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg></a>
    {% endif %}
    </div>
</div>
<div id="container" class="rounded">
    <div class="post">
    <div class="title-content">
        <p id="content">{{object.content|safe}}</p>
    </div>
    <div class="author">
        <p id="author">{{object.author}}</p>
    </div>
    </div>
    {%if user.is_authenticated%}
    <div id="add_comment">
    <form method="POST" id="comment_form">
    {%csrf_token%}
    {{form}}
    <input type="submit" class='btn btn-primary' id="submit" value="Add comment">
    </form>
    </div>
    {%endif%}
    <div class="comments">
        {%for comment in object.sorted_comments%}
            <div class="single-comment">
            <p id="comment-content">{{comment.content}}</p>
            <div class="date_author">
            <p id="comment-date">{{comment.date_added}}</p>
            <p id="comment-author">{{comment.author}}</p>
            <p>
            {% if user == comment.author %}
            <a href="{% url 'delete_comment' pk=comment.id%}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
            <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
            </svg></a>
            {%endif%}
            </p>
            </div>
    </div>            
        {%endfor%}
    </div>
    </div>
</div>
<script>
window.addEventListener('resize', function() {
      var CommentElement = document.getElementById('comment_form');
      var windowWidth = window.innerWidth;

      if (windowWidth <= 550) {
        CommentElement.style.flexWrap = "wrap";
        CommentElement.style.justifyContent = 'center';
      }
      else{
        CommentElement.style.flexWrap = "nowrap";
        CommentElement.style.justifyContent = 'space-between';
}
})

var textarea = document.getElementById("id_content")
textarea.classList.add("rounded")
textarea.placeholder ="Add comment"

</script>
{%endblock content%}

{# DODAC PRZYCISKI DO EDITA I DELETE #}