{% set financeApproved = 0 %}
{% if isFinanceApproved == true %}
    {% set financeApproved = 1 %}
{% endif %}
<header class="header-sticky">
    <input type="hidden" id="is_finance_approved" value="{{ financeApproved }}">
    <div class="row">
        <div class="col-12 col-sm-4 d-none d-sm-flex py-3 bg-light-green"></div>
        <div class="col-12 col-sm-4 text-dark-green bg-light-green text-center py-3">
            Veterinary Supplier in Dubai | UAE
        </div>
        <div class="col-12 col-sm-4 text-dark-green bg-light-green text-center text-sm-end pb-3 py-sm-3">
            {% if app.user is not null %}
                <div class="pe-3">
                    Hello {{ nzo_decrypt(app.user.firstName)|lower|capitalize|default('') }}
                </div>
            {% endif %}
        </div>
    </div>
    {% set hidden = 'hidden' %}
    {% if infoBar or isFinanceApproved == false %}
        {% set hidden = '' %}
    {% endif %}
    <div class="row {{ hidden }}" id="info_bar">
        <div class="col-12 bg-warning py-3 text-center" id="info_copy">
            <span id="info_string">{{ infoCopy|raw }}</span>
        </div>
    </div>
    <nav class="main-header navbar navbar-expand-lg navbar-text-primary bg-white" style="margin-left: 0 !important;">
        <div class="container-fluid">
            <!-- Left elements -->
            <div class="d-flex">
                <!-- Brand -->
                <a
                    class="navbar-brand mx-2 ms-3 mb-1 d-flex align-items-center"
                    href="/home"
                    data-action="click->home-page#onClickHomePage"
                >
                    <picture>
                        <source srcset="{{ asset('images/tvg.png')|imagine_filter('item_thumb_webp') }}" type="image/webp">
                        <source srcset="{{ asset('images/tvg.png')|imagine_filter('item_thumb_png') }}" type="image/png">
                        <source srcset="{{ asset('images/tvg.png')|imagine_filter('item_thumb_jpg') }}" type="image/jpeg">
                        <img
                            src="{{ asset('images/tvg.png')|imagine_filter('item_thumb_png') }}"
                            id="nav_logo"
                            alt="The Veterinary Group"
                            class="img-fluid"
                            style="max-height: 100px"
                        >
                    </picture>
                </a>
            </div>

            <!-- Right navbar links -->
            <ul class="navbar-nav list-group list-group-horizontal d-flex d-lg-none">
                <!-- Messages Dropdown Menu -->
                <li class="nav-item mx-2">
                    <a
                        class="nav-link text-dark-blue"
                        href="#"
                        data-action="click->items#onClickSearchBtn"
                    >
                        <h4  class="top-nav-icons"><i class="fal fa-search text-primary"></i></h4>
                    </a>
                </li>
                <li class="nav-item dropdown mx-2">
                    <a
                        class="nav-link dropdown-toggle text-dark-blue"
                        href="#"
                        role="button"
                        data-action="click->home-page#onClickToggleDropdown"
                    >
                        <h4 class="top-nav-icons"><i class="fal fa-user text-primary"></i></h4>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end dd-list">

                        {% if app.user is not null and app.user.entity is defined %}
                            <li><a class="dropdown-item" href="#" data-action="click->my-profile#onClickGetMyProfile">My Profile</a></li>
                            <li><a class="dropdown-item" href="#" data-page-id="1" data-action="click->orders#onClickGetOrders">My Orders</a></li>
                            <li><a class="dropdown-item" href="#" data-entity-id="{{ app.user.entity.id }}" data-action="click->entity-users#onClickGetList">Users</a></li>
                            <li><a class="dropdown-item" href="{{ path('entity_logout') }}">Sign Out</a></li>
                        {% else %}
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="{{ path('entity_login') }}"
                                >
                                    Sign In
                                </a>
                            </li>
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="#"
                                    data-action="click->entity-users#onClickGetRegister"
                                >
                                    Register
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </li>
                <li class="nav-item mx-2 basket_icon hidden">
                    {% set count = basketItems|default(0) %}
                    <a
                        class="nav-link text-dark-blue"
                        href="#"
                        data-action="click->baskets#onClickGetBasket"
                    >
                        <h4 class="top-nav-icons position-relative">
                            <i class="fal fa-shopping-basket text-primary"></i>
                            <span
                                class="badge rounded-pill text-bg-success position-absolute"
                                style="font-size: 10px; top: -8px; right: -8px"
                                data-basket-items="{{ count|default(0) }}"
                        >
                                {{ count|default(0) }}
                            </span>
                        </h4>
                    </a>
                </li>
            </ul>
            <button class="navbar-toggler text-primary float-end" type="button" data-bs-toggle="collapse" data-bs-target="#center_nav" aria-controls="center_nav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="far fa-bars"></i>
            </button>
            {# Center nav links #}
            <div class="collapse navbar-collapse justify-content-md-center" id="center_nav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-3 mx-md-0">
                        <a
                            class="text-primary nav-link"
                            href="/home"
                            data-action="click->home-page#onClickHomePage"
                        >
                            <span class="site-nav__label">Home</span>
                        </a>
                    </li>
                    {% for page in pages %}
                        <li class="nav-item mx-3 mx-md-0">
                            <a
                                href="/page/{{ page.id }}/{{ page.title|lower|replace({' ':'-'}) }}"
                                class="text-primary nav-link"
                                data-page-id="{{ page.id }}"
                                data-action="click->pages#onClickGetPage"
                            >
                                <span class="site-nav__label">{{ page.title|lower|uc_words }}</span>
                            </a>
                        </li>
                    {% endfor %}
                    <li class="nav-item mx-3 mx-md-0">
                        <a
                            href="/our-brands"
                            class="text-primary nav-link"
                            data-action="click->brands#onclickGetBrandPartners"
                        >
                            <span class="site-nav__label">Brand Partners</span>
                        </a>
                    </li>
                    <li class="nav-item mx-3 mx-md-0">
                        <a
                            href="/blogs"
                            class="text-primary nav-link"
                            data-filter="all"
                            data-page-id="1"
                            data-action="click->blogs#onClickGetBlogs"
                        >
                            <span class="site-nav__label">News | Articles</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mx-3 mx-md-0">
                        <a
                            href="#"
                            class="text-primary nav-link dropdown-toggle"
                            role="button"
                            data-action="click->home-page#onClickToggleDropdown"
                        >
                            <span class="site-nav__label">Order Online</span>
                        </a>
                        <ul class="dropdown-menu dropdown mb-2">
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="/items/search/top-sellers"
                                    data-is-clearance="false"
                                    data-is-brand="true"
                                    data-brand-name="top sellers"
                                    data-is-top-sellers="true"
                                    data-action="click->items#onClickShopOnline"
                                >
                                    Top Sellers
                                </a>
                            </li>
                            {% for brand in brands %}
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="{{ '/items/search/'~ brand.apiName|lower|replace({' ':'-'}) }}/1"
                                        data-is-discount="false"
                                        data-is-clearance="false"
                                        data-is-brand="true"
                                        data-brand-name="{{ brand.apiName }}"
                                        data-is-top-sellers="false"
                                        data-action="click->items#onClickShopOnline"
                                    >
                                        {{ brand.name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                    {% if app.user is not null and app.user.entity is defined %}
                        <li class="nav-item mx-3 mx-md-0">
                            <a
                                href=""
                                class="nav-link"
                            >
                                <label
                                    role="button"
                                    class="badge badge-secondary pt-1 bg-dark-green align-middle d-inline"
                                    data-action="click->baskets#onClickGetSmartOrder"
                                >
                                    <span class="align-middle fw-normal">SMARTorder</span>
                                </label>
                            </a>
                        </li>
                    {% endif %}
                    <li class="nav-item dropdown mx-3 mx-md-0">
                        <a
                            href="#"
                            class="text-primary nav-link dropdown-toggle"
                            role="button"
                            data-action="click->home-page#onClickToggleDropdown"
                        >
                            <span class="site-nav__label">Deals & Offers</span>
                        </a>
                        <ul class="dropdown-menu dropdown mb-2">
                            <li>
                                <a
                                    href="/items/search/top-sellers"
                                    class="dropdown-item"
                                    data-is-discount="false"
                                    data-is-clearance="true"
                                    data-is-brand="false"
                                    data-brand-id=""
                                    data-action="click->items#onClickClearance"
                                >
                                    Clearance
                                </a>
                            </li>
                            <li>
                                <a
                                    href="/items/search/top-sellers"
                                    class="dropdown-item"
                                    data-is-discount="true"
                                    data-is-clearance="false"
                                    data-is-brand="false"
                                    data-brand-id=""
                                    data-action="click->items#onClickDiscounts"
                                >
                                    Current Promotions
                                </a>
                            </li>
                        </ul>
                    </li>
                    {% if careers|length > 0 %}
                        <li class="nav-item dropdown mx-2">
                            <a
                                class="nav-link dropdown-toggle text-dark-blue"
                                href="#"
                                role="button"
                                data-action="click->home-page#onClickToggleDropdown"
                            >
                                Careers
                            </a>
                            <ul class="dropdown-menu dropdown-menu-start">
                                {% for career in careers %}
                                    <li>
                                        <a
                                            class="dropdown-item"
                                            href="{{ career.url }}"
                                            target="_blank"
                                        >
                                            {{ career.jobTitle }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% endif %}
                </ul>
                <ul class="navbar-nav list-group list-group-horizontal d-none d-md-flex">
                    <!-- Messages Dropdown Menu -->
                    <li class="nav-item mx-2 position-relative">
                        <input
                            type="text"
                            name="search"
                            id="search"
                            class="form-control search-input pe-25"
                            placeholder="Search"
                            data-action="keyup->items#onKeyUpSearchField"
                        >
                        <span
                            class="search-cancel search_action"
                            role="button"
                            data-action="click->items#onClickSearch"
                        >
                            <i class="far fa-search"></i>
                        </span>
                        <div class="hidden_msg" id="error_search">
                            Please enter a search
                        </div>
                    </li>
                    <li class="nav-item dropdown mx-2">
                        <a
                            class="nav-link dropdown-toggle text-dark-blue"
                            href="#"
                            role="button"
                            data-action="click->home-page#onClickToggleDropdown"
                        >
                            <h4 class="top-nav-icons"><i class="fal fa-user text-primary"></i></h4>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">

                            {% if app.user is not null and app.user.entity is defined %}
                                <li><a class="dropdown-item" href="#" data-action="click->my-profile#onClickGetMyProfile">My Profile</a></li>
                                <li><a class="dropdown-item" href="#" data-page-id="1" data-action="click->orders#onClickGetOrders">My Orders</a></li>
                                <li><a class="dropdown-item" href="#" data-entity-id="{{ app.user.entity.id }}" data-action="click->entity-users#onClickGetList">Users</a></li>
                                <li><a class="dropdown-item" href="{{ path('entity_logout') }}">Sign Out</a></li>
                            {% else %}
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="{{ path('entity_login') }}"
                                    >
                                        Sign In
                                    </a>
                                </li>
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="#"
                                        data-action="click->entity-users#onClickGetRegister"
                                    >
                                        Register
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </li>
                    <li class="nav-item mx-2 basket_icon hidden">
                        {% set count = basketItems|default(0) %}
                        <a
                            class="nav-link text-dark-blue"
                            href="#"
                            data-action="click->baskets#onClickGetBasket"
                        >
                            <h4 class="top-nav-icons position-relative">
                                <i class="fal fa-shopping-basket text-primary"></i>
                                <span
                                    class="badge rounded-pill text-bg-success position-absolute"
                                    style="font-size: 10px; top: -8px; right: -8px"
                                    data-basket-items="{{ count|default(0) }}"
                                >
                                    {{ count|default(0) }}
                                </span>
                            </h4>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="hidden w-100 px-3" id="mobile_search">
            <div class="position-relative w-100">
                <input
                    type="text"
                    name="search"
                    class="form-control search-input pe-25"
                    placeholder="Search"
                    data-is-clearance="false"
                    data-action="keyup->items#onKeyUpSearchField"
                >
                <span
                    class="search-cancel search_action"
                    role="button"
                    data-action="click->items#onClickSearch"
            >
                    <i class="far fa-search"></i>
                </span>
            </div>
        </div>
    </nav>
</header>