<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<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="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico&amp;subset=latin-ext,vietnamese" rel="stylesheet"> 
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> 
<!-- image hover effect-->
<link href="catalog/view/javascript/hover-effect-image/main.css" rel="stylesheet">
<!-- image hover effect end-->
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
{% 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 }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<!-- product zoom start -->
<script src="catalog/view/javascript/zoom/jquery.elevatezoom.js" type="text/javascript"></script>
<!-- product zoom end -->
<!-- Sb Theme Custom javascript Start -->
<script src="catalog/view/javascript/sb-theme/sb-theme-custom.js" type="text/javascript"></script>
<!-- Sb Theme Custom javascript End -->
<!-- animation javascript Start -->
<script src="catalog/view/javascript/animation/custom.js" type="text/javascript"></script>
<link href="catalog/view/javascript/animation/animate.min.css" rel="stylesheet">
<!-- animation javascript End -->
<!--counter start -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<!-- counter end -->
 <!--RTL start -->
     {% if direction == 'rtl' %}
     <link href="catalog/view/theme/default/stylesheet/rtl.css" rel="stylesheet">
     {% endif %}
        <!-- RTL END-->
<!--lightbox -->
    <!--    <script src="catalog/view/javascript/inspire/blog/lightbox-2.6.min.js" type="text/javascript"></script>
       <link href="catalog/view/javascript/inspire/blog/lightbox.css" rel="stylesheet" type="text/css" /> -->
<!--lightbox End-->
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<nav id="top">
  <div class="container">
    <p class="pull-left hidden-xs  sb-theme-free-ship"><i class="fa fa-gift" aria-hidden="true"></i> Free Shipping On First Order & get special 5% discount</p>
    {{ currency }}
    {{ language }}
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
       <!--  <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li> -->
       <li class="dropdown my-account"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <i class="fa fa-angle-down" aria-hidden="true"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}"><i class="fa fa-address-book-o" aria-hidden="true"></i> {{ text_account }}</a></li>
            <li><a href="{{ order }}"><i class="fa fa-history" aria-hidden="true"></i> {{ text_order }}</a></li>
            <li><a href="{{ transaction }}"><i class="fa fa-retweet" aria-hidden="true"></i> {{ text_transaction }}</a></li>
            <li><a href="{{ download }}"><i class="fa fa-download" aria-hidden="true"></i> {{ text_download }}</a></li>
            <li><a href="{{ logout }}"><i class="fa fa-sign-out" aria-hidden="true"></i> {{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}"><i class="fa fa-address-book-o" aria-hidden="true"></i> {{ text_register }}</a></li>
            <li><a href="{{ login }}"><i class="fa fa-sign-in" aria-hidden="true"></i> {{ text_login }}</a></li>
            {% endif %}
          </ul>
        </li>
        <li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
        <!-- <li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li> -->
        <!-- <li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li> -->
      </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container cmn-h-pd">
    <div class="row">
      <div class="col-sm-3 col-xs-7 t-logo">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-6 col-xs-12 t-search cntct-services">
      	<div class="col-md-6 col-xs-12 col-sm-6 sb-theme-p-0 t-services ">           
            <div class="shipping-inner"> <i class="fa fa-dollar"></i>
              <div class="content">
                <h3>Guatantee Services</h3>
                <span>10 year's Free Warranty & Service</span> 
              </div>
            </div>            
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6 sb-theme-p-0 t-services">           
            <div class="shipping-inner"> <i class="fa fa-phone"></i>
              <div class="content">
                <h3>Call us +(123) 456-7896</h3>
                <span>24X7 Great Support.</span> 
              </div>
            </div>            
        </div>
      
      </div>
      <div class="col-sm-3 col-xs-12 t-search t-search-1">{{ search }}</div>
            
    </div>
  </div>
  <div id="navbar" class="navbar-static-top">
  <div class="sb-theme-menu">
    <div class="container">
      <div class="row">
       <div class="col-sm-10 col-xs-12">        
           {{ menu }}
       </div>
       <div class="col-sm-2 m-cart t-cart">{{ cart }}</div>         
      </div>
    </div>
  </div>
  </div>
</header>

<script type="text/javascript">  
$(document).ready(function() {
    if (jQuery(window).width() > 767){
    $('#navbar').affix({
        offset: {
           top: $('header').height()
        }
    });
    }
});
</script>
