{% extends 'base.html' %}

{% load static %}
{% load cms_tags %}

{% block meta_tags %}
<meta property="og:title" content="{{page.seo_title}}" />
<!-- <meta property="og:type" content="website" /> -->
<meta property="og:url" content="{{page.get_full_url}}" />
<meta property="og:image"
    content="{% if page.catImage %}{{page.catImage.file.url}}{% else %}{{page.prImage.file.url}}{% endif %}" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:description" content="{{page.search_description}}" />
{% endblock meta_tags %}

{% block style %}

{% endblock style %}

{% block breadcrumb %}


<section class="sticky top-16 z-40 bg-white">

    <div class="bg-main flex justify-center text-center uppercase text-2xl md:text-5xl py-10 oswald" id="page_banner"
        style="transition: 0.5s;">
        {{page.title}}
    </div>
    <div class="md:container mx-auto py-1 ">
        <nav class="hidden md:block bg-main px-4 rounded w-fit">

            <ol class="flex items-center gap-2 text-[10px] sm:text-sm md:text-lg">
                <a href="/">

                    <i class='bx bxs-home'></i>
                </a>
                {% for p in page.breadcrumb_list %}
                {% if p.show_in_menus %}
                <li class="hover:font-bold">
                    <a href="{{p.url}}" class="flex items-center">
                        {% if p.catMenu %}
                        {{p.catMenu}}
                        {% else %}
                        {{p.title}}
                        {% endif %} /
                    </a>
                </li>
                {% endif %}
                {% endfor %}

                <li aria-current="page">
                    {% if page.catMenu %}
                    {{page.catMenu}}
                    {% else %}
                    {{page.title}}
                    {% endif %}
                </li>

            </ol>


        </nav>
        <nav class="block md:hidden bg-main px-4 rounded w-fit">

            <ol class="flex items-center flex-wrap gap-2  text-[16px]">
                <a href="/">

                    <i class='bx bxs-home'></i>
                </a>

                {% for p in page.mobile_breadcrumb_list %}
                {% if p.show_in_menus %}
                <li class="hover:font-bold">
                    <a href="{{p.url}}" class="flex items-center">
                        / {% if p.catMenu %}
                        {{p.catMenu}}
                        {% else %}
                        {{p.title}}
                        {% endif %}
                    </a>
                </li>
                {% endif %}
                {% endfor %}

                <li aria-current="page">
                    / {% if page.catMenu %}
                    {{page.catMenu}}
                    {% else %}
                    {{page.title}}
                    {% endif %}
                </li>

            </ol>



        </nav>
    </div>
</section>

{% endblock breadcrumb %}

{% block content %}

{% endblock content %}

{% block footer %}
{% include 'components/footer.html' %}

{% endblock footer %}


{% block script %}

{% endblock script %}