{% assign _breadcrumb_styles = settings.breadcrumb_styles %}
{% assign _layout = settings.general_placement %}
{% if template contains 'customers' or template == 'page' %}
  {% capture _breadcrumb_image %}{{ 'breadcrumb_bg.jpg' | asset_url }}{% endcapture %}
{% else %}
  {% capture _breadcrumb_image %}{{ section.settings.breadcrumb_image | img_url: '1920x' }}{% endcapture %}
  {% if section.settings.breadcrumb_image == blank %}{% capture _breadcrumb_image %}{{ 'breadcrumb_bg.jpg' | asset_url }}{% endcapture %}{% endif %}
{% endif %}
{% assign _lazyload = settings.use_lazyload %}

<div class="wrap-breadcrumb bw-{{ settings.breadcrumb_styles }}{% if _lazyload and _breadcrumb_styles == 'image' %} lazyload{% endif %}"{% if _breadcrumb_styles == 'image' %} data-bgset="{{ _breadcrumb_image }}) 1920w"{% endif %}>
  <div id="breadcrumb" class="breadcrumb-holder{% if _layout == 'boxed' %} boxed{% else %} container-fluid{% endif %}">

        <ul class="breadcrumb">
          <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a itemprop="url" href="/">
              <span itemprop="title" class="d-none">{{ shop.name | escape }}</span>{{ 'general.text.home' | t }}
            </a>
          </li>

          {% if template contains 'product' %}

            {% if collection %}
              {% if collection.handle %}

                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="d-none">
                  <a href="{{collection.url}}" itemprop="url">
                    <span itemprop="title">{{ collection.title }}</span>
                  </a>
                </li>    
                <li>{{ collection.title | link_to: collection.url }}</li>

              {% endif %}
            {% endif %}

            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="d-none">
              <a href="{{product.url}}" itemprop="url">
                <span itemprop="title">{{ product.title }}</span>
              </a>
            </li>
            <li class="active">{{ product.title }}</li>

          {% elsif template contains 'collection' %}

            {% if current_tags %}
              <li>{{ collection.title | link_to: collection.url }}</li>
              <li class="active">{{ current_tags.first }}</li>

            {% elsif collection.handle %}
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="d-none">
                <a href="{{collection.url}}" itemprop="url">
                  <span itemprop="title">{{ collection.title }}</span>
                </a>
              </li>
              <li class="active">{{ collection.title }}</li>

            {% else %}
              <li class="active">{{ page_title }}</li>
            {% endif %}

          {% elsif template == 'article' %}

            <li>{{ blog.title | link_to: blog.url }}</li>
            <li class="active">{{ article.title }}</li>

          {% else %}

            <li class="active">{{ page_title }}</li>

          {% endif %}
        </ul>

        {% if template contains 'page' %}
          <h1>{{ page.title }}</h1>
        {% endif %}

  </div>
</div>