{% extends '::adminBaseAjax.html.twig' %}
{% block ajax_body %}

{% set allItemsCount = 0 %}
{% set ecommerceItemsCount = 0 %}
{% set cmsItemsCount = 0 %}
{% set blankItemsCount = 0 %}
{% if pagination.items is defined and pagination.items|length > 0 %}
	{% set allItemsCount = pagination.items|length %}

	{% for item in pagination.items %}
		{% if item.themeType == 'ECommerce' %}
			{% set ecommerceItemsCount = ecommerceItemsCount + 1 %}
		{% elseif item.themeType == 'CMS' %}
			{% set cmsItemsCount = cmsItemsCount + 1 %}
		{% elseif item.themeType == 'Blank' %}
			{% set blankItemsCount = blankItemsCount + 1 %}
		{% endif %}
	{% endfor %}
{% endif %}


<div class="ui-table-block dashboard-list-block col-lg-12 col-md-12 col-xs-12">
	        <div class="ui-content-block edit-design-store">
	        <div class="row">
                <div class="col-lg-12">
                    <h5>{{ 'catagories'|trans }}</h5>
                    <ul class="js-subshop-theme categories-list-type">
                        <li class="active" data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstorelistajax" data-type="all"><a href="javascript:void(0)">All ({{ allItemsCount }})</a></li>
                        <li data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstorelistajax" data-type="ECommerce"><a href="javascript:void(0)">ECommerce ({{ ecommerceItemsCount }})</a></li>
						<li data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstorelistajax" data-type="CMS"><a href="javascript:void(0)">CMS ({{ cmsItemsCount }})</a></li>
						<li data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstorelistajax" data-type="Blank"><a href="javascript:void(0)">Blank ({{ blankItemsCount }})</a></li>
						{% if subShop.shopThemeId is defined and subShop.shopThemeId > 0 %}
							<li data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstorelistajax" data-type="active"><a href="javascript:void(0)">Active Theme (1)</a></li>
						{% endif %}

                    </ul>
                </div>
            </div>

{% if pagination is defined and pagination.items is defined and pagination.items|length > 0 %}
	<div class="row">
	{% for item in pagination.items %}
		<div class="col-lg-3 col-md-3 col-sm-3">
			<div class="theme-block">
			{% if item.themeImageName != '' %}
				<img src="{{ asset(media_location.url~item.themeImageName) }}" class="img-responsive" style="width: 300px;height: 400px">
			{% endif %}
			</div>
			<div class="radio">
        		<label>
                	<input type="radio" class="ace ring" name="js-store-theme" name="form-field-radio" value="{{ item.id }}" {% if subShop.shopThemeId == item.id %} checked {% endif %} data-theme-type="{{ item.themeType }}">
                    <span class="lbl">{{ item.name }}</span>
                </label>
           </div>
		</div>
	{% endfor %}
    </div>
    <div class="form-group">
    	<div class="btn-block">
    		<button type="button" class="customize-btn js-select-theme" data-route="office_brain_subshopbundle_subshopadmin_subshopdesignstoresaveajax">{{ "subshop.form.save" | trans }}</button>
    	</div>
    </div>
{% endif %}
</div>
		</div>
{% endblock ajax_body %}