{{ header }}{{ column_left }}
<div id="content">
<div class="page-header">
	<div class="container-fluid">
		<div class="pull-right">
			<button type="submit" form="form-slideshow-plus" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
			<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
		</div>
		<h1>{{ heading_title }}</h1>
		<ul class="breadcrumb">
			{% for breadcrumb in breadcrumbs %}
			<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
			{% endfor %}
		</ul>
	</div>
</div>
<div class="container-fluid">
	{% if error_warning %}
	<script>
		usNotify('warning', '{{ error_warning }}');
	</script>
	{% endif %}
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
		</div>
		{% if error_empty_image %}
			<script>
				usNotify('warning', '{{ error_empty_image }}');
			</script>
		{% endif %}
		{% if error_empty_mobile_image %}
			<script>
				usNotify('warning', '{{ error_empty_mobile_image }}');
			</script>
		{% endif %}
		<div class="panel-body">
			<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-slideshow-plus" class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
					<div class="col-sm-10">
						<div class="toggle-group">
							<input type="checkbox" name="status" {% if status %}checked="checked"{% endif %} id="status" tabindex="1">
							<label for="status"></label>
							<div class="onoffswitch pull-left" aria-hidden="true">
								<div class="onoffswitch-label">
									<div class="onoffswitch-inner"></div>
									<div class="onoffswitch-switch"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group required">
					<label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
					<div class="col-sm-10">
						<input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/>
						{% if error_name %}
						<div class="text-danger">
							<script>
								usNotify('warning', '{{ error_name }}');
							</script>
						</div>
						{% endif %}
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label" for="banner_image_full">{{ entry_full_img }}</label>
					<div class="col-sm-10">
						<div class="toggle-group">
							<input type="checkbox" name="full" {% if full %}checked="checked"{% endif %} id="banner_image_full" tabindex="1">
							<label for="banner_image_full"></label>
							<div class="onoffswitch pull-left" aria-hidden="true">
								<div class="onoffswitch-label">
									<div class="onoffswitch-inner"></div>
									<div class="onoffswitch-switch"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<ul class="nav nav-tabs">
					<li id="sliders_view" class="active"><a href="#tab-settings_slides" data-toggle="tab"><i class="fa fa-picture-o" aria-hidden="true"></i> {{ text_slides }}</a></li>
					<li id="mini_banners_view"><a href="#tab-settings_mini_banners" data-toggle="tab"><i class="fa fa-th-large" aria-hidden="true"></i> {{ text_mini_banners }}</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-settings_slides">
						<div class="form-group row">
							<div class="col-sm-2">
								<ul class="nav nav-pills nav-stacked" id="settings">
									{% set image_row = 0 %}
									{% for oct_slideshow_plus_image in oct_slideshow_plus_images %}
									<li class="slide-li{{ image_row }}"><a href="#image-row{{ image_row }}" data-toggle="tab"><span class="delete-block-in" onclick="removeImage({{ image_row }});"><i class="fa fa-minus-circle"></i></span> {{ oct_slideshow_plus_image.title }}</a></li>
									{% set image_row = image_row + 1 %}
									{% endfor %}
								</ul>
								<ul class="nav nav-pills nav-stacked" style="margin-top: 10px;">
									<li><a href="javascript:;" onclick="addImage(); updateActive(); return false;" id="add_slide"><i class="fa fa-plus-circle"></i> {{ entry_add_new_slide }}</a></li>
								</ul>
							</div>
							<div class="col-sm-10">
								<div class="tab-content" id="slideshow-setting-block">
									{% set image_row = 0 %}
									{% for oct_slideshow_plus_image in oct_slideshow_plus_images %}
									<div class="tab-pane" id="image-row{{ image_row }}">
										<div class="col-sm-12">
											<legend style="padding-bottom:10px;" class="clearfix">
												<div class="pull-left">{{ text_settings_slides }}</div>
											</legend>
											<ul class="nav nav-tabs" id="language_slide{{ image_row }}">
												{% for language in languages %}
												<li><a href="#slide_language{{ language.language_id }}-{{ image_row }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />  {{ language.name }}</a></li>
												{% endfor %}
											</ul>
											<div class="tab-content">
												{% for language in languages %}
												<div class="tab-pane" id="slide_language{{ language.language_id }}-{{ image_row }}">
													<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}>
														<label class="col-sm-2 control-label" for="input-title{{ language.language_id }}">{{ entry_title }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][oct_slideshow_plus_image_description][{{ language.language_id }}][title]" value="{{ oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id] is defined ? oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id].title : '' }}" placeholder="{{ entry_title }}" class="form-control"/>
															{% if (error_oct_slideshow_plus_image[image_row][language.language_id] is defined) %}
															<div class="text-danger">
																<script>
																	usNotify('warning', '{{ error_oct_slideshow_plus_image[image_row][language.language_id] }}');
																</script>
															</div>
															{% endif %}
														</div>
													</div>
													<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}>
														<label class="col-sm-2 control-label" for="input-button{{ language.language_id }}">{{ entry_button }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][oct_slideshow_plus_image_description][{{ language.language_id }}][button]" value="{{ oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id] is defined ? oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id].button : '' }}" placeholder="{{ entry_title }}" class="form-control"/>
														</div>
													</div>
													<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}>
														<label class="col-sm-2 control-label" for="input-description{{ language.language_id }}">{{ entry_description }}</label>
														<div class="col-sm-10">
															<textarea name="oct_slideshow_plus_image[{{ image_row }}][oct_slideshow_plus_image_description][{{ language.language_id }}][description]" class="form-control">{{ oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id] is defined ? oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id].description : '' }}</textarea>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label" for="input-link{{ language.language_id }}">{{ entry_link }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][oct_slideshow_plus_image_description][{{ language.language_id }}][link]" value="{{ oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id] is defined ? oct_slideshow_plus_image.oct_slideshow_plus_image_description[language.language_id].link : '' }}" placeholder="{{ entry_link }}" class="form-control"/>
														</div>
													</div>
													<div class="form-group">
														<div class="col-sm-6">
															<label class="col-sm-4 control-label" for="slide-banner_image">{{ entry_image }}</label>
															<div class="col-sm-8">
																<a href="" id="thumb-image{{ image_row }}{{ language.language_id }}" data-toggle="image" class="img-thumbnail"><img src="{{ oct_slideshow_plus_image.thumb[language.language_id] is defined ? oct_slideshow_plus_image.thumb[language.language_id] : placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
																<input type="hidden" name="oct_slideshow_plus_image[{{ image_row }}][image][{{ language.language_id }}]" value="{{ oct_slideshow_plus_image.image[language.language_id] is defined ? oct_slideshow_plus_image.image[language.language_id] : '' }}" id="input-image{{ image_row }}{{ language.language_id }}" />
															</div>
														</div>
														<div class="col-sm-6 oct-slide-mobile_image">
															<label class="col-sm-4 control-label" for="slide-mobile_image">{{ entry_mobile_image }}</label>
															<div class="col-sm-8">
																<a href="" id="thumb-mobile_image{{ image_row }}{{ language.language_id }}" data-toggle="image" class="img-thumbnail"><img src="{{ oct_slideshow_plus_image.mobile_thumb[language.language_id] is defined ? oct_slideshow_plus_image.mobile_thumb[language.language_id] : placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
																<input type="hidden" name="oct_slideshow_plus_image[{{ image_row }}][mobile_image][{{ language.language_id }}]" value="{{ oct_slideshow_plus_image.mobile_image[language.language_id] is defined ? oct_slideshow_plus_image.mobile_image[language.language_id] : '' }}" id="input-mobile_image{{ image_row }}{{ language.language_id }}" />
															</div>
														</div>
													</div>
												</div>
												{% endfor %}
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label" for="input-sort-order">{{ entry_sort_order }}</label>
												<div class="col-sm-10">
													<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][sort_order]" value="{{ oct_slideshow_plus_image.sort_order }}" placeholder="{{ entry_sort_order }}" class="form-control"/>
												</div>
											</div>
											<div class="is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_background_color }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][background_color]" value="{{ oct_slideshow_plus_image['background_color'] }}" placeholder="{{ entry_background_color }}" class="form-control spectrum"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_title_color }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][title_color]" value="{{ oct_slideshow_plus_image.title_color }}" placeholder="{{ entry_title_color }}" class="form-control spectrum"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_text_color }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][text_color]" value="{{ oct_slideshow_plus_image.text_color }}" placeholder="{{ entry_text_color }}" class="form-control spectrum"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_button_color }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][button_color]" value="{{ oct_slideshow_plus_image.button_color }}" placeholder="{{ entry_button_color }}" class="form-control spectrum"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_button_background }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][button_background]" value="{{ oct_slideshow_plus_image.button_background }}" placeholder="{{ entry_button_background }}" class="form-control spectrum"/>
													</div>
												</div>

												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-button_color_hover">{{ entry_button_color_hover }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][button_color_hover]" value="{{ oct_slideshow_plus_image.button_color_hover }}" placeholder="{{ entry_button_color_hover }}" class="form-control spectrum"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="slide-button_background_hover">{{ entry_button_background_hover }}</label>
													<div class="col-sm-10">
														<input type="text" name="oct_slideshow_plus_image[{{ image_row }}][button_background_hover]" value="{{ oct_slideshow_plus_image.button_background_hover }}" placeholder="{{ entry_button_background_hover }}" class="form-control spectrum"/>
													</div>
												</div>
											</div>
										</div>
										<script>
											$('#language_slide{{ image_row }} a:first').tab('show');
										</script>
									</div>
									{% set image_row = image_row + 1 %}
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-settings_mini_banners">
						<div class="form-group row">
							<div class="col-sm-2">
								<ul class="nav nav-pills nav-stacked" id="mini-banner-settings">
									{% set mini_banner_row = 0 %}
									{% for mini_banner in oct_mini_banners %}
									<li class="mini-banner-li{{ mini_banner_row }}"><a href="#mini-banner-row{{ mini_banner_row }}" data-toggle="tab"><span class="delete-block-in" onclick="removeMiniBanner({{ mini_banner_row }});"><i class="fa fa-minus-circle"></i></span> {{ mini_banner.title }}</a></li>
									{% set mini_banner_row = mini_banner_row + 1 %}
									{% endfor %}
								</ul>
								<ul class="nav nav-pills nav-stacked" style="margin-top: 10px;">
									<li><a href="javascript:;" onclick="addMiniBanner(); return false;" id="add_mini_banner"><i class="fa fa-plus-circle"></i> {{ entry_add_mini_banner }}</a></li>
								</ul>
							</div>
							<div class="col-sm-10">
								<div class="tab-content" id="mini-banner-setting-block">
									{% set mini_banner_row = 0 %}
									{% for mini_banner in oct_mini_banners %}
									<div class="tab-pane" id="mini-banner-row{{ mini_banner_row }}">
										<div class="col-sm-12">
											<legend style="padding-bottom:10px;" class="clearfix">
												<div class="pull-left">{{ text_settings_mini_banner }}</div>
											</legend>
											<ul class="nav nav-tabs" id="language_mini_banner{{ mini_banner_row }}">
												{% for language in languages %}
												<li><a href="#mini_banner_language{{ language.language_id }}-{{ mini_banner_row }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />  {{ language.name }}</a></li>
												{% endfor %}
											</ul>
											<div class="tab-content">
												{% for language in languages %}
												<div class="tab-pane" id="mini_banner_language{{ language.language_id }}-{{ mini_banner_row }}">
													<div class="form-group">
														<label class="col-sm-2 control-label" for="input-mini-banner-title{{ language.language_id }}">{{ entry_mini_banner_title }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][mini_banner_description][{{ language.language_id }}][title]" value="{{ mini_banner.mini_banner_description[language.language_id] is defined ? mini_banner.mini_banner_description[language.language_id].title : '' }}" placeholder="{{ entry_mini_banner_title }}" class="form-control"/>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label" for="input-mini-banner-subtitle{{ language.language_id }}">{{ entry_mini_banner_subtitle }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][mini_banner_description][{{ language.language_id }}][subtitle]" value="{{ mini_banner.mini_banner_description[language.language_id] is defined ? mini_banner.mini_banner_description[language.language_id].subtitle : '' }}" placeholder="{{ entry_mini_banner_subtitle }}" class="form-control"/>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label" for="input-mini-banner-link{{ language.language_id }}">{{ entry_mini_banner_link }}</label>
														<div class="col-sm-10">
															<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][mini_banner_description][{{ language.language_id }}][link]" value="{{ mini_banner.mini_banner_description[language.language_id] is defined ? mini_banner.mini_banner_description[language.language_id].link : '' }}" placeholder="{{ entry_mini_banner_link }}" class="form-control"/>
														</div>
													</div>
												</div>
												{% endfor %}
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label" for="mini-banner-image">{{ entry_mini_banner_image }}</label>
												<div class="col-sm-10">
													<a href="" id="thumb-mini-banner-image{{ mini_banner_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ mini_banner.mini_thumb is defined ? mini_banner.mini_thumb : placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
													<input type="hidden" name="oct_mini_banner[{{ mini_banner_row }}][mini_image]" value="{{ mini_banner.mini_image is defined ? mini_banner.mini_image : '' }}" id="input-mini-banner-image{{ mini_banner_row }}" />
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label" for="input-mini-banner-sort-order">{{ entry_sort_order }}</label>
												<div class="col-sm-10">
													<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][sort_order]" value="{{ mini_banner.sort_order }}" placeholder="{{ entry_sort_order }}" class="form-control"/>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label" for="mini-banner-bg-color">{{ entry_mini_banner_bg_color }}</label>
												<div class="col-sm-10">
													<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][background_color]" value="{{ mini_banner.background_color }}" placeholder="{{ entry_mini_banner_bg_color }}" class="form-control spectrum"/>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label" for="mini-banner-text-color">{{ entry_mini_banner_text_color }}</label>
												<div class="col-sm-10">
													<input type="text" name="oct_mini_banner[{{ mini_banner_row }}][text_color]" value="{{ mini_banner.text_color }}" placeholder="{{ entry_mini_banner_text_color }}" class="form-control spectrum"/>
												</div>
											</div>
										</div>
										<script>
											$('#language_mini_banner{{ mini_banner_row }} a:first').tab('show');
										</script>
									</div>
									{% set mini_banner_row = mini_banner_row + 1 %}
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
	$('input[name=\'product\']').autocomplete({
		source: function(request, response) {
			$.ajax({
				url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
				dataType: 'json',
				cache: false,
				success: function(json) {
			    		response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['product_id']
						}
					}));
				}
			});
		},
		select: function(item) {
	    		$('input[name=\'product\']').val('');
			$('#discount-product' + item['value']).remove();
			$('#discount-product').append('<div id="discount-product' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="oct_discount_products[]" value="' + item['value'] + '" /></div>');
		}
	});

	$('#discount-product').delegate('.fa-minus-circle', 'click', function() {
		$(this).parent().remove();
	});
</script>
<script>
	var image_row = {{ image_row }};

	function addImage() {
		html  = '<div class="tab-pane" id="image-row' + image_row + '">';
		html += '<div class="col-sm-12">';
		html += '<legend style="padding-bottom:10px;" class="clearfix"><div class="pull-left">{{ text_settings_slides }}</div></legend>';
		html += '<ul class="nav nav-tabs" id="language_slide' + image_row + '">';
		{% for language in languages %}
		html += '<li><a href="#slide_language{{ language.language_id }}-' + image_row + '" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />  {{ language.name }}</a></li>';
		{% endfor %}
		html += '</ul>';
		html += '<div class="tab-content">';
		{% for language in languages %}
		html += '<div class="tab-pane" id="slide_language{{ language.language_id }}-' + image_row + '">';
		html += '<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}><label class="col-sm-2 control-label" for="input-title{{ language.language_id }}">{{ entry_title }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][oct_slideshow_plus_image_description][{{ language.language_id }}][title]" value="" placeholder="{{ entry_title }}" class="form-control"/></div></div>';
		html += '<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}><label class="col-sm-2 control-label" for="input-button{{ language.language_id }}">{{ entry_button }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][oct_slideshow_plus_image_description][{{ language.language_id }}][button]" value="" placeholder="{{ entry_title }}" class="form-control"/></div></div>';
		html += '<div class="form-group is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}><label class="col-sm-2 control-label" for="input-description{{ language.language_id }}">{{ entry_description }}</label><div class="col-sm-10"><textarea name="oct_slideshow_plus_image[' + image_row + '][oct_slideshow_plus_image_description][{{ language.language_id }}][description]" class="form-control"></textarea></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-link{{ language.language_id }}">{{ entry_link }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][oct_slideshow_plus_image_description][{{ language.language_id }}][link]" value="" placeholder="{{ entry_link }}" class="form-control"/></div></div>';
		html += '<div class="form-group"><div class="col-sm-6"><label class="col-sm-4 control-label" for="slide-banner_image">{{ entry_image }}</label><div class="col-sm-8"><a href="" id="thumb-image' + image_row + '{{ language.language_id }}" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="oct_slideshow_plus_image[' + image_row + '][image][{{ language.language_id }}]" value="" id="input-image' + image_row + '{{ language.language_id }}" /></div></div><div class="col-sm-6 oct-slide-mobile_image"><label class="col-sm-4 control-label" for="slide-mobile_image">{{ entry_mobile_image }}</label><div class="col-sm-8"><a href="" id="thumb-mobile_image' + image_row + '{{ language.language_id }}" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="oct_slideshow_plus_image[' + image_row + '][mobile_image][{{ language.language_id }}]" value="" id="input-mobile_image' + image_row + '{{ language.language_id }}" /></div></div></div>';
		html += '</div>';
		{% endfor %}
		html += '</div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-sort-order">{{ entry_sort_order }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control"/></div></div>';
		html += '<div class="is_not_full" {% if full is defined and full %}style="display:none;"{% endif %}>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_background_color }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][background_color]" value="{{ oct_default_colors.background_color }}" placeholder="{{ entry_background_color }}" class="form-control spectrum"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_title_color }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][title_color]" value="{{ oct_default_colors.title_color }}" placeholder="{{ entry_title_color }}" class="form-control spectrum"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_text_color }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][text_color]" value="{{ oct_default_colors.text_color }}" placeholder="{{ entry_text_color }}" class="form-control spectrum"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_button_color }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][button_color]" value="{{ oct_default_colors.button_color }}" placeholder="{{ entry_button_color }}" class="form-control spectrum"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="slide-banner_image_button_color">{{ entry_button_background }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][button_background]" value="{{ oct_default_colors.button_background }}" placeholder="{{ entry_button_background }}" class="form-control spectrum"/></div></div><div class="form-group"><label class="col-sm-2 control-label" for="slide-button_color_hover">{{ entry_button_color_hover }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][button_color_hover]" value="{{ oct_default_colors.button_color_hover }}" placeholder="{{ entry_button_color_hover }}" class="form-control spectrum"/></div></div><div class="form-group"><label class="col-sm-2 control-label" for="slide-button_background_hover">{{ entry_button_background_hover }}</label><div class="col-sm-10"><input type="text" name="oct_slideshow_plus_image[' + image_row + '][button_background_hover]" value="{{ oct_default_colors.button_background_hover }}" placeholder="{{ entry_button_background_hover }}" class="form-control spectrum"/></div></div>';
		html += '</div>';
		html += '</div>';
		html += '</div>';

		html2 = "<li class='slide-li" + image_row + "'><a href='#image-row" + image_row + "' data-toggle='tab'><span class='delete-block-in' onclick='removeImage(" + image_row + ");'><i class='fa fa-minus-circle'></i></span> {{ entry_new_slide }}</a></li>";

		$('#slideshow-setting-block').append(html);
		$('#settings').append(html2);

		$('#settings li').removeClass('active');

		$("#settings .slide-li" + image_row + " a").tab('show');

		image_row++;

		initSpectrum();

		checkFullImage();

		if ($('#banner_image_full').is(":checked")) {
		    $(".is_not_full").hide();
		} else {
		    $(".is_not_full").show();
		}
	}

	function removeImage(image_row) {
		$("#image-row" + image_row).remove();
		$(".slide-li" + image_row).remove();

		$('#settings a:first').tab('show');
	}
</script>
<script>
	var mini_banner_row = {{ mini_banner_row }};

	function addMiniBanner() {
		html  = '<div class="tab-pane" id="mini-banner-row' + mini_banner_row + '">';
		html += '<div class="col-sm-12">';
		html += '<legend style="padding-bottom:10px;" class="clearfix"><div class="pull-left">{{ text_settings_mini_banner }}</div></legend>';
		html += '<ul class="nav nav-tabs" id="language_mini_banner' + mini_banner_row + '">';
		{% for language in languages %}
		html += '<li><a href="#mini_banner_language{{ language.language_id }}-' + mini_banner_row + '" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />  {{ language.name }}</a></li>';
		{% endfor %}
		html += '</ul>';
		html += '<div class="tab-content">';
		{% for language in languages %}
		html += '<div class="tab-pane" id="mini_banner_language{{ language.language_id }}-' + mini_banner_row + '">';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-mini-banner-title{{ language.language_id }}">{{ entry_mini_banner_title }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][mini_banner_description][{{ language.language_id }}][title]" value="" placeholder="{{ entry_mini_banner_title }}" class="form-control"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-mini-banner-subtitle{{ language.language_id }}">{{ entry_mini_banner_subtitle }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][mini_banner_description][{{ language.language_id }}][subtitle]" value="" placeholder="{{ entry_mini_banner_subtitle }}" class="form-control"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-mini-banner-link{{ language.language_id }}">{{ entry_mini_banner_link }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][mini_banner_description][{{ language.language_id }}][link]" value="" placeholder="{{ entry_mini_banner_link }}" class="form-control"/></div></div>';
		html += '</div>';
		{% endfor %}
		html += '</div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="mini-banner-image">{{ entry_mini_banner_image }}</label><div class="col-sm-10"><a href="" id="thumb-mini-banner-image' + mini_banner_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="oct_mini_banner[' + mini_banner_row + '][mini_image]" value="" id="input-mini-banner-image' + mini_banner_row + '" /></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="input-mini-banner-sort-order">{{ entry_sort_order }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="mini-banner-bg-color">{{ entry_mini_banner_bg_color }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][background_color]" value="{{ oct_default_mini_banner_colors.background_color }}" placeholder="{{ entry_mini_banner_bg_color }}" class="form-control spectrum"/></div></div>';
		html += '<div class="form-group"><label class="col-sm-2 control-label" for="mini-banner-text-color">{{ entry_mini_banner_text_color }}</label><div class="col-sm-10"><input type="text" name="oct_mini_banner[' + mini_banner_row + '][text_color]" value="{{ oct_default_mini_banner_colors.text_color }}" placeholder="{{ entry_mini_banner_text_color }}" class="form-control spectrum"/></div></div>';
		html += '</div>';
		html += '</div>';

		html2 = "<li class='mini-banner-li" + mini_banner_row + "'><a href='#mini-banner-row" + mini_banner_row + "' data-toggle='tab'><span class='delete-block-in' onclick='removeMiniBanner(" + mini_banner_row + ");'><i class='fa fa-minus-circle'></i></span> {{ entry_new_mini_banner }}</a></li>";

		$('#mini-banner-setting-block').append(html);
		$('#mini-banner-settings').append(html2);

		$('#mini-banner-settings li').removeClass('active');

		$('#sliders_view').removeClass('active');
		$('#tab-settings_slides').removeClass('active');

		$('#mini_banners_view').addClass('active');
		$('#tab-settings_mini_banners').addClass('active');

		$("#mini-banner-settings .mini-banner-li" + mini_banner_row + " a").tab('show');

		$('#language_mini_banner' + mini_banner_row + ' a:first').tab('show');

		mini_banner_row++;

		initSpectrum();
	}

	function removeMiniBanner(mini_banner_row) {
		$("#mini-banner-row" + mini_banner_row).remove();
		$(".mini-banner-li" + mini_banner_row).remove();

		$('#mini-banner-settings a:first').tab('show');
	}

	function updateActiveMiniBanner() {
		$('.nav.nav-tabs').each(function () {
			$(this).children().children().first().tab('show');
		});
	}

	$('#mini-banner-settings a:first').tab('show');
</script>
<script>
	function initSpectrum() {
		$(".spectrum").spectrum({
			preferredFormat: "rgb",
			showInitial: true,
			showInput: true,
			showAlpha: true,
			showPalette: true,
			palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
		});
	}

	initSpectrum();
</script>
<script>
	function updateActive() {
		$('.nav.nav-tabs').each(function () {
			$(this).children().children().first().tab('show');
		});
	}

	$('#settings a:first').tab('show');

	function checkFullImage() {
			const currentState = $('#banner_image_full').is(":checked");

			if (currentState === false) {
				$(".oct-slide-mobile_image").css('display', 'none');
			}
	}

	checkFullImage();

</script>
<script>
$(function() {
	$('#status_additional_banners').change(function() {
        var $input = $(this);

        if ($input.is(":checked")) {
            $("#discount_products_view").slideDown('slow');
            $("#position_view").slideDown('slow');
        } else {
            $("#discount_products_view").slideUp('slow');
            $("#position_view").slideUp('slow');
            $("#sliders_view a").click();
        }
    });

	$('#banner_image_full').change(function() {
        var $input_full = $(this);

        if ($input_full.is(":checked")) {
            $(".is_not_full").slideUp('slow');
						$(".oct-slide-mobile_image").slideDown('slow');
        } else {
            $(".is_not_full").slideDown('slow');
						$(".oct-slide-mobile_image").slideUp('slow');
        }
    });
});
</script>
{{ footer }}
