{% load core_tags %}

<div class="hidden md:block">

    {% if TopHeader.content %}
    {% for block in TopHeader.content %}
    {% if block.block_type == 'row' %}
    <div class="bg-[{{block.value.bgColor}}] text-[{{block.value.fgColor}}] text-2xl md:text-sm px-4 ">
        <div class="flex w-full justify-between">

            {% for block in block.value.content %}
            {% for block in block.value %}
            <div class="{% if not block.value.show_in_mobile %} block {% endif %}">
                {% if block.block_type == 'company' %}
                <div>
                    {% if block.value.ciType == 'Contact' %}
                    <a href="tel:+{% for val in block.value.ciBody %}{{val}}{% endfor %}"
                        class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {{val}}
                        {% endfor %}
                    </a>
                    {% elif block.value.ciType == 'Web' %}
                    <a href="{% for val in block.value.ciBody %}{{val}}{% endfor %}"
                        class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {{val}}
                        {% endfor %}
                    </a>
                    {% elif block.value.ciType == 'Email' %}
                    <a href="#" class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {% if val.block_type == 'text' %}
                        {{val}}
                        {% endif %}
                        {% endfor %}
                    </a>
                    {% else %}
                    {{block.value.ciType}}
                    {% endif %}
                </div>

                {% elif block.block_type == 'social' %}
                <div class="inline-flex gap-2 mx-4 mt-0.5">

                    {% for block in block.value %}
                    <a href="{{block.value.soUrl}}" class="hover:text-[{{block.value.hoverFgColor}}]"
                        aria-label="{{block.value.soTitle}}">

                        {{block.value.soLogoText|safe}}
                    </a>
                    {% endfor %}
                </div>
                {% elif block.block_type == 'show_news' %}
                <div>
                    {% get_TopNews as TopNews %}
                    <marquee behavior="" direction="Left" loop="" scrollamount="5" class="mt-0.5">
                        <div class="flex gap-8">
                            {% for news in TopNews %}
                            <a href="{{news.url}}"
                                class="flex items-center gap-2 hover:text-[{{block.value.hoverFgColor}}]">
                                {% if news.cat.icon %}
                                <span class="text-xl">
                                    {{news.cat.icon|safe}}
                                </span>
                                {% endif %}
                                {{news.title}}
                            </a>
                            {% endfor %}
                        </div>
                    </marquee>
                </div>
                {% else %}
                {{block.block_type}}
                {% endif %}
            </div>
            {% endfor %}
            {% endfor %}
        </div>

    </div>
    {% else %}
    {{block.block_type}}
    {% endif %}
    {% endfor %}
    {% endif %}
</div>


<div class="block md:hidden">
    {% get_mobile_top_header as mobHeader %}


    {% if mobHeader.content %}
    {% for block in mobHeader.content %}
    {% if block.block_type == 'row' %}
    <div class="bg-[{{block.value.bgColor}}] text-[{{block.value.fgColor}}] {{mobHeader.size}} px-4 ">
        <div class="flex w-full items-center justify-between">
            {% for block in block.value.content %}
            {% for block in block.value %}
            <div class="flex items-center">
                {% if block.block_type == 'company' %}
                <div>
                    {% if block.value.ciType == 'Contact' %}
                    <a href="tel:+{% for val in block.value.ciBody %}{{val}}{% endfor %}"
                        class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {{val}}
                        {% endfor %}
                    </a>
                    {% elif block.value.ciType == 'Web' %}
                    <a href="{% for val in block.value.ciBody %}{{val}}{% endfor %}"
                        class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {{val}}
                        {% endfor %}
                    </a>
                    {% elif block.value.ciType == 'Email' %}
                    <a href="#" class="hover:text-[{{block.value.hoverFgColor}}]">
                        {{block.value.ciLogoText|safe}}
                        {% for val in block.value.ciBody %}
                        {% if val.block_type == 'text' %}
                        {{val}}
                        {% endif %}
                        {% endfor %}
                    </a>
                    {% elif block.value.ciType == 'Logo' %}
                    <a href="/">
                        <img src="{{block.value.ciLogo.file.url}}" alt="{{block.value.ciLogo.title}}" class="w-full">
                    </a>
                    {% else %}
                    {{block.value.ciType}}
                    {% endif %}
                </div>

                {% elif block.block_type == 'social' %}
                <div class="inline-flex gap-2 mx-4 mt-0.5">

                    {% for block in block.value %}
                    <a href="{{block.value.soUrl}}" class="hover:text-[{{block.value.hoverFgColor}}]"
                        aria-label="{{block.value.soTitle}}">

                        {{block.value.soLogoText|safe}}
                    </a>
                    {% endfor %}
                </div>
                {% elif block.block_type == 'show_search' %}
                <div>
                    <button class="" onclick="openModal('modelConfirmSearch')">
                        &#128269;
                    </button>

                    <div id="modelConfirmSearch"
                        class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full">
                        <div class="relative top-10 mx-auto shadow-xl rounded-md bg-second max-w-5xl">

                            <div class="flex justify-end p-2">
                                <button onclick="closeModal('modelConfirmSearch')" type="button"
                                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </button>
                            </div>
                            <div id="search" class="-mt-6">
                                <form method="get" action="/search/" class="pb-8 pt-4 flex w-full justify-center"
                                    role="search">
                                    <div class="flex w-full justify-center items-center ml-2 md:ml-0">

                                        <input name="q" type="search"
                                            class="text-black w-full md:w-[70%] rounded-xl py-3 md:py-6 pl-4 pr-12 text-xl"
                                            id="keyword" placeholder="Search your product ..." aria-label="Search">

                                        <button type="submit"
                                            class="bg-main text-white rounded-xl text-xl px-4 py-2 -ml-12 md:-ml-16">
                                            &#128269;
                                        </button>
                                    </div>

                                </form>
                            </div>

                        </div>
                    </div>
                </div>
                {% elif block.block_type == 'show_login' %}
                {% include 'components/common/login.html' %}
                {% elif block.block_type == 'show_news' %}
                <div>
                    {% get_TopNews as TopNews %}
                    <marquee behavior="" direction="Left" loop="" scrollamount="5" class="mt-0.5">
                        <div class="flex gap-8">
                            {% for news in TopNews %}
                            <a href="{{news.url}}"
                                class="flex items-center gap-2 hover:text-[{{block.value.hoverFgColor}}]">
                                {% if news.cat.icon %}
                                <span class="text-xl">
                                    {{news.cat.icon|safe}}
                                </span>
                                {% endif %}
                                {{news.title}}
                            </a>
                            {% endfor %}
                        </div>
                    </marquee>
                </div>
                {% else %}
                {{block.block_type}}
                {% endif %}
            </div>
            {% endfor %}
            {% endfor %}
        </div>

    </div>
    {% else %}
    {{block.block_type}}
    {% endif %}
    {% endfor %}
    {% endif %}

</div>