{% extends "base.html" %}
{% block content %}

<div class="max-w-[300px] sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl mx-auto mt-10 text-center dark:text-white px-4">

    <!-- Profile Image -->
    <div class="flex justify-center mb-6">
        {% if user.display_image %}
        <img src="{{ url_for('blog.upload', filename=user.display_image|replace('\\','/') ) }}"
             class="w-32 h-32 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600"
             alt="Profile Image">
        {% else %}
        <img src="{{ url_for('static', filename='default_profile.png') }}"
             class="w-32 h-32 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600"
             alt="Default Profile">
        {% endif %}
    </div>

    <!-- Username -->
    <h1 class="text-3xl font-bold mb-2">@{{ user.username }}</h1>

    <!-- Bio -->
    {% if user.bio %}
    <div class="prose dark:prose-invert mx-auto mb-10 mt-4 text-gray-700 dark:text-gray-200">
        {{ user.bio | safe }}
    </div>
    {% endif %}

    <!-- Posts Grid -->
    <h2 class="text-xl font-semibold mb-4">Latest Posts</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4 mb-20">

        {% for post in posts %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <a href="{{ url_for('blog.image_detail', image_id=post.id, image_name=post.slug) }}"
            class="relative block group">

                <img src="{{ url_for('blog.upload', filename=post.image_thumbnail|replace('\\','/')) }}"
                    class="w-full h-48 object-cover transition group-hover:opacity-80">

                <!-- Overlaid title -->
                <h5 class="absolute bottom-0 left-0 w-full text-white text-sm font-semibold px-1 py-2 
                            bg-gradient-to-t from-black/70 to-transparent">
                    {{ post.title }} - {{ post.short_description }}
                </h5>

            </a>
        </div>
        {% endfor %}

        {% if posts|length == 0 %}
        <p class="col-span-3 text-gray-500">No posts yet.</p>
        {% endif %}

    </div>


</div>

{% endblock %}