{% extends 'base.html' %}

{% block content %}
<script>
    function openNav() {
        console.log("hello run started")
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
            console.log("run loop")
            coll[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        }
    } </script>
{% if post.parent != 0 %}
<a href="{{url_for('post', post_id=post.parent)}}"> Previous</a>
<hr>
{% endif %}
<h2>{{ post.title }}</h2>
<p>{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</p>

<div class="container">
    <div class="userbox">
        <p> Authour: <a href="{{url_for('details', light=post.authour.name)}}"> {{post.authour.name}} </a></p>
    </div>
    <div class="post-content">{{ post.content|markdown|safe }}</div>
</div>
<div class="post-actions">
    <a href="{{ url_for('create', reply=post.id)}}"> Reply</a> ~
    <a href="{{ url_for('index') }}">Back to posts</a>
</div>
<button type="button" class="collapsible" onclick="openNav()">Navigation</button>
<div class="content">
    <hr>
    <h3>Previously to this </h3>
    <ul>
        <li> {% for p in previous %} <a href="{{ url_for('post', post_id=p.id) }}">{{ p.title }}</a> - {{
            p.created_at.strftime('%Y-%m-%d') }}</li> {% endfor %}
    </ul>
    <hr>
    <h3> Replies to this</h3>
    <div class="post-replies">
        <ul>
            <li> {% for reply in replies %} <a href="{{ url_for('post', post_id=reply.id) }}">{{ reply.title }}</a> - {{
                reply.created_at.strftime('%Y-%m-%d') }}</li> {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}