{% extends 'base.html' %}
{% load static %}
{% load helpers %}

{% block head %}
<script type="module" src="{% static 'scripts/comments.js' %}" defer></script>
{% endblock head %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <menu>
        <li><strong><a href="{% url 'core:topic-list' %}">Topics</a></strong></li>
        <span>›</span>
        <li><a href="{% url 'core:topic-detail' post.topic.pk %}">{{ post.topic.name }}</a></li>
    </menu>
</div>
{% endblock breadcrumbs %}

{% block content %}
<article class="post">
    <header class="post__header">
        <div>
            <h1>{{ post.title }}</h1>
            <p>
                <a href="{% url 'account-detail' post.author.pk %}" class="post__author">{{ post.author }}</a> » <time>{{ post.created_at }}</time>
            </p>
        </div>
        {% if request.user == post.author %}
        <div>
            <a href="{% url 'core:post-update' post.topic.pk post.pk %}" class="action-button">Edit</a>
            <a href="{% url 'core:post-delete' post.topic.pk post.pk %}" class="action-button">Delete</a>
        </div>
        {% endif %}
    </header>
    <section class="post__content">
        {{ post.content|markdown|safe }}
    </section>
    <section class="comments detail__comments">
        <h3>Discussion</h3>

        <div class="comments__list">
        {% for comment in post.comments.all %}
        {% include 'core/comment_detail.html' with comment=comment %}
        {% endfor %}
        </div>

        <div class="comments__form">
            <h3>Add a comment</h3>
            <form action="{% url 'core:comment-create' %}" method="POST">
                {% csrf_token %}
                {{ comment_create_form.as_p }}
                <input class="action-button" type="submit" value="Post comment">
            </form>
        </div>
    </section>
</article>
{% endblock %}
