<!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 %}
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
<link href="catalog/view/javascript/jquery/swiper/css/swiper.min.css" rel="stylesheet" type="text/css" />
<!-- icon font -->
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/javascript/ionicons/css/ionicons.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/javascript/font-linearicons/css/style.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet" type="text/css" />
<!-- use for ostromi -->

<!-- end icon font -->
<link href="catalog/view/theme/tt_safira4/stylesheet/stylesheet.css" rel="stylesheet">
<link href="catalog/view/theme/tt_safira4/stylesheet/plaza/header/header{{ header_layout }}.css" rel="stylesheet">
<link href="catalog/view/theme/tt_safira4/stylesheet/plaza/theme.css" rel="stylesheet">
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" ></script>
<script src="catalog/view/javascript/jquery/swiper/js/swiper.min.js" ></script>
{% for script in scripts %}
<script src="{{ script }}" ></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" ></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
  <!-- Quick view -->
  {% if use_quick_view %}
    <script src="catalog/view/javascript/plaza/cloudzoom/cloud-zoom.1.0.2.min.js" ></script>
    <script src="catalog/view/javascript/plaza/cloudzoom/zoom.js" ></script>
    <script src="catalog/view/javascript/plaza/quickview/quickview.js" ></script>
    <link href="catalog/view/theme/tt_safira4/stylesheet/plaza/quickview/quickview.css" rel="stylesheet" type="text/css" />
  {% endif %}
  <!-- General -->
  <!-- Scroll Top -->
  {% if scroll_top %}
    <script>
      $("#back-top").hide();
      $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > $('body').height()/3) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });
        $('#back-top').click(function () {
          $('body,html').animate({scrollTop: 0}, 800);
          return false;
        });
      });
    </script>
  {% endif %}
  <!-- Advance -->
  {% if custom_css %}
    <style>
      {{ custom_css }}
    </style>
  {% endif %}
  {% if custom_js %}
    <script>
      {{ custom_js }}
    </script>
  {% endif %}
  
  <!-- Bootstrap Js -->
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" ></script>
</head>
<body class="{{ class }}">
<div class="wrapper">
{% if scroll_top %}
  <div id="back-top"><i class="ion-chevron-up"></i></div>
{% endif %}
{{ header }}