{% extends "base.html" %}
{% load static %}
{% block title %}
Posts
{% endblock %}

{% block content %}
<div class="bg-[#d1d1d1] flex flex-col items-center mx-auto max-w-[90%] py-[15px] rounded-[10px] dark:bg-[#2a2a2a]">
    <h1 class="text-[50px] text-[#343434] m-0 dark:text-[#e5e5e5]">Posts</h1>
</div>

<div class="max-w-[90%] mx-auto m-[40px]">
    <section class="flex flex-col gap-[20px]">
        {% for post in posts %}
        <article class="flex gap-[15px] bg-white p-[15px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <img src="{{ post.image.url }}" alt="Post image" class="w-[150px] h-[150px] object-cover rounded-[8px]">
            <div class="flex flex-col">
                <h2 class="text-[1.2rem] font-semibold m-0 dark:text-[#e5e5e5]">{{ post.title }}</h2>
                <p class="mb-[10px] text-[#555] dark:text-[#cfcfcf]">{{ post.description }}</p>
                <a href="{% url 'posts:post_detail' slug=post.slug %}"
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[5px] mt-auto self-start no-underline hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    Read more
                </a>
            </div>
        </article>
        {% empty %}
        <p class="text-[25px] text-[#343434] font-bold m-0 dark:text-[#e5e5e5] text-center">No posts yet.</p>
        {% endfor %}
    </section>
</div>
{% endblock %}