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

{% block content %}

<!-- <section class="pb-20 md:pt-4 bg-slat-50 px-1 "> -->
<section class="container mx-auto mb-20 sm:mb-32 mt-4">

    {% if title %}
    <h1 class="text-xl font-bold text-center -mt-8 mb-1 capitalize">{{title}} News</h1>
    {% endif %}
    <div class="block md:hidden">
        {% if filterObj %}
        {% include 'components/News/MobTile.html' with content=filterObj %}
        {% else %}
        {% include 'components/News/MobTile.html' with content=posts %}
        {% endif %}
    </div>
    <div class="hidden md:block lg:flex w-full">

        <div class="w-full lg:w-[75%] hidden md:block">
            {% if filterObj %}
            {% include 'components/News/DeskTile.html' with content=filterObj %}
            {% else %}
            {% include 'components/News/DeskTile.html' with content=posts %}
            {% endif %}
        </div>
        <div class="w-full lg:w-[25%] pl-2 text-sm ">
            {% if trends %}
            <div class="shadow-xl border rounded-xl p-2">

                <h1 class="text-md font-bold uppercase bg-gray-900 bg-opacity-90 text-center text-white">Trending
                    News</h1>

                {% for rp in trends %}
                <div class="flex items-center gap-4 my-1 border-b rounded-b-xl border-gray-700 px-1">
                    {% image_url rp.search_image "fill-60x70|jpegquality-90" as img %}
                    <img src="{{img}}" alt="{{rp.title}}" />

                    <h1>
                        {{rp.title}}
                    </h1>

                </div>
                {% endfor %}

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

</section>
{% endblock content %}