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

<div
    class="bg-[#d1d1d1] flex flex-col items-center mx-auto max-w-[90%] py-[65px] px-4 rounded-[10px] dark:bg-[#2a2a2a]">
    {% if user.is_authenticated %}
    <h1 class="text-[50px] text-[#343434] m-0 dark:text-[#e5e5e5]">Welcome to my blog, <span class="font-semibold">{{ user.username }}</span>!</h1>
    {% else %}
    <h1 class="text-[50px] text-[#343434] m-0 dark:text-[#e5e5e5]">Welcome to my blog!</h1>
    {% endif %}
    <a href="#"
        class="text-white bg-[#343434] rounded-[4px] w-1/5 text-[20px] py-[5px] mt-[20px] text-center no-underline hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
        Read more
    </a>
</div>

<div class="grid grid-cols-[2fr_1fr] gap-[20px] max-w-[90%] m-[40px] mx-auto">
    <section class="flex flex-col gap-[20px]">
        <h2 class="text-[25px] text-[#343434] font-bold m-0 dark:text-[#e5e5e5]">🌟 Latest Posts</h2>
        <article class="flex gap-[15px] bg-white p-[15px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <img src="{% static 'images/post1.jpeg' %}" 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 1</h2>
                <p class="mb-[10px] text-[#555] dark:text-[#cfcfcf]">Description...</p>
                <a href=""
                    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>

        <article class="flex gap-[15px] bg-white p-[15px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <img src="{% static 'images/post2.jpg' %}" 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 2</h2>
                <p class="mb-[10px] text-[#555] dark:text-[#cfcfcf]">Description...</p>
                <a href=""
                    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>

        <article class="flex gap-[15px] bg-white p-[15px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <img src="{% static 'images/post3.jpg' %}" 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 3</h2>
                <p class="mb-[10px] text-[#555] dark:text-[#cfcfcf]">Description...</p>
                <a href=""
                    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>

        <!--<section class="flex gap-[15px] bg-white p-[15px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <div class="flex flex-col">
                <h2 class="text-[1.2rem] font-semibold m-0 dark:text-[#e5e5e5]">People list</h2>
                <ul class="text-[#555] dark:text-[#cfcfcf]"">
                    {% for person in persons %}
                    <li>
                        <a href="{% url 'my_app:person' slug=person.slug % }">
                            {{ person.name }}, ({{ person.birth }})
                        </a>
                    </li>
                    {% empty %}
                    <p>No people found.</p>
                    {% endfor %}
                </ul>
            </div>
        </section> -->
    </section>

    <aside class="flex flex-col gap-[20px]">

        <div class="bg-white px-[15px] py-[20px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <h3 class="mb-[10px] font-semibold text-lg m-0 dark:bg-[#2a2a2a]">About me</h3>
            <img src="{% static 'images/autor.jpg' %}" alt="Author photo"
                class="w-[100px] h-[100px] rounded-full block mx-auto mb-[10px]">
            <p class="text-[#343434] text-left dark:text-[#cfcfcf]">Hey! I'm the author of this blog. Here I talk about
                technology, food,
                and animals.</p>
        </div>

        <div class="bg-white px-[15px] py-[20px] rounded-[10px] shadow dark:bg-[#2a2a2a]">
            <h3 class="mb-[10px] font-semibold text-lg m-0 dark:bg-[#2a2a2a]">Categories</h3>
            <ul class="flex flex-wrap gap-[10px] pl-0 list-none">
                <li
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[8px] hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    <a href="">Technology</a>
                </li>
                <li
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[8px] hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    <a href="">Food</a>
                </li>
                <li
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[8px] hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    <a href="">Animals</a>
                </li>
            </ul>
        </div>

        <div class="bg-white px-[15px] py-[20px] rounded-[10px] shadow dark:bg-[#2a2a2a]" id="categories">
            <h3 class="mb-[10px] font-semibold text-lg m-0">Popular posts</h3>
            <ul class="flex flex-wrap gap-[10px] pl-0 list-none ">
                <li
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[8px] hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    <a href="">How I got
                        started in programming.</a>
                </li>
                <li
                    class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[8px] hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                    <a href="">My 5 favorite
                        foods.</a>
                </li>
            </ul>
        </div>
    </aside>
</div>
{% endblock %}