{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form-banner" 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_edit }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-banner" 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">
						<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="input-banner">{{ entry_banner }}</label>
						<div class="col-sm-10">
							<select name="banner_id" id="input-banner" class="form-control">
								<option value="">{{ text_select }}</option>
								{% for banner in banners %}
									<option value="{{ banner.banner_id }}" {% if (banner.banner_id == banner_id) %}selected="selected"{% endif %}>{{ banner.name }}</option>
								{% endfor %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-show_in_category">{{ entry_show_in_categories }}</label>
						<div class="col-sm-10">
							<div class="well well-sm" style="min-height:150px;max-height:300px;overflow: auto;">
								<table class="table table-striped">
									{% for category in categories %}
									<tr>
										<td class="checkbox">
											<label>
											{% if category.category_id in show_in_categories %}
											<input type="checkbox" name="show_in_categories[]" value="{{ category.category_id }}" checked="checked" />
											{{ category.name }}
											{% else %}
											<input type="checkbox" name="show_in_categories[]" value="{{ category.category_id }}" />
											{{ category.name }}
											{% endif %}
											</label>
										</td>
									</tr>
									{% endfor %}
								</table>
							</div>
							<a onclick="$(this).parent().find(':checkbox').prop('checked', true);">{{ text_select_all }}</a> / <a onclick="$(this).parent().find(':checkbox').prop('checked', false);">{{ text_unselect_all }}</a>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-product"><span data-toggle="tooltip" title="{{ help_product }}">{{ entry_show_in_products }}</span></label>
						<div class="col-sm-10">
							<input type="text" name="product_name" value="" placeholder="{{ entry_show_in_products }}" id="input-product" class="form-control" />
							<div id="featured-product" class="well well-sm" style="height: 150px; overflow: auto;">
								{% for product in products %}
								<div id="featured-product{{ product.product_id }}"><i class="fa fa-minus-circle"></i> {{ product.name }}
									<input type="hidden" name="show_in_products[]" value="{{ product.product_id }}" />
								</div>
								{% endfor %}
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-6">
							<label class="col-sm-4 control-label" for="input-width">{{ entry_width }}</label>
							<div class="col-sm-8">
								<div class="input-group">
									<input type="text" name="width" value="{{ width }}" placeholder="{{ entry_width }}" id="input-width" class="form-control" />
									<span class="input-group-addon">px</span>
								</div>
								{% if error_width %}
								<div class="text-danger">
									<script>
										usNotify('warning', '{{ error_width }}');
									</script>
								</div>
								{% endif %}
							</div>
						</div>
						<div class="col-sm-6">
							<label class="col-sm-2 control-label" for="input-height">{{ entry_height }}</label>
							<div class="col-sm-10">
								<div class="input-group">
									<input type="text" name="height" value="{{ height }}" placeholder="{{ entry_height }}" id="input-height" class="form-control" />
									<span class="input-group-addon">px</span>
								</div>
								{% if error_height %}
								<div class="text-danger">
									<script>
										usNotify('warning', '{{ error_height }}');
									</script>
								</div>
								{% endif %}
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
$('input[name=\'product_name\']').autocomplete({
	source: function(request, response) {
		$.ajax({
			url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: item['name'],
						value: item['product_id']
					}
				}));
			}
		});
	},
	select: function(item) {
		$('input[name=\'product_name\']').val('');
		$('#featured-product' + item['value']).remove();
		$('#featured-product').append('<div id="featured-product' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="show_in_products[]" value="' + item['value'] + '" /></div>');
	}
});
$('#featured-product').delegate('.fa-minus-circle', 'click', function() {
	$(this).parent().remove();
});
</script>
{{ footer }}