{% extends 'main.html' %}

{% block head %}
{% if metadata.gallery %}
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            post_gallery = new Viewer(document.getElementById('article'), {
                'url': 'realsrc',
                'title': false
            });
        });
    </script>
{% endif %}
{% endblock %}

{% block content %}
<main>
    <section id="article">
        <h1>{{ metadata.title}} </h1>
        <p>{{ metadata.date | human_date }}</p>
        <hr />
        {{post|safe}}
    </section>
</main>
<section id="comments">
    <h2>{{comments | length}} Comment{% if comments | length != 1 %}s{% endif %}</h2>
    {% for comment in comments %}
    <div class="comment">
        <strong>{{ comment[0] }} - {{ comment[2] | human_date }}</strong>
        <p>{{ comment[1] }}</p>
    </div>
    {% endfor %}
    <h3>Leave a comment</h3>
    {% if request.args.get('comment') is none %}
        <form action="./{{metadata.id}}/comment" method="post">
            <input type="text", name="name" placeholder="Name" required>
            <textarea name="comment" placeholder="Comment" required></textarea>
            <input type="submit" value="Submit">
        </form>
    {% else %}
        <p>Thank you! Your comment will appear once it is approved</p>
    {% endif %}
</section>
{% endblock %}