{% extends "templates/base.html" %}

{% block head %}
    <link rel="stylesheet" href="../static/css/form.css">
{% endblock %}

{% block main_content %}
    <h1><a href="/users/{{post.user.name}}" class="user-{{post.user.perms}}">{{post.user.name}}</a> posted in <a href="/boards/{{post.board.name}}" class="board-name">/{{post.board.name}}/</a></h1>
    <h4>posted at <span class="time">{{post.created_at}}</span></h4>
    {% if post.reference and post.reference.show %}
        <h4>ref post: <a href="/posts/{{post.reference.id}}">{{post.reference.short_content}}</a></h4>
    {% endif %}
    {% if post.attachments %}
        <h4>{{post.attachments|length}} attachments</h4>
        <div class="attachments">
            {% for attachment in post.attachments %}
                {% if attachment.type == "image" %}
                    <a href="{{attachment.url}}"><img src="{{attachment.url}}" alt="{{attachment.file_name}}" width="350px"></a>
                {% elif attachment.type == "video" %}
                    <video width="350px" controls>
                        <source src="{{attachment.url}}" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                {% elif attachment.type == "audio" %}
                    <audio controls>
                        <source src="{{attachment.url}}" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                {% else %}
                    <a href="{{attachment.url}}">{{attachment.file_name}}</a>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    <p>{{post.content}}</p>
    <h6>
        {% if session.name == "SYSTEM" %}
            <a href="/delete/post/{{ post.id }}">Delete</a>
        {% elif session.name == post.user.name %}
            <a href="/delete/post/{{ post.id }}">Delete</a>
        {% endif %}
    </h6>
    {% if session.user_id %}
        <br>
        <h3>Reply to this post</h3>
        <form action="/post" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="board_id" value="{{ post.board.id }}">
            <input type="hidden" name="reference" value="{{ post.id }}">
            <input type="hidden" name="type" value="comment">
            <textarea name="content" placeholder="Content" required></textarea>
            <input type="file" name="attachments" multiple>
            <button type="submit">Post</button>
        </form>
    {% endif %}
    <br>
    <h1>{{ post.replies }} Replies</h1>
    <ul class="post-list">
        {% for post in replies %}
            <li>
                {% include "templates/post.html" %}
            </li>
        {% endfor %}
    </ul>
    {% if total_pages > 0 %}
        <div id="nav">
            <h5>Page {{ page }} of {{ total_pages }}</h5>
            {% if page > 1 %}
                <h5><a href="/posts/{{ post.id }}?page={{ page - 1 }}">Previous Page</a></h5>
            {% endif %}
            {% if replies|length == 10 %}
                <h5><a href="/posts/{{ post.id }}?page={{ page + 1 }}">Next Page</a></h5>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}