{% assign description = product.description %}
{% capture description %}{{ description }}{% endcapture %}
{% assign _layout = settings.general_placement %}

<div class="product-simple-tab">
  {% if _layout == 'wide' and template != 'product' %}<div class="container-fluid">{% endif %}
    <div role="tabpanel">
      <ul class="nav nav-tabs" role="tablist">

        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}

            {% case block.type %}
              {% when 'description' %}
                {% unless description == blank %}

                  {% if block.settings.multi-tab %}
                    {% assign description_parts = description | split: "<h5" %}

                    <li class="nav-item"><a class="nav-link active" href="#tabs-description" aria-controls="tabs-description" role="tab" data-toggle="tab">{{ 'products.product.description' | t }}</a></li>

                    {% for part in description_parts %}
                      {% if part contains "</h5>" %}
                        {% assign remove = part | split: ">" | first | append: ">" %}
                        {% capture ind %}{{ forloop.index | plus: 0}}{% endcapture %}
                        <li class="nav-item"><a class="nav-link" href="#tabs-{{ forloop.index }}" aria-controls="tabs-{{ forloop.index }}" role="tab" data-toggle="tab">{{ part | split: "</h5>" | first | strip_html | replace: remove, "" }}</a></li>
                      {% endif %}
                    {% endfor %}

                  {% else %}
                    <li class="nav-item"><a class="nav-link active" href="#tabs-description" aria-controls="tabs-description" role="tab" data-toggle="tab">{{ 'products.product.description' | t }}</a></li>

                  {% endif %}

                {% endunless %}

              {% when 'page' %}
                <li class="nav-item"><a class="nav-link" href="#tabs-page-{{ forloop.index }}" aria-controls="tabs-page" role="tab" data-toggle="tab">{{ block.settings.page_title }}</a></li>

            {% endcase %}

          {% endfor %}
        {% endif %}

        {% if section.settings.product_tab_review == 'inside' and _show_product_review %}
          <li class="nav-item" id="tab_review_tabbed"><a class="nav-link" href="#tab-review" aria-controls="tab-review" role="tab" data-toggle="tab">{{'products.product.customer_reviews' | t }}</a></li>
        {% endif %}
      </ul>

      <div class="tab-content" style="background-color:{{ section.settings.product_tab_bg_color }};">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}

            {% case block.type %}
              {% when 'description' %}
                {% unless description == blank %}

                  {% if block.settings.multi-tab %}
                    {% assign description_parts = description | split: "<h5" %}

                    <div role="tabpanel" class="tab-pane show active" id="tabs-description">
                      {{ product.description | split: '<h5>' | first }}
                    </div>

                    {% for part in description_parts %}
                      {% assign fp = part | append: " " | split: "</h5>" | last %}
                      {% assign p = part | append: " " | split: "</h5>" | last | strip_html | replace: "&nbsp;", "" | replace: " ", "" | strip_newlines %}
                      {% capture ind %}{{ forloop.index | plus: 0}}{% endcapture %}

                      {% if p != "" or fp contains "<img " or fp contains "<iframe " %}
                        <div role="tabpanel" class="tab-pane" id="tabs-{{ forloop.index }}">
                          {{ part | split: "</h5>" | last | replace: "<div", "<span" | replace: "</div", "</span" }}
                        </div>
                      {% endif %}
                    {% endfor %}

                  {% else %}
                    <div role="tabpanel" class="tab-pane show active" id="tabs-description">
                      {{ product.description }}
                    </div>

                  {% endif %}

                {% endunless %}

              {% when 'page' %}
                <div role="tabpanel" class="tab-pane" id="tabs-page-{{ forloop.index }}">
                  {{ pages[block.settings.page].content }}
                </div>

            {% endcase %}

          {% endfor %}
        {% endif %}

        {% if section.settings.product_tab_review == 'inside' and _show_product_review %}
          <div role="tabpanel" class="tab-pane" id="tab-review">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        {% endif %}
        
      </div>
    </div>
  {% if _layout == 'wide' and template != 'product' %}</div>{% endif %}  

  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('.rating-links a').click(function() {
        $('.product-simple-tab ul li a').removeClass('active');
        $('#tab_review_tabbed a').addClass('active');
        $('.product-simple-tab .tab-content .tab-pane').removeClass('show active');
        $('#tab-review').addClass('show active');
        $('#tab_review_tabbed').scrollToMe();
        return false;
      });
    });
  </script>
</div>