{% extends 'Layout/news_layout.html' %}


{% block content %}
Searching
<div class=" sticky top-14 z-40">
    <div class="bg-main flex justify-center items-center text-3xl md:text-4xl py-10 oswald" id="page_banner"
        style="transition: 0.5s;">
        Search Result : {{title}}
    </div>
    <nav class="hidden md:block border-t border-b py-1 bg-main ">
        <ol class="md:container mx-auto flex items-center gap-2 text-[10px] sm:text-sm md:text-lg">
            <i class='bx bxs-home'></i>

            <li aria-current="page">
                / Search
            </li>

        </ol>
    </nav>
</div>

<main>

    <section class="pb-20 pt-10 bg-slat-50 ">
        <div class="container mx-auto">
            <div
                class="flex  {% if searchCatList or searchProdList %}flex-wrap {% endif %} justify-center items-center gap-4">
                {% if searchCatList %}
                {% for cat in searchCatList %}
                {% include 'components/categoryTile.html' %}

                {% endfor %}
                {% elif searchProdList %}
                {% for prod in searchProdList %}
                {% include 'components/categoryTile.html' with cat=prod %}


                {% endfor %}
                {% else %}
                <div>
                    <div class="flex w-full flex-wrap justify-center gap-10">

                        {% if logo.ciLogo %}

                        <img src="{{logo.ciLogo.file.url}}" alt="{{logo.ciLogo.title}}" />
                        {% else %}
                        <div class="h-16 flex items-center">

                            <h1 class="text-4xl text-white">Tricom</h1>
                        </div>
                        {% endif %}
                    </div>


                    <p class="text-red-600 text-[1.5rem] md:text-6xl text-center py-4 leading-16">Incorrect Input :
                        <u>

                            {{title}}
                        </u>

                        <br /> 
                    </p>
                    <p class="text-red-600 text-[1.5rem] md:text-6xl text-center py-4 leading-16">
                        Please search again
                    </p>



                </div>
                {% endif %}
            </div>
        </div>
    </section>

</main>

{% endblock content %}