{% block theme_design_sidebar %}
{% set themeColor = subShopthemeDesign.themeColor%}
<div class="customize-design-block">
	<!-- customize-min-menu -->
	<div class="title">
		<span>{{ "subshop_content.admin.design.sidebar.title" | trans }}</span>
		<a href="javascript:;" class="js-min-menu-btn">
		<i class="fa icon-double-angle-left fa-angle-double-left"></i>
		</a>
	</div>
	<div class="content">
		<div class="min-menu-content">
			<span>{{ "subshop_content.admin.design.sidebar.title" | trans }}</span>
		</div>
		<ul>
			<li class="upload-block">
				<form name="form-logo" class="js-form" action="{{ path('office_brain_subshopbundle_subshopthemeadmin_subshopthemedesigncustomfileuploadajax', {'subshop_id' : subshop.id}) }}" enctype="multipart/form-data">
					{{ "subshop_content.admin.design.sidebar.logo" | trans }}
					<span>{{ "subshop_content.admin.design.sidebar.suggestion" | trans }}</span>
					<a href="javascript:;" class="add-image-btn">
					<i class="fa-plus-square-o fa file-button"><input type="file" name="file" class="js-theme-image-upload"></i>
					<input type="hidden" name="key" value="logoImage" >
					</a>
				</form>
			</li>
			<li class="upload-block">
				<form name="form-header" class="js-form" action="{{ path('office_brain_subshopbundle_subshopthemeadmin_subshopthemedesigncustomfileuploadajax', {'subshop_id' : subshop.id}) }}" enctype="multipart/form-data">
					{{ "subshop_content.admin.design.sidebar.header_image" | trans }}
					<span>{{ "subshop_content.admin.design.sidebar.suggestion" | trans }}</span>
					<a href="javascript:;" class="add-image-btn">
					<i class="fa-plus-square-o fa file-button"><input type="file" name="file" class="js-theme-image-upload"></i>
					<input type="hidden" name="key" value="headerImage" >
					</a>
				</form>
			</li>
			<li class="upload-block">
				<form name="form-bg" class="js-form" action="{{ path('office_brain_subshopbundle_subshopthemeadmin_subshopthemedesigncustomfileuploadajax', {'subshop_id' : subshop.id}) }}" enctype="multipart/form-data">
					{{ "subshop_content.admin.design.sidebar.background_image" | trans }}
					<span>{{ "subshop_content.admin.design.sidebar.suggestion" | trans }}</span>
					<a href="javascript:;" class="add-image-btn">
					<i class="fa-plus-square-o fa file-button"><input type="file" name="file" class="js-theme-image-upload"></i>
					<input type="hidden" name="key" value="backgroundImage" >
					</a>
				</form>
			</li>
			<li class="home-icons">
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.icon_theme" | trans }}
				<span>{{ "subshop_content.admin.design.sidebar.select_icon_theme" | trans }}</span>
				</a>
				<div class="theme-icon-bg js-current-theme-color-design" data-val="{{ themeColor }}"><i class="fa-home fa theme-{{ themeColor }}" {% if themeColor == 'default' %} style="color:{{ subShopthemeDesign.themeColorSetting['default'].themeIconColor }}" {% endif %}></i></div>
				<div class="clearfix"></div>
				<div class="icon-color-variation">
					<ul>
						{% for index,color in subShopthemeDesign.themeColorSetting %}
						<li><a href="javascript:;" class="js-theme-color-design" data-key="themeColor", data-val="{{ index }}"><i class="fa-home fa theme-{{ index }}" {% if index == 'default' %} style="color:{{ subShopthemeDesign.themeColorSetting['default'].themeIconColor }}" {% endif %}></i></a></li>
						{% endfor %}
					</ul>
				</div>
				<div class="pink-border"></div>
			</li>
			<li>
				<a href="javascript:;" >
				{{ "subshop_content.admin.design.sidebar.body_text_color" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].bodyTextColor }}" data-key="bodyTextColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].bodyTextColor }}"></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.body_background_color" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].bodyBackgroundColor }}" data-key="bodyBackgroundColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].bodyBackgroundColor }}"></i>
				</a>
			</li>
			<li class="dropdown-block">
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.body_font_family" | trans }}
				</a>
				<select class="form-control js-theme-element-font-change-design" data-key="bodyTextFontFamily" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].bodyTextFontFamily }}">
					<option value="arial">Arial</option>
					<option value="calibri">Calibri</option>
					<option value="robotoregular">Robotoregular</option>
					<option value="roboto_condensedregular">roboto Condensedregular</option>
				</select>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.header_background_color" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].headerBackgroundColor }}" data-key="headerBackgroundColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].headerBackgroundColor }}"></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.menu_background" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].menuBackgroundColor }}" data-key="menuBackgroundColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].menuBackgroundColor }}"></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.menu_text_color" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].menuTextColor }}" data-key="menuTextColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].menuTextColor }}" ></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.menu_text_rollover" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].menuTextRolloverColor }}" data-key="menuTextRolloverColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].menuTextRolloverColor }}" ></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.button_background" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].buttonBackgroundColor }}" data-key="buttonBackgroundColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].buttonBackgroundColor }}"></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.button_background_rollover" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].buttonBackgroundRolloverColor }}" data-key="buttonBackgroundRolloverColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].buttonBackgroundRolloverColor }}"></i>
				</a>
			</li>
			<li>
				<a href="javascript:;">
				{{ "subshop_content.admin.design.sidebar.button_text_color" | trans }}
				<i class="color-box js-color-box white-border" style="background-color: {{ subShopthemeDesign.themeColorSetting[themeColor].buttonTextBackgroundColor }}" data-key="buttonTextBackgroundColor" data-val="{{ subShopthemeDesign.themeColorSetting[themeColor].buttonTextBackgroundColor }}"></i>
				</a>
			</li>
			<li class="design-auto-save">
    			<a href="javascript:;">
    				Design auto Save
    				<label>
                        <input type="checkbox" class="ace ace-switch ace-switch-4 btn-rotate js-autosave-design" name="switch-field-1" {{ subShopthemeDesign.autoSave == true ? 'checked' : '' }}>
                        <span class="lbl"></span>
                    </label>
    			</a>
    		</li>
			<li class="btn-block">
				<a href="javascript:void(0)" data-subshop_id="{{ subshop.id }}" data-action="default" data-route="office_brain_subshopbundle_subshopthemeadmin_subshopthemedesignstatus"  class="customize-btn js-btn-deign-confrim"><i class="fa fa-undo"></i> {{ "subshop.form.default" | trans }}</a>&nbsp;
				<a href="javascript:;" class="customize-btn js-theme-design-preview"><i class="fa fa-desktop"></i> {{ "subshop.form.preview" | trans }}</a>
				<a href="javascript:void(0)" data-subshop_id="{{ subshop.id }}" data-action="publish" data-route="office_brain_subshopbundle_subshopthemeadmin_subshopthemedesignstatus" class="customize-btn js-btn-deign-confrim"><i class="fa fa-floppy-o"></i> {{ "subshop.form.publish" | trans }}</a>
			</li>
			<div class="pink-border"></div>
		</ul>
	</div>
</div>
{% endblock theme_design_sidebar %}