<!-- inject our settings -->
<!-- * * * * * Widget Settings * -->

<!-- Image size:String ( Two input boxes )  -->
{% assign bp_image_size = "<%=bp_image_size%>" %}

<!-- Image size:String ( Dropdown )  -->
{% assign bp_image_crop = "<%=bp_image_crop%>" %}
<!-- Widget Title:String ( if return empty we not show title ) -->
{% assign bp_title = "<%=bp_title%>" %}
<!-- Widget Description:String ( if return empty we not show description ) -->
{% assign bp_desc = "<%=bp_desc%>" %}
<!-- * * * * * Post Settings * -->
<!-- Title lenght:String (rangslider, value range: 0-200, if return 0 we hide the title )  -->
{% assign bp_title_length = "<%=bp_title_length%>" %}
<!-- Excerpt lenght:String (rangslider, value range: 0-400, if return 0 we hide the description )  -->
{% assign bp_excerpt_length = "<%=bp_excerpt_length%>" %}
<!-- Author:Bool ( checkbox ) -->
{% assign bp_author = <%=bp_author%> %}
<!-- Date:Bool (checkbox ) -->
{% assign bp_date = <%=bp_date%> %}
<!-- Comments:Bool (checkbox) -->
{% assign bp_comments = <%=bp_comments%> %}
<!-- Button:Bool (checkbox) -->
{% assign bp_button = <%=bp_button%> %}
<!-- Button:String (Field, Show when bp_button is true) -->
{% assign bp_button_text = "<%=bp_button_text%>" %}
<!-- * * * * * Feed settings -->
<!-- relation -->
{% assign bp_post_relation = "<%=bp_post_relation%>" %}
<!-- blogs  -->
{% assign bp_blog_handle_arr = "<%=bp_blog_handle_arr%>" | split: "," %}
<!-- flag -->
{% assign bp_blog_flag = "<%=bp_blog_flag%>" %}
<!-- Set blog ID -->
{% assign bp_blog_ids = "<%=bp_blog_ids%>"  %}
<!-- Number of posts to display -->
{% assign bp_number_of_posts = <%=bp_number_of_posts%> %}
{% assign bp_exclude_ids = "<%=bp_exclude_ids%>"%}
{% assign bp_exclude_tags = "<%=bp_exclude_tags%>" | split: "," %}
{% assign bp_b_id = blog.id  %}

{% assign bp_exclude_frmpool_id = article.id | append: '"' | prepend: '"' %}
{% assign current_product_tags = product.tags %}

<style>
.bp_bb {
  border-bottom: none !important;
}
.bp_widget {
  overflow: visible;
  width: 100%;
  max-width: 100%;
  margin: 50px 0 0;
}
.bp_widget a {
  overflow: visible;
  display: block;
  cursor: pointer;
}
.pb_widget_title {
  font-size: 30px;
  margin: 0;
}
.pb_widget_desc {
  font-size: 20px;
}
.bp_container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 15px 0;
  justify-content: flex-start;
}
@media (min-width: 600px) {
  .bp_container {
    margin: 15px 0;
  }
}
.bp_header {
  width: 100%;
  padding: 5px 0;
}
.bp_footer {
  width: 100%;
  padding: 5px 0;
}
.bp_post {
  overflow: auto;
  padding: 15px;
}
@media (min-width: 600px) {
  .bp_post {
    padding: 10px;
  }
}
.bp_head {
  overflow: auto;
}
.bp_title {
  color: #3d4246;
  line-height: 1.2;
}
.bp_excerpt {
  color: #3d4246;
  line-height: 1.2;
}
.bp_img_holder {
  overflow: hidden;
  line-height: 0;
  border-radius: 1px;
  border: 1px solid #d8d8d8;
  box-shadow: 0 0 5px 0 #00000014;
}
.bp_img_holder img {
  width: 100%;
  margin: 0px !important;
}
.bp_body {
  overflow: auto;
  padding: 5px 0;
}
.bp_body,
.bp_excerpt,
.bp_meta,
.bp_title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.bp_meta {
  overflow: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog_meta {
  color: #8c8b8b;
  line-height: 1.6em;
  font-size: 15px;
}
.blog_meta span {
  position: relative;
  display: inline-block;
  margin-right: 15px;
  font-size: smaller;
  color: #8c8b8b;
}
.bp_author,
.bp_date {
  text-transform: capitalize;
}
.bp_meta_2 {
  display: flex;
  align-items: center;
}
.brbp_comment {
  width: 10px;
  height: 10px;
  margin: 0 0 1px 3px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,21.952c-141.163,0-256,95.424-256,212.715c0,60.267,30.805,117.291,84.885,157.717l-41.109,82.219 c-2.176,4.331-1.131,9.579,2.496,12.779c2.005,1.771,4.501,2.667,7.04,2.667c2.069,0,4.139-0.597,5.952-1.813l89.963-60.395 c33.899,12.949,69.803,19.52,106.773,19.52c141.163,0,256-95.424,256-212.715S397.163,21.952,256,21.952z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  opacity: 0.66;
}
.bp_btn {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 15px;
  border: 3px solid #000;
  color: #000;
  font-weight: 500;
}
.bp_btn:hover {
  background: #f9f9f9;
}
.bp_btn_wrap {
  width: 100%;
  text-align: center;
}
.bp_title {
  margin: 0 0 5px 0;
  line-height: 1.3;
}
.brbp_contents span {
  font-size: 15px;
  float: left;
  text-align: left;
}
.bp_container {
  left: 0;
  right: 0;
}
@media (min-width: 600px) {
  .bp_container {
    left: -10px;
    right: -10px;
  }
}
@media (min-width: 1200px) {
  .bp_container {
    left: -10px;
    right: -10px;
  }
}
.bp_post {
  flex: 0 0 100%;
  margin-bottom: 20px;
  padding: 5px;
}
.bp_post {
  color: #3d4246;
}
.bp_wrap {
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.bp_img_holder {
  display: none;
}
@media (min-width: 600px) {
  .bp_img_holder {
    display: none;
  }
}
@media (min-width: 1200px) {
  .bp_img_holder {
    display: block;
    width: 150px;
    height: 150px;
    border: none;
    border-radius: none;
  }
}
.bp_title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  font-size: 20px;
  margin: 0 0 8px;
}
.bp_excerpt {
  flex: 1;
  height: 105px;
  display: flex;
  font-size: 13px;
}
@media (min-width: 1200px) {
  .bp_excerpt {
    font-size: 16px;
  }
}
.bp_excerpt span {
  flex: 1;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.bp_body {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px;
  display: flex;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .bp_body {
    height: 150px;
  }
}
.bp_wrap_content {
  width: 100%;
  display: flex;
}
.bp_meta {
  padding: 10px;
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54) !important;
  fill: rgba(0, 0, 0, 0.54) !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  background: #f9f8f8;
  border-top: 1px solid #eaeaea;
}
.bp_meta_1 {
  display: flex;
}
.bp_btn_wrap {
  display: none;
}
@media (min-width: 600px) {
  .bp_btn_wrap {
    display: none;
  }
}
@media (min-width: 1200px) {
  .bp_btn_wrap {
    width: 150px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>

<!-- Widget <> Layout  -->

    <section class="bp_widget" id="bp"> <!--  -->

    <!-- ## Header <> Layout ## -->
    <header class="bp_head">
            <!-- if bp_title show the title content -->
            {% unless bp_title == blank %}
            <h3 class="pb_widget_title">
                <!-- title -->
                {{ bp_title }}
            </h3>
            {% endunless %}
            <!-- if bp_desc show the desc content -->
            {% unless bp_desc == blank %}
            <span class="pb_widget_desc">
                <!-- description -->
                {{ bp_desc }}
            </span>
            {% endunless %}
        </header>

    <!-- Container <> Layout -->
    <div class="bp_container">
    {% unless bp_blog_ids contains bp_b_id %}
 
    

    
    {% endunless %}
    
        {% unless bp_exclude_ids contains article.id %}
    
            {% if bp_blog_flag == "false" %}
    
            {% assign article_temp = article.id %}
    
            {% assign related_posts = "" %}
            {% assign curr_blog = blog.handle %}
    
                {% for article in blogs[curr_blog].articles %}
                    {% if article.id == article_temp %}
                    {% assign current_post_tags = article.tags %}
                    {% assign article_author = article.author %}
                    {% assign article_title = article.title %}
                {% assign article_title_arr = article_title | remove : " " | split: "" %}
            {% endif %}
            {% endfor %}
            {% assign main_flag = "true" %}
    
                {% if main_flag == "true" %}
    
                  {% for blog in bp_blog_handle_arr %}
    
                        {% assign blog_temp = blog %}
    
                        {% for article in blogs[blog_temp].articles %}
                            {% assign excluded = false %}
                                {%- for tag in article.tags -%}
                                    {% if  bp_exclude_tags contains tag%}
                                    {% assign excluded = true %}
                                    {% endif %}
                                {%- endfor -%}
                                {% if excluded == false%}
                                    {% unless bp_exclude_frmpool_id contains article.id %}

                                        <!-- If value "content" display this -->
                                        {% if bp_post_relation == "content" %}
                                        
                                            {%- assign atitle_temp = article.title | remove : " " | split: "" -%}
                                            {%- assign flag = "false" -%}
                                            {%- for word in atitle_temp -%}
                                                {%- if article_title_arr contains word -%}
                                                    {%- assign flag = "true" -%}
                                                    {%- break -%}
                                                {%- endif -%}
                                            {%- endfor -%}
                                            {%- if flag == "true" -%}
                                                {%- assign related_posts = related_posts | append:article.id | append : "," -%}
                                            {%- endif -%}
                                        
                                            <!-- If value "tags" display this -->
                                        {% elsif bp_post_relation == "tags" %}
                                        
                                            {%- for tag in article.tags -%}
                                            {%- if current_post_tags contains tag or current_product_tags contains tag-%}
                                                    {%- assign related_posts = related_posts | append:article.id | append : "," -%}
                                                {%- endif -%}
                                            {%- endfor -%}
                                        
                                            <!-- If value "author" display this -->
                                        {% elsif bp_post_relation == "author" %}
                                        
                                            {%- if article_author ==  article.author -%}
                                                {%- assign related_posts = related_posts | append:article.id | append : ","-%}
                                            {%- endif -%}
                                        
                                            <!-- If value not matching above display all -->
                                        {% else %}
                                        
                                            {%- assign atitle_temp = article.title | remove : " " | split: "" -%}
                                            {%- assign flag = "false" -%}
                                            {%- for word in atitle_temp -%}
                                                {%- if article_title_arr contains word -%}
                                                    {%- assign flag = "true" -%}
                                                    {%- break -%}
                                                {%- endif -%}
                                            {%- endfor -%}
                                            {%- assign t_flag = "false" -%}
                                            {%- for tag in current_post_tags -%}
                                                {%- if article.tags contains tag -%}
                                                    {%- assign t_flag = "true" -%}
                                                    {%- break -%}
                                                {%- endif -%}
                                            {%- endfor -%}
                                            {%- if t_flag == "true"  or article_author ==  article.author or flag == "true" -%}
                                                {%- assign related_posts = related_posts | append:article.id | append : ","-%}
                                            {%- endif -%}
                                        {% endif %}
            
                                    {% endunless %}
                                {% endif %}
                        {% endfor %}
    
                    {% endfor %}
    
                    {% if related_posts.size > 0 %}
    
                        {% assign tsl = timestamp | slice : -1,1 | times:1 %}
    
                        {% assign rids = related_posts | split: ',' %}
    
                        {% assign rindex = tsl %}
    
                        {% if tsl > rids.size or tsl < 0 %}
                            {% assign time_arr = timestamp | split: '' %}
                            {% for t in time_arr reversed %}
                                {% assign ti = t | times:1 %}
                                {% if ti < rids.size %}
                                    {% assign rindex = forloop.index %}
                                    {% break %}
                                {% endif %}
                            {% endfor %}
                        {% endif %}
    
                        {% if rindex == rids.size %}
                            {% assign rindex = rindex | minus : 1%}
                        {% endif %}
    
                        {% assign articleids = '' %}
                        {% for rid in rids offset:rindex %}
                            {% assign articleids = articleids | append:rid | append : "," %}
                        {% endfor %}
    
                        {% assign rsize = articleids | split:","  %}
    
                        {% if rsize.size < bp_number_of_posts %}
                            {% for rid in rids %}
                                {% unless articleids contains rid %}
                                    {% assign articleids = articleids | append:rid | append : "," %}
                                {% endunless %}
                            {% endfor %}
                        {% endif %}
    
                        {% assign rsize = articleids | size | minus:1 %}
                        {% assign articleids = articleids | slice: 0, rsize | split:"," %}
                        {% assign article_ids = articleids | uniq %}
    
                        {% assign count = 0 %}
                        {% for aid in article_ids %}
                            {% assign rflag = "false" %}
                            {% for blog in bp_blog_handle_arr %}
                                {% assign blog_temp = blog %}
    
                                {% for article in blogs[blog_temp].articles %}
                                    {% if count == bp_number_of_posts %}
                                        {% break %}
                                    {% endif %}
                                    {% if aid contains article.id %}
    
                                        {% assign ex_frmpool_tags = "" | split: "," %}
    
                                        {% assign ex_frmpool_main_flag = "true" %}
                                        {% for tag in ex_frmpool_tags %}
                                            {% assign ex_frmpool_ex_tags_temp = tag | strip %}
                                            {% if article.tags contains ex_frmpool_ex_tags_temp %}
                                                {% assign ex_frmpool_main_flag = "false" %}
                                            {% endif %}
                                        {% endfor %}
    
                                        {% if ex_frmpool_main_flag == "true" %}

                                        {% if article.image.alt %} 
                                        {% assign bp_img_alt = article.image.alt %}
                                        {% else %}
                                        {% assign bp_img_alt = article.image.alt %}
                                        {% endif %}
                                            
                                            
    
                                            <!-- Layout 3 Template -->
                                            {% assign bp_post_class = "bp_post" %}
                                            <div class="{{ bp_post_class }}">
                                                <div class="bp_wrap">
                                            
                                                    <!-- Image -->
                                                    <div class="bp_wrap_content">
                                                        <div class="bp_img_holder bp_bb">
                                                            <a title="{{ article.title }}" href="{{ article.url }}">
                                                                <!-- Image component that will be loaded in feed -->
                                                                
                                                                <img loading="lazy" src="{{ article.image.src | img_url: bp_image_size, crop: bp_image_crop, scale: 1 }}"
                                                                    alt="{{ bp_img_alt }}" />
                                                            </a>
                                                        </div>
                                            
                                                        <div class="bp_body">
                                                            <a title="{{ article.title }}" href="{{ article.url }}">
                                                                <!-- Title component file -->
                                                                <!-- Hide title if length is 0 -->
                                                                <!-- else we display & truncate title -->
                                                                    {% if bp_title_length == "0" %} {%else %}
                                                                        <h5 class="bp_title"> {{ article.title | truncate: bp_title_length }}</h5>
                                                                {% endif %}
                                                                
                                                                <!-- Ecxcerpt component file -->
                                                                <!-- Hide excerpt if length is 0 -->
                                                                <!-- else we display & truncate excerpt -->
                                                                    {% if bp_excerpt_length == "0" %} {%else %}
                                                                        <div class="bp_excerpt"> 
                                                                            {{
                                                                article.excerpt_or_content | strip_html | strip | truncate: bp_excerpt_length
                                                                }}
                                                                
                                                                        
                                                                    </div>
                                                                {% endif %}
                                                                
                                                            </a>
                                                        </div>
                                                        <!-- Comment component file -->
                                                        <!-- Display if bp_comments = true -->
                                                        {% if bp_button == true %}
                                                        <div class="bp_btn_wrap">
                                                        <a class="bp_btn" href="{{ article.url }}">
                                                          {{ bp_button_text }}
                                                        </a>
                                                        </div>
                                                        {% endif %} 
                                                    </div>
                                                    <div class="bp_meta">
                                                        <div class="bp_meta_1">
                                                            <!-- Date component file -->
                                                            <!-- Display if bp_date = true -->
                                                            {% if bp_date == true %}
                                                            <span class="bp_date">
                                                              {{ article.published_at | date: format: 'abbreviated_date'  }}&nbsp;
                                                            </span>
                                                            {% endif %}
                                                            
                                                            <!-- Author component file -->
                                                            <!-- Display if bp_author = true -->
                                                            {% if bp_author == true %}
                                                            by<span class="bp_author">
                                                            &nbsp;{{ article.user.first_name }}
                                                            </span>
                                                            {% endif %}
                                                        </div>
                                                        <div class="bp_meta_2">
                                                            <!-- Comment component file -->
                                                            <!-- Display if bp_comments = true -->
                                                            {% if bp_comments == true %}
                                                            {{ article.comments_count }}<div class="brbp_comment"></div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                        {% endif %}
    
                                        {% assign rflag = "true" %}
                                        {% assign count = count | plus:1 %}
                                        {% break %}
                                    {% endif %}
                                {% endfor %}
                                {% if rflag == "true" %}
                                    {% break %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
    
                {% else %}
    
                    {% endif %}
    
           
    
            {% endif %}
    
        {% endif %}
    
    {% endunless %}
</div>
<div class="bp_footer">
    
</div>
</section>