<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{ title }}</title>
  <base href="{{ base }}"/>
  {% if description %}
    <meta name="description" content="{{ description }}"/>
  {% endif %}
  {% if keywords %}
    <meta name="keywords" content="{{ keywords }}"/>
  {% endif %}
  <script src="{{ jquery }}" type="text/javascript"></script>
  <link href="{{ bootstrap }}" type="text/css" rel="stylesheet" media="screen"/>
  <link href="{{ bootstrapmin }}" type="text/css" rel="stylesheet" media="screen"/>
  <link href="{{ icons }}" type="text/css" rel="stylesheet"/>
  <link href="catalog/view/stylesheet/font-awesome2/css/all.min.css" type="text/css" rel="stylesheet"/>
  <link href="catalog/view/stylesheet/font-awesome2/css/all.css" type="text/css" rel="stylesheet"/>
  <link href="{{ stylesheet }}" type="text/css" rel="stylesheet"/>
  {% if direction == 'rtl' %}
  <link href="{{ rtl }}" type="text/css" rel="stylesheet"/>
  {% endif %}
  <link href="{{ temporaryvariables }}" type="text/css" rel="stylesheet"/>
  <link href="{{ basecss }}" type="text/css" rel="stylesheet"/>
  <link href="{{ owlcss }}" type="text/css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment-with-locales.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/daterangepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/magnific/magnific-popup.css" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="catalog/view/javascript/jquery/datetimepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
  <script src="catalog/view/javascript/common.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/theme.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/support.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/owl.carousel.min.js" type="text/javascript"></script>
  <link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon">
<link rel="icon" href="/image/favicon.ico" type="image/x-icon">
  {% for style in styles %}
    <link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}"/>
  {% endfor %}
  {% for script in scripts %}
    <script src="{{ script.href }}" type="text/javascript"></script>
  {% endfor %}
  {% for link in links %}
    <link href="{{ link.href }}" rel="{{ link.rel }}"/>
  {% endfor %}
  {% for analytic in analytics %}
    {{ analytic }}
  {% endfor %}
</head>
<body>

<div id="alert" class="position-fixed top-0 end-0"></div>
<header id="header" class="{{ ishome }}">

<div class="header-account">
  <p>Free Shipping for orders over <span>300</span> AED</p>

  <div class="sparrow-small"><img src="https://sparrow.gcc-demo.com//catalog/view/image/sparrowTop.svg" /></div>
        <div class="user-info">
          <ul>
                  {% if not logged %}
                    <li><a href="{{ login }}" class="dropdown-item">{{ text_login }}</a></li>
                    <li><a href="{{ register }}" class="dropdown-item">{{ text_register }}</a></li>
                  {% else %}
                    <li><a href="{{ account }}" class="dropdown-item">{{ text_account }}</a></li>
                    {# <li><a href="{{ order }}" class="dropdown-item">{{ text_order }}</a></li> #}
                    {# <li><a href="{{ wishlist }}" class="dropdown-item" id="wishlist-total" title="{{ text_wishlist }}">{{ text_wishlist }}</a></li> #}
                    {# <li><a href="{{ transaction }}" class="dropdown-item">{{ text_transaction }}</a></li> #}
                    {# <li><a href="{{ download }}" class="dropdown-item">{{ text_download }}</a></li> #}
                    <li><a href="{{ logout }}" class="dropdown-item">{{ text_logout }}</a></li>
                  {% endif %}
                </ul>

                <div class="user-thumb"><img src="https://sparrow.gcc-demo.com//catalog/view/image/user.svg" /></div>

        </div>
</div>

  <div id="menu_wrapper"></div>
   <div class="header_bottom">
      <div class="container">
        <div class="row">
          <div id="_mobile_right-nav"></div>
        </div>
      </div>
    </div>
  <div class="header-top-height">
    <div class="header-bottom">
        <div class="container">
          <div class="row">
            <div class="mobile-width-left col-sm-4 col-4 col-xs-4"> 
              <div id="menu-icon" class="menu-icon hidden-md hidden-lg">
                <div class="nav-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <symbol id="menu" viewBox="0 0 750 750"><title>menu</title>
                        <path d="M12.03,84.212h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
                        C5.39,60.152,0,65.541,0,72.182C0,78.823,5.39,84.212,12.03,84.212z"></path>
                        <path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
                            S379.58,180.455,372.939,180.455z"></path>
                        <path d="M372.939,300.758H12.03c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h360.909
                        c6.641,0,12.03-5.39,12.03-12.03C384.97,306.147,379.58,300.758,372.939,300.758z"></path>
                    </symbol>
                  </svg>
                  <svg class="icon" viewBox="0 0 30 30"><use xlink:href="#menu" x="22%" y="28%"></use></svg>
                </div>
              </div>
              <div id="_mobile_seach_widget"></div>
            </div>
            <div id="_mobile_logo" class="desktop-logo col-xs-4 col-sm-4 col-md-4 col-lg-3 col-xl-3 col-4"></div>
            <div class="mobile-width-right col-sm-4 col-4 col-xs-4 ">
              <div id="_mobile_cart"></div>
              <div id="_mobile_link_menu"></div>
            </div>
          </div>
        </div>
      </div>
    <div class="header-top">
      <div class="container">
        <div class="row">
          <div id="_desktop_logo" class="col-xs-3 col-sm-3 col-md-6 col-lg-3 col-xl-3">
            <div class="desktop_logo">
              <div id="logo">
                {% if logo %}
                  <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/></a>
                {% else %}
                  <h1><a href="{{ home }}">{{ name }}</a></h1>
                {% endif %}
              </div>
            </div>
          </div>
          <div class="header-nav col-xs-3 col-sm-3 col-md-4 col-lg-6 col-xl-6">
            {{ header_after }} 
        </div>

          
          <div class="desktop-custominfo col-sm-6 col-md-3 col-lg-3 col-xl-3">
           <div class="d-flex justify-content-end"> 
          <div class="wishlist"><a href="{{ wishlist }}" class="dropdown-item" id="wishlist-total" title="{{ text_wishlist }}"><img src="https://sparrow.gcc-demo.com//catalog/view/image/wishlist.svg" />  <span>{{ text_wishlist }}</span> </a></div>
            <div id="_desktop_cart">
              <div id="header-cart">
              <div class="blockcart">
                {{ cart }}
                <div id="cart_wrapper"></div>
              </div>
            </div>
            </div>
            </div>
          </div>   
        </div>
      </div>
    </div>
  </div>

  <div class="header_before">
    {{ header_before }} 
  </div>
  <div class="hdr-btm">
  <div class="container">
  <div class="row position-relative">
  <div class="col-xs-12 col-sm-3 col-md-4 col-lg-3">
    {{ menu }}
  </div>

  <div class="searchbar col-xs-12 col-sm-9 col-md-8 col-lg-9 d-lg-inline-block d-none">
  <div id="_desktop_seach_widget">
    <div id="ishisearch_widget" class="search-widget dropdown">
      <div class="search-logo dropdown-toggle d-inline-block d-lg-none" data-bs-toggle="dropdown" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">   
          <symbol id="magnifying-desktop" viewBox="0 0 1200 1200"><title>magnifying-desktop</title>
            <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0
                  C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586
                  l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8
                  c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407
                  S377.82,467.8,257.493,467.8z"></path>
            </symbol>
        </svg>
        <svg class="icon" viewBox="0 0 40 40"><use xlink:href="#magnifying-desktop" x="20%" y="26%"></use></svg>
      </div>
      <form class="dropdown-menu">{{ search }}</form>
    </div>
  </div>
</div>
</div> 
</div> 
</div>
</header>
<div id="mobile_top_menu_wrapper" class="hidden-lg hidden-md" style="display:none;">
    <div id="top_menu_closer">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15px" height="15px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">  <image id="image0" width="16" height="16" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAQAAADlauupAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
      AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZ
      cwAAAGAAAABgAPBrQs8AAAAHdElNRQfmBQUKKyJdcBQmAAAAk0lEQVQ4y2NgoAZQ2n38uMoke3ti
      1Sv/d3BQWnD+PMIARRsbZf8XL5ReODkR0qw4ydZWWePlS+UiR0dUVxBhCE7NxBiipGhjg1czukJk
      Q7CJEW0IyZqRQ1pZ4+VLZY2XL5X/OzjgUsdEkqnEAoq8QFEg4lNIMJ0Qk5BwWkBKUsZqiNLpc+fw
      RRU6UJlkb4+SmSgBAPl3bzbjMveUAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTA1LTA1VDEwOjQz
      OjM0KzAwOjAw2j712QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0wNS0wNVQxMDo0MzozNCswMDow
      MKtjTWUAAAAASUVORK5CYII="></image>
      </svg>
    </div>
    <div class="js-top-menu mobile" id="_mobile_top_menu">
    </div>
    <div id="_mobile_header" class="left-nav"></div>
</div>
<script> 
function quickbox(){
  if ($(window).width() > 767) {
    $('.quickview-button').magnificPopup({
    type:'iframe',
    delegate: 'a',
    preloader: true,
    tLoading: 'Loading image #%curr%...',
    });    
  }  
}
jQuery(document).ready(function() {quickbox();});
jQuery(window).resize(function() {quickbox();});
$( "input[name=\'search\']" ).keyup(function( event ) {
  $('input[name=\'search\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=product/search|autocomplete&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(result) {
          var products = result.products;
          $('.ajaxishi-search ul li').remove();
            $.each(products, function(index,product) {
            var html = '<li>';
              html += '<div>';
              html += '<a href="' + product.url + '" title="' + product.name + '">';
              html += '<div class="product-image"><img alt="' + product.name + '" src="' + product.image + '"></div>';
              html += '<div class="product-desc">';
              html += '<div class="product-name">' + product.name + '</div>';
              if (product.special) {
                              html += '<div class="product-price"><span class="special">' + product.price + '</span><span class="price">' + product.special + '</span></div>';
                          } else {
                              html += '<div class="product-price"><span class="price">' + product.price + '</span></div>';
              }
              html += '</div>';
              html += '</a>';
              html += '</div>';
              html += '</li>';
              $('.ajaxishi-search ul').append(html);
            });
            $('.ajaxishi-search').css('display','block');
                  return false;
        }
      });
    },
    'select': function(product) {
      $('input[name=\'filter_name\']').val(product.name);
    }
  });
});
</script>
