<div class="{% if _layout == 'boxed' %}boxed{% else %}full-width{% endif %}"> 
  {% include 'header-top-bar' %}

  <div class="header-middle d-none d-lg-block">
    <div class="header-logo">
      {% assign _logo_size = section.settings.logo_max_width | append: 'x' %}
      {% assign _logo_size_2x = section.settings.logo_max_width | times: 2 | append: 'x' %}
      <a href="/" title="{{ shop.name | escape }}" class="logo-site{% if _lazyload %} lazyload waiting{% endif %}">
        <img {% if _lazyload %} class="lazyload" data-srcset="{{ section.settings.logo | img_url: _logo_size }} 1x, {{ section.settings.logo | img_url: _logo_size_2x }} 2x"
             {% else %}src="{{ section.settings.logo | img_url: _logo_size_2x }}"{% endif %} 
             alt="{{ shop.name | escape }}"
             style="max-width: {{ section.settings.logo_max_width }}px;" />
      </a>
    </div>

    {% if settings.show_search %}
      <div class="searchbox d-none d-lg-block">

        <form id="search" class="navbar-form search" action="/search" method="get">
          <input type="hidden" name="type" value="product" />
          <input id="bc-product-search" type="text" name="q" class="form-control"  placeholder="{{ 'general.text.search_placeholder' | t }}" autocomplete="off" />

          <button type="submit" class="search-icon">{{ 'general.text.search_placeholder' | t }}</button>
        </form>

        <div id="result-ajax-search">
          <ul class="search-results"></ul>
        </div>

      </div>
    {% endif %}

    {% if section.settings.enable_header_contact %}
      <div class="phone{% if _lazyload %} lazyload waiting{% endif %}">
        <div class="phone-icon-wrapper">
          {% if settings.phone_icon_type == 'font-icon' %}
            <i class="demo-icon {{ settings.phone_font_icon }}"></i>

          {% else %}
            {% assign phone_icon = settings.phone_icon %}

            <img {% if _lazyload %}class="lazyload"
                data-srcset="{{ phone_icon | img_url: '20x'}} 1x, {{ phone_icon | img_url: '40x'}} 2x"
                {% else %}src="{{ phone_icon | img_url: '20x'}}"{% endif %}
                alt="Phone" />

          {% endif %}
        </div>
        
        <div class="phone-info-wrapper">
          <span>{{ "general.header.helpline" | t }}:</span>
          <span>
            {% assign phone_style = section.settings.phone_number_style %}

            {% if phone_style == 'input' %}
              {{ section.settings.header_phone_number }}
            {% else %}
              {{ shop.phone }}
            {% endif %}  
          </span>
        </div>  
      </div>
    {% endif %}
  </div>

  <div class="header-main{% if section.settings.no_padding %} no-padding{% endif %}">
    <div class="table-row {% if _layout == 'boxed' %}boxed{% endif %}">

      <div class="navbar navbar-responsive-menu d-lg-none">
        <div class="responsive-menu">
          Menu
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
      </div>

      {% assign _logo_mobile = section.settings.logo_mobile %}
      {% assign _logo_size = section.settings.logo_max_width | append: 'x' %}
      {% assign _logo_size_2x = section.settings.logo_max_width | times: 2 | append: 'x' %}

      <div class="header-logo{% unless _logo_mobile == blank %} has-header-logo-sticky{% endunless %} d-lg-none d-xl-none">
        <a href="/" title="{{ shop.name | escape }}" class="logo-site{% if _lazyload %} lazyload waiting{% endif %}">
          <img {% if _lazyload %} class="lazyload" data-srcset="{{ section.settings.logo | img_url: _logo_size }} 1x, {{ section.settings.logo | img_url: _logo_size_2x }} 2x"
               {% else %}src="{{ section.settings.logo | img_url: _logo_size_2x }}"{% endif %} 
               alt="{{ shop.name | escape }}"
               style="max-width: {{ section.settings.logo_max_width }}px;" />
        </a>
      </div>

      {% unless _logo_mobile == blank %}
        <div class="header-logo-sticky d-none header-logo">
          <a href="/" title="{{ shop.name | escape }}" class="logo-site{% if _lazyload %} lazyload waiting{% endif %}d-none">
            <img {% if _lazyload %} class="lazyload" data-srcset="{{ _logo_mobile | img_url: _logo_size }} 1x, {{ _logo_mobile | img_url: _logo_size_2x }} 2x"
                 {% else %}src="{{ _logo_mobile | img_url: _logo_size_2x }}"{% endif %} 
                 alt="{{ shop.name | escape }}"
                 style="max-width: {{ section.settings.logo_max_width }}px;" />
          </a> 
        </div>
      {% endunless %} 

      {% if settings.show_cart %}
      <div class="m-cart-icon cart-target{% if _lazyload %} lazyload waiting{% endif %} d-lg-none">
        <a href="/cart" class="mobile-basket" title="cart">
          {% if settings.cart_icon_type == 'font-icon' %}
          <i class="demo-icon {{ settings.cart_font_icon }}"></i>

          {% else %}
          {% assign cart_type = settings.cart_icon %}

          <img {% if _lazyload %}class="lazyload"
               data-srcset="{{ cart_type | img_url: '20x'}} 1x, {{ cart_type | img_url: '40x'}} 2x"
               {% else %}src="{{ cart_type | img_url: '20x'}}"{% endif %}
               alt="Cart" />

          {% endif %}

          <span class="number"><span class="n-item">0</span></span>
        </a>
      </div>
      {% endif %}

      {% unless section.settings.nav_linklist == blank %}
        <div class="wrap-horizontal-menu">
          {% unless section.settings.nav_linklist == blank %}
          <div class="horizontal-menu dropdown-fix">
            <div class="sidemenu-holder">

              <nav class="navbar navbar-expand-lg">
                <div class="collapse navbar-collapse">
                  <ul class="menu-list">
                    {% for l in linklists[section.settings.nav_linklist].links %}
                    {% include 'nav-link' %}
                    {% endfor %}
                  </ul>
                </div>
              </nav>

            </div>
          </div>
          {% endunless %}
        </div>
      {% endunless %}  

      <div class="header-icons d-none d-lg-block">
        <ul class="list-inline">

          {% if settings.show_cart %}   
          <li class="top-cart-holder{% if settings.cart_styles == 'dropdown' %} hover-dropdown{% endif %}">
            <div class="cart-target">   

              {% if settings.cart_styles == 'dropdown' %}
              <a href="javascript:void(0)" class="basket dropdown-toggle{% if _lazyload %} lazyload waiting{% endif %}" title="cart">
                {% if settings.cart_icon_type == 'font-icon' %}
                <i class="demo-icon {{ settings.cart_font_icon }}"></i>

                {% else %}
                {% assign cart_type = settings.cart_icon %}

                <img {% if _lazyload %}class="lazyload"
                     data-srcset="{{ cart_type | img_url: '20x'}} 1x, {{ cart_type | img_url: '40x'}} 2x"
                     {% else %}src="{{ cart_type | img_url: '20x'}}"{% endif %}
                     alt="Cart" />

                {% endif %}

                <span class="number"><span class="n-item">{{ cart.item_count }}</span></span>
              </a>

              <div class="cart-dd">
                <div id="cart-info">
                <div class="cart-header"> {{ "general.header.cart_info.title" | t }}</div>
                  <div id="cart-content" class="cart-content">
                    <div class="cart-loading"></div>
                  </div>
                </div>
              </div>

              {% else %}
              <a href="javascript:void(0)" class="basket cart-toggle{% if _lazyload %} lazyload waiting{% endif %}" title="cart">
                {% if settings.cart_icon_type == 'font-icon' %}
                <i class="demo-icon {{ settings.cart_font_icon }}"></i>

                {% else %}
                {% assign cart_type = settings.cart_icon %}

                <img {% if _lazyload %}class="lazyload"
                     data-srcset="{{ cart_type | img_url: '20x'}} 1x, {{ cart_type | img_url: '40x'}} 2x"
                     {% else %}src="{{ cart_type | img_url: '20x'}}"{% endif %}
                     alt="Cart" />

                {% endif %}

                <span class="number"><span class="n-item">{{ cart.item_count }}</span></span>
              </a>

              {% endif %}

            </div>
          </li>            
          {% endif %}

        </ul>
      </div>

    </div>    
  </div>

  {% unless section.settings.vertical_nav_linklist == blank %}
  <div class="vertical-menu dropdown-fix col-lg-3 d-none">
    <div class="sidemenu-holder">

      <div class="navigation">
        <div class="head opened"><i class="demo-icon icon-th-list-1"></i>{{ 'general.text.shop_by_collection' | t }}</div> 

        <nav class="navbar vertical-navbar opened">
          <div class="collapse navbar-collapse">
            <ul class="main-nav">
              {% for l in linklists[section.settings.vertical_nav_linklist].links %}
              {% include 'vertical-nav-link' %}
              {% endfor %}
            </ul>
          </div>
        </nav>
      </div>

    </div>
  </div>
  {% endunless %}

</div>

