{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2>Create New Post</h2>
    <form method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <div class="form-group">
            {{ form.category_id.label }}<br>
            {{ form.category_id(class="form-control") }}
        </div>
        <div class="form-group">
            {{ form.post_name.label }}<br>
            {{ form.post_name(class="form-control") }}
        </div>
        <div class="form-group">
            {{ form.created_by.label }}<br>
            {{ form.created_by(class="form-control") }}
        </div>
        <div class="form-group">
            {{ form.text.label }}<br>
            {{ form.text(class="form-control") }}
        </div>
        <div class="form-group">
            {{ form.media.label }}<br>
            {{ form.media(class="form-control-file") }}
        </div>
        <button type="submit" class="btn btn-primary">Create Post</button>
    </form>

    <hr>

    <h3>Comments</h3>
    {% if comments %}
    <ul class="list-group">
        {% for comment in comments %}
        <li class="list-group-item">
            <strong>{{ comment.created_by }}</strong>: {{ comment.text }}
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>No comments yet. Be the first to comment!</p>
    {% endif %}

    {% if g.user %}
    <form method="POST">
        <div class="form-group">
            <label for="comment">Leave a comment:</label>
            <textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    {% else %}
    <p>Log in to leave a comment.</p>
    {% endif %}
</div>
{% endblock %}