{% extends 'Layout/tutorial_list_layout.html' %}
{% load wagtailimages_tags %}

{% block content %}

<div class="container mx-auto mb-20 sm:mb-32 mt-4">

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 md:gap-10 grid-flow-row">
        {% for post in posts %}
        <div class="post-item border border-gray-200 rounded-2xl h-full">
            <a href="{{post.url}}" class="group">
                <div class="rounded-ss-2xl rounded-se-2xl overflow-hidden">
                    <img src="{{post.specific.search_image.file.url}}" alt="{{post.specific.search_image.title}}"
                        class="aspect-[3/2] object-cover w-full max-h-64 scale-100 group-hover:scale-110 transition-all duration-500" />
                </div>
                <div class="px-4 sm:px-6 my-4">
                    <div class="flex items-center gap-x-3 mb-2">
                        {% for tag in post.specific.tags.all %}
                        <div class="bg-[{{tag.bgColor}}] text-[{{tag.fgColor}}] px-2 py-0.5 rounded-md text-sm">
                            <span class=" svelte-17r4rrf">{{tag.name}}</span>
                        </div>
                        {% endfor %}
                        <div class="text-gray-700 text-sm">{{post.first_published_at|date:"d M, Y"}}</div>
                    </div>
                    <h4 class="text-lg font-semibold mb-2 line-clamp-1">{{post.specific.customTitle|safe}}</h4>
                    <p class="text-gray-600 mb-2 text-sm line-clamp-2">
                        {% if post.shortDesc %}
                        {{post.shortDesc|safe}}
                        {% else %}
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aut temporibus, maiores fugit,
                        illum nulla eligendi deleniti praesentium id qui quis, consequuntur incidunt? Laborum architecto
                        numquam ducimus placeat dignissimos quis.
                        {% endif %}
                    </p>
                </div>
            </a>
        </div>
        {% endfor %}


    </div>
    <br/>

    {% include 'components/common/paging.html' %}
</div>

</div>
{% endblock content %}