<!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, maximum-scale=1, user-scalable=no">
<title>{{ title }} </title>
<base href="{{ base }}" />
{% if description %} 
<meta name="description" content="{{ description }}" />
{% endif %} 
{% if keywords %} 
<meta name="keywords" content= "{{ keywords }}" />
{% endif %} 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% if icon %} 
<link href="{{ icon }}" rel="icon" />
{% endif %} 
{% for link in links %} 
<link href="{{ link.href }}" rel="{{ link.rel }}" />
 {% endfor %}
<link rel="stylesheet" href="catalog/view/javascript/xtensions/stylesheet/bs/css/bootstrap.min.css">
<link rel="stylesheet" href="catalog/view/javascript/xtensions/stylesheet/bs/css/jquery-ui.min.css">
{% if direction == 'rtl'%} 
<link rel="stylesheet" href="catalog/view/javascript/xtensions/stylesheet/bs/css/bootstrap-rtl.min.css">
{% endif %} 
<link href="catalog/view/javascript/xtensions/stylesheet/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="catalog/view/javascript/xtensions/stylesheet/bs/js/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen" />
{% for style in styles %} 
<link rel="{{ style.rel }}" type="text/css" href="{{ style.href }}" media="screen" />
{% endfor %}
{% if custom_css %} 
<style type="text/css">
{{ custom_css }} 
</style>
{% endif %} 
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/jquery-2.1.1.min.js"></script>
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/jquery-ui.min.js"></script>
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/bootstrap.min.js"></script>
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/nprogress.js"></script>
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/datetimepicker/moment.js" type="text/javascript"></script>
<script src="catalog/view/javascript/xtensions/stylesheet/bs/js/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
{% for script in scripts %} 
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %} 
{% if stores %} 
<script type="text/javascript"><!--
$(document).ready(function() {
{% for store in stores %} 
$('body').prepend('<iframe src="{{ store }}" style="display: none;"></iframe>');
{% endfor %} 
});
//--></script>
{% endif %} 
{% for analytic in analytics %} 
{{ analytic }} 
{% endfor %} 
</head>
<body>
<nav class="navbar">
<nav id="top" class="info-back-top">
<div class="container">
<div id="top-links" class="nav pull-right">
      <ul class="list-inline">        
        <li>{{ text_logged }} </li>
      </ul>
    </div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="logo" class="text-center">
          {% if logo %} 
          <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive xlogo" /></a>
          {% else %}   
          <h1><a href="{{ home }}">{{ name }} </a></h1>
          {% endif %}  
</div>
</div>
<div class="col-md-6 steps-boundary">
<div class="row bs-wizard" style="border-bottom:0;">                
<div id="step1" class="col-xs-3 bs-wizard-step complete"> 
<div class="text-center bs-wizard-stepnum text-muted"><span>{{ text_checkout_option }}<i class="fa fa-lock"></i></span></div>
<div class="progress"><div class="progress-bar"></div></div>
<a class="bs-wizard-dot"></a>
</div>               
<div id="step2" class="col-xs-3 bs-wizard-step complete">
<div class="text-center bs-wizard-stepnum text-muted"><span>{{ text_checkout_account }}<i class="fa fa-lock"></i></span></div>  
<div class="progress"><div class="progress-bar"></div></div>				  
<a class="bs-wizard-dot"></a>
</div>                
<div id="step3" class="col-xs-3 bs-wizard-step complete">
<div class="text-center bs-wizard-stepnum text-muted"><span>{{ text_checkout_confirm }}<i class="fa fa-lock"></i></span></div>
<div class="progress"><div class="progress-bar"></div></div>
<a class="bs-wizard-dot"></a>
</div>
<div id="step4" class="col-xs-3 bs-wizard-step active">
<div class="text-center bs-wizard-stepnum text-muted"><span>{{ text_success_bar }}<i class="fa fa-lock"></i></span></div>
<div class="progress"><div class="progress-bar"></div></div>
<a class="bs-wizard-dot"></a>
</div>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm hidden-md">
<h3 class="margin_top text-right">
<small class="text-muted"><i class="fa fa-lock"></i>&nbsp;{{ text_ssl_msg }}</small>
</h3>
</div>
</div>
</div>
</nav>
