{% extends 'base.html' %}
{% load static %}
{% load cms_tags core_tags %}
{% load wagtailmetadata_tags %}

<!-- Head -->
{% block meta_tags %}
{% meta_tags %}
{% endblock meta_tags %}

{% block style %}

{% endblock style %}

{% block content %}

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

    <div class="flex justify-between items-center mb-4">
        <p class="text-[16px] text-left">
            <a href="/" aria-label="Home">
                <i class='bx bxs-home'></i>
            </a>
            <span>
                >
            </span>
            <span class="opacity-70">
                {% if page.menuName %}
                {{page.menuName}}
                {% else %}
                {{page.title}}
                {% endif %}
            </span>
        </p>

    </div>



    <div id="list_view">
        <div class="w-full">

            {% for news in posts %}
            <div class="border rounded-lg px-4 pt-4 mb-4">

                <div class="flex w-full gap-6">
                    <img src="{{news.specific.search_image.file.url}}" alt="{{news.title}}"
                        class="rounded-lg w-[280px] h-[190px]">
                    <div>
                        <div class="flex items-center gap-6 text-[12px]">
                            {% if news.specific.show_author %}

                            <h2 class="flex items-center gap-1"><i class='bx bxs-user'></i>
                                <b>{{news.owner}}</b>
                            </h2>
                            {% endif %}
                            <h2 class="opacity-70 flex items-center gap-1"><i class='bx bx-calendar'></i>
                                {{news.first_published_at|date:"d M,Y"}}</h2>
                            <h2 class="opacity-70 flex items-center gap-1">
                                <i class='bx bx-stopwatch'></i> {{news.specific.readTime}} minutes
                            </h2>
                        </div>

                        <a href="{{news.url}}">
                            <h1 class="text-[18px] line-clamp-2 font-bold ">{{news.title}}</h1>
                        </a>
                        {% if news.specific.cat %}
                        <span
                            class="px-1 font-bold cursor-pointer rounded py-0.5 text-xs bg-[{{news.specific.cat.bgColor}}] text-[{{news.specific.cat.fgColor}}] hover:bg-[{{news.specific.cat.hoverBgColor}}] hover:text-[{{news.specific.cat.hoverFgColor}}]">
                            {{news.specific.cat}}
                        </span>
                        {% endif %}
                        <div class="line-clamp-3 text-[14px] opacity-70 pb-1">
                            {{news.specific.shortDesc|safe}}
                        </div>
                        <div class="flex w-full items-center justify-between">
                            <a href="{{news.url}}"
                                class="bg-blue-600 px-4 py-2 rounded font-bold text-[12px] text-white flex items-center gap-1">Read
                                More <i class='bx bx-chevrons-right'></i></a>
                        </div>

                    </div>

                </div>
                <div class="flex justify-end text-[9px] text-blue-600 mt-4">

                    {% if news.specific.srcTitle and news.specific.srcURL %}
                    <a href="{{news.specific.srcURL}}" target="_blank" class="">
                        Source {{news.specific.srcTitle}}
                    </a>
                    {% endif %}
                </div>
            </div>

            {% endfor %}

        </div>
    </div>


    {% include 'components/common/paging.html' %}

    </section>

    {% endblock content %}

    {% block script %}

    {% endblock script %}