{% extends 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:themeBase.html.twig' %}

{% block main_content %}
<style>
.catr-title h1 {font-size: 26px;font-weight: 900;text-align: left;margin-bottom: 0;line-height: normal;color: #0b3048;}
.catr-title {padding-bottom: 30px;padding-top: 50px;}
.catr-title h6 {font-size: 20px;color: #0b3048;}
.product-cat-box .pro-image {background-color: #f5f5f5;}
.pro-rel-cat.ob-product-grid .pro-box:hover {border: 2px solid #f5f5f5;box-shadow: none;}
.pro-rel-cat.ob-product-grid .pro-box {margin-bottom: 20px;}
.product-wrap .item-title.product-cat-title {color: #0b3048;height: auto;}
.product-wrap .item-title.product-cat-title .category-text {color: #0b3048;font-size: 14px;font-weight: 400;text-transform: capitalize;line-height: initial;display: inline-block;}
.partners-logos h4 {color: #0b3048;padding: 10px 0;}
.contend-texts {text-align:center; padding:30px 0; background-color:#fafafa; border-top:solid 1px #aeb0b3; }
.contend-texts p {font-size:16px; color:#aeb0b3;line-height: 24px;  padding-bottom: 30px;}
#category_list_container {display: flex; flex-wrap: wrap;}

</style>

	<div class='container  ob-category-browse-page' id=''>
	    <div class='innerpage row ob-category-browse-page-innerpage'>
			<div class=' col-xs-12'>
				<div class='clearfix'></div>
				<div class='product-main-list-block'>
			       	<div class='tab-pane active'>
						<div class="ob-product-grid js-product-grid">
							<div class="row" id="product_list_container">
								{% block category_top_banner %}
								<div class="catr-banner">
									<img alt="" class="" title="" u="image" src="http://idme.flowzdigital.com/images/uploads/banner_images/thumb_6af71b45e2688e58ae9f1f487a728f9d3e83d4fb.png" height="100%" width="100%">
								</div>
								{% endblock category_top_banner %}
								{% block category %}
									<section class="container">
									    <div class="row">
{#										
									        {% block left_side_bar %}
									            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-grid-left">
									                {% block category_list_left_panel %}{% endblock category_list_left_panel %}
								                	{% block category_left_banner %}{% endblock category_left_banner %}
									                <div class="clearfix"></div>
									            </div>
									        {% endblock left_side_bar %}
											
									        <article class="col-sm-8 col-md-9 col-lg-9 col-xs-12">
#}											
											<article class=" col-xs-12">
												
												{% use 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:BaseUIElements/breadCrumb.html.twig' %}
												{% block bread_crumb %} {{ parent() }} {% endblock bread_crumb %}
{#												
									            <div class="ob-category-top-img">
									                {% block category_top_banner %}{% endblock category_top_banner %}
									            </div>
#}												
									            <div class="tab-content">
									                <div class="tab-pane active">
{#
									                    <div class="title">
									                        <h1>{% block category_listing_title %}{% endblock category_listing_title %}</h1>
									                    </div>
#}														
														<div class="catr-title">
															{# <h1 class="item-title product-cat-title"  >Select category</h1>#}
															<h1 class="item-title product-cat-title"  >{{main_category_name}}</h1>
															<h6>Shop over {{category_count}} customizable {{main_category_name}} options. Perfect to show off your brand!</h6>
														</div>
								                        <div class="ob-product-grid js-product-grid pro-rel-cat" id="category_browse_box">
								                            <div class="row" id="category_list_container">
								                                {% block category_listing %}{% endblock category_listing %}
								                            </div>
								                        </div>
									                </div>
									            </div>
									        </article>
									    </div>
									</section>
								{% endblock category %}
							</div>
						</div>
						{% block search_js_css %}{% endblock search_js_css %}	
					</div>
				</div>
			</div>
	    </div> 
	</div>
	
	{% if categoryBrandunique is defined %}
		{% if categoryBrandunique|length>0 %}
		{% set arrLocale = app.request.locale|splitCulture %}
		<section class=" partners-logos ">
	      <div class="container">
	        <div class="row">
	          <div class="col-12 p-b-20">
	            <h3 class="h-title">Top {{category_name}} Brands</h3>
				<h4>Select from our top customizable {{category_name}} brand</h4>
	          </div>
	          <div class="col-12 ">
	            <div class="owl-carousel owl-theme partners-logo-sellers">
	            	  {% for brandMap in categoryBrandunique %}
		              {# {% for brand_key,brand in brandList[arrLocale.culture] %} #}
		              {% if brandList[arrLocale.culture][brandMap] is defined %}
			              {% set brand = brandList[arrLocale.culture][brandMap] %}
			              <div class="item">
			                <div class="cat-img">
			                  <a href="{{ url('office_brain_search_bundle_search',{'_locale':app.request.locale,'main_filter':'lineName','search_query':brand.name,'category_filter':'['~category_id~']'}) }}"> <img src="{{ brand.image }}" alt="{{brand.name}}"> </a>
			                </div>
			              </div>
		              {% endif %}
	              {% endfor %}
	              </div>
	            </div>
	          </div>

	        </div>
	      </div>
	    </section>
	    {% endif %}
    {% endif %}
	
    <div class="blog-project">
        <div class="blog-project-inner">
            <div class="blog-project-item">
                <figure>
                    <img src="{{asset('uploads/blogcategory.png')}}" width="274" height="156">
                    {#<div class="blog-project-text">
                        <div><p>How Google’s ‘Enshittification’ and Rising Zero-Click Results are Affecting Brand Retention Strategies</p></div>
                    </div>#}
                </figure>
            </div>
            {{ render(controller('OfficeBrainBlogBundle:Blog:recentblog')) }}                
            {{ render(controller('OfficeBrainBlogBundle:Blog:blogByTag',{'tag_slug':'popular'})) }}
        </div>
    </div>
	

	{% if seo_detail.categoryContent is defined %}
	<div class="contend-texts">
		{{seo_detail.categoryContent|raw}}
	</div>
	{% endif %}
{% endblock main_content %}
{% block header_css %}
    {{ parent() }}
    {% stylesheets '@OfficeBrainPageBundle/Resources/public/css/banner-slider.css' %}
    	<link href='{{ asset_url }}' rel='stylesheet' type='text/css'/>
    {% endstylesheets %}	
    <style>
    #category_content{
    	text-align: left;
    }
    #category_content .list{
    	margin-left:30px;
    }
    #category_content .list li{
    	list-style: disc;
    }
    #category_content .heading-block-title{
    	color: #000;
	    padding-left: 10px;
	    font-size: 18px;
	    margin: 0;
	    font-weight: bold;
	    text-transform: uppercase;
	    text-align: center;
    }
    </style>
{% endblock header_css %}

{% block footer_js %} 
    {{ parent() }} 
    {% javascripts '@OfficeBrainPageBundle/Resources/public/js/bundle/close_btn.js'
                   '@OfficeBrainPageBundle/Resources/public/js/bundle/product_category_view.js'
                   '@OfficeBrainCustomBundleThemeBundle/Resources/public/IdmeTheme/javascript/thum_slider.js'  
    			   '@OfficeBrainPageBundle/Resources/public/js/banner/jssor.js'
 		       	   '@OfficeBrainPageBundle/Resources/public/js/banner/jssor.slider.js'
                   '@OfficeBrainBannerBundle/Resources/public/js/banner-track.js'
    %}
    	<script src="{{ asset_url }}" type='text/javascript'></script>
    {% endjavascripts %}
    <script type="text/javascript" src="{{ path('office_brain_bannerbundle_banner_findbannertrans',{'display':'Home'}) }}"></script>
    <script>
    $(document).ready(function(){
    	$('#js_category_desc').html($('#js_category_desc_banner').find('.js-get-banner').html());
    });
    </script>
{% endblock footer_js %}