{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Blog Posts | {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block description %}
    Explore a collection of blog posts by various authors on {% env 'PROJECT_NAME' %}. Stay informed, inspired, and engaged with the latest updates!
{% endblock description %}
{% block keywords %}
    blog posts, {% env 'PROJECT_NAME' %}, authors, latest updates, blogging, community, articles
{% endblock keywords %}
{% block og_title %}
    Explore Blog Posts on {% env 'PROJECT_NAME' %}
{% endblock og_title %}
{% block og_description %}
    Dive into a variety of blog posts on {% env 'PROJECT_NAME' %}. From insightful articles to engaging stories, there's something for everyone!
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <h1 class="text-3xl text-gray-800 text-center mb-5">Blog Posts</h1>
    <ul class="grid gap-4 p-8 list-none justify-items-center grid-cols-[repeat(auto-fill,minmax(220px,1fr))]">
        {% for post in posts %}
            <a href="{% url 'post_detail' slug=post.slug %}">
                <div class="p-3 border border-gray-300 rounded bg-white shadow-lg text-center transition-transform duration-200 ease-in-out hover:scale-105">
                    <p class="text-blue-500 font-bold">{{ post.title }} by {{ post.author }}</p>
                    {% if post.image %}
                        <img src="{{ post.image.url }}"
                             alt="{{ post.title }}"
                             width="208"
                             height="208"
                             class="w-52 h-52 rounded mb-2">
                    {% endif %}
                </div>
            </a>
        {% empty %}
            <p class="text-center text-gray-500">No posts available.</p>
        {% endfor %}
    </ul>
    <a href="{% url 'post_form' %}"
       class="fixed bottom-12 left-52 px-4 py-2 bg-red-600 text-white rounded font-bold inline-flex items-center shadow-lg transition-transform duration-300 ease-in-out hover:scale-110 hover:text-red-600 z-50">
        <i class="fas fa-plus mr-2"></i> New Blog
    </a>
{% endblock content %}