{% extends 'base.html' %}
{% block page_content %}
    <!-- Dashboard page -->
    {% if posts %}
        <!-- Display a heading if there are posts -->
        <h2>Published Posts</h2>
    {% else %}
        <!-- Display a heading if there are NO posts -->
        <h2>No published posts yet.</h2>
    {% endif %}

    <section id="dashboard">

        <!-- Display a div with information about each post (if any) -->
        {% for post in posts %}
            <!-- first post -->
            <div class="post">
                <!-- post image -->
                <img src="{{ post.image_url }}" alt="{{ post.title }} img"/>
                <!-- post title -->
                <h3 class="title">{{ post.title }}</h3>
                <!-- post content -->
                <p class="description">{{ post.content|truncatewords:3 }}</p>
                <!-- post details button -->
                <a class="details-btn" href="{% url 'details-post' post_id=post.pk %}">See More</a>
            </div>
        {% endfor %}
    </section>

{% endblock %}