{% set _id = 'store_' ~ store['store_id'] ~ '_video_' ~ video_id %}
<div id="{{ _id }}" class="tab-pane">
  <div class="col-sm-9">
	<ul class="nav nav-pills languageTabs">
		<li class="disabled"><a>Video Settings For Language:</a></li>
		{% for language in languages %}
			{% set _id = 'store_' ~ store['store_id'] ~ '_video_' ~ video_id ~ '_language_' ~ language['language_id'] %}
			<li {{ (loop.first) ? 'class="active"'  : '' }}> <a href="#{{ _id }}" data-toggle="pill">
					{{ language['name'] }}
					{% if language['flag'] %}
						<img src="{{ language['flag'] }}" title="{{ language['name'] }}"  alt="{{ language['name'] }}" />
					{% endif %}
			</a></li>
		{% endfor %}
	</ul>
  </div>
  <div class="col-sm-3 text-right"><a onclick="$('#form').submit();" class="btn btn-primary save-changes" title="{{ button_save }}"><i class="fa fa-check"></i>&nbsp;&nbsp;{{ button_save }}</a></div>
  <div class="clearfix"></div>

	<hr />

	<div class="tab-content">
    <input type="hidden" name="iProductVideo[{{ store['store_id'] }}][Videos][{{ video_id }}][title]" data-role="video-title" value="{{ (video['title'] is not empty) ? video['title'] : ('Video ' ~ video_id) }}" />
		<!-- Videos Settings Per Language -->
		{% for language in languages %}
			{% set _id = 'store_' ~ store['store_id'] ~ '_video_' ~ video_id ~ '_language_' ~ language['language_id'] %}
			{% set _vnb = 'iProductVideo[' ~ store['store_id'] ~ '][Videos][' ~ video_id ~ '][' ~ language['language_id']~ ']' %}
			{% if data['iProductVideo'][store['store_id']]['Videos'][video_id][language['language_id']] is not empty %}
				{% set _video = data['iProductVideo'][store['store_id']]['Videos'][video_id][language['language_id']] %}
			{% else %}
				{% set _video = {
					'LimitProducts': 'specific'
				} %}
			{% endif %}

			<div id="{{ _id }}" class="tab-pane {{ (loop.first) ? 'active'  : '' }}">
				<div class="video_editor container-fluid"><div class="row">
					<div class="col-xs-6">
						<label><h3>1. Choose video</h3></label>
						<div class="video_editor_wrap">
							<div class="iproductvideo-tab-container">
								<div class="iproductvideo-tab-menu">
									<div class="btn-group" data-toggle="buttons">
										<label class="btn btn-default {{ ((_video['VideoType'] is not empty and _video['VideoType'] == 'internet') or _video['VideoType'] is empty) ? 'active' : '' }}">
											<input type="radio" name="{{ _vnb }}[VideoType]" value="internet" {{ (_video['VideoType'] is not empty and _video['VideoType'] == 'internet') ? 'checked="checked"' : '' }}>Internet Video
										</label>
										<label class="btn btn-default {{ (_video['VideoType'] is not empty and _video['VideoType'] == 'uploaded') ? 'active' : '' }}">
											<input type="radio" name="{{ _vnb }}[VideoType]" value="uploaded" {{ (_video['VideoType'] is not empty and _video['VideoType'] == 'uploaded') ? 'checked="checked"' : '' }}>Uploaded Video
										</label>
									</div>
								</div>
								<div class="iproductvideo-tab">
									<div class="iproductvideo-tab-content active">
										<div class="row">
											<div class="col-xs-12 form-group">
												<label>Video URL:</label>
												<input class="form-control" placeholder="http://" type="text"  name="{{ _vnb }}[VideoURL]" value="{{ (_video['VideoURL'] is not empty) ? _video['VideoURL']   : '' }}"/><br />
												<span class="text-info">YouTube and Vimeo links are currently supported</span>
											</div>
										</div>
									</div>
									<div class="iproductvideo-tab-content">
										<div class="row">
											<div class="col-xs-12 form-group">
												<label>Uploaded Videos:</label>
												<div class="video_list uploaded_videos_list well" data-store-id="{{ store['store_id'] }}" data-video-id="{{ video_id }}" data-language-id="{{ language['language_id'] }}">
													{% if uploaded_videos is not empty %}
														{% for video_index, video in uploaded_videos %}
														  <div class="col-xs-3">
															<label class="video_wrap" for="{{ _id }}_localvideo_{{ loop.index0 }}" title="{{ video['name'] }}">
															  {% if 'uploaded_videos' in video['src'] %}
																<div class="btn-delete-video" data-video="{{ video['name'] }}">Delete this video&nbsp;&nbsp;<i class="fa fa-remove"></i></div>
															  {% endif %}
															  <input type="radio" name="{{ _vnb }}[LocalVideo]" id="{{ _id }}_localvideo_{{ video_index }}" value="{{ video['path'] }}" {{ (_video['LocalVideo'] is not empty and _video['LocalVideo'] == video['path']) ? 'checked="checked"' : '' }}/>
															  <div class="video" data-video-path="{{ video['path'] }}" data-store-id="{{ store['store_id'] }}" data-label-id="{{ video_index }}"  data-language-id="{{ language['language_id'] }}" data-rel="{{ _id }}_videodata">
																<img class="video_thumb" src="{{ video['img'] }}" title="{{ video['title'] }}" />
															  </div>
															</label>
															<span class="video-filename">{{ video['basepath'] }}</span>
														  </div>
														{% endfor %}
													{% else %}
														<span> No uploaded videos.<br /> Use the upload form below<br /> or put your videos in this server directory<br /> <b>/{{ modulePathVideo }}uploaded_videos</b>.</span>
													{% endif %}
												</div>
											</div>
										</div>

                    <a class="btn-regen-video-thumbs" style="cursor: pointer"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Re-generate selected video thumbnail</a>

										<!-- HR --><hr />
							
										<div class="video-upload">
											<div id="{{ _id }}_videouploadprogress" class="progress progress-striped active"><div class="progress-bar"></div></div>
											<a class="btn btn-primary">Upload Video
												<input class="form-control" id="{{ _id }}_videoupload" type="file" name="{{ _id }}_videoupload" data-rel="#{{ _id }}_videouploadprogress" accept="video/*">
											</a>
											<span class="fileSizeInfo">&nbsp;&nbsp;{{ text_max_size }} {{ maxSizeReadable }}</span>
											<a data-toggle="modal" class="needMoreSize" data-target="#help-modal">{{ text_max_size_learn }}</a>
										</div>
									</div>
									<hr />
									<div class="row">
										<div class="col-xs-6">
											<label class="checkbox">
												<input type="checkbox" name="{{ _vnb }}[MainImage]" value="1" {{ (_video['MainImage'] is not empty and _video['MainImage'] == 1) ? 'checked="checked"' : '' }} />
												Main product image<br />
												<span class="help">Check this if you want to replace the main product image with the video.</span>
											</label>
										</div>
										<div class="col-xs-6">
											<div class="row">
												<div class="col-xs-6"><label for="{{ _id }}_videosortorder">Video Sort Order</label></div>
												<div class="col-xs-6"><input id="{{ _id }}_videosortorder" type="number" min="0" class="form-control form-control-xs" name="{{ _vnb }}[SortOrder]" value="{{ (_video['SortOrder'] is not empty) ? _video['SortOrder']   : 0 }}" /></div>
											</div>
											<span class="help">This is the position in which the video will be placed between the product's additional images. If the <b>Main product image</b> is checked, this feature is disabled.</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<label><h3>2. Assign video to products</h3></label>
						<div class="row">
							<div class="col-xs-12">
								<label>{{ entry_video_limit_products }}</label>
								<select class="form-control toggle-fade-next" name="{{ _vnb }}[LimitProducts]">
									<option value="all"{{ (_video['LimitProducts'] is not empty and _video['LimitProducts'] == 'all') ? ' selected="selected"' : '' }}>{{ entry_all_products }}</option>
									<option value="specific"{{ (_video['LimitProducts'] is not empty and _video['LimitProducts'] == 'specific') ? ' selected="selected"' : '' }}>{{ entry_following_products }}</option>
								</select>
								<div {{ (_video['LimitProducts'] is empty or (_video['LimitProducts'] is not empty and _video['LimitProducts'] == 'all')) ? ' style="display:none;"' : '' }}>
									<input class="form-control products-autocomplete" placeholder="Autocomplete.." data-store-id="{{ store['store_id'] }}" data-video-id="{{ video_id }}" data-language-id="{{ language['language_id'] }}" type="text" />
									<div class="help" style="margin:5px 0 10px;color:#888;"><b>Tips:</b> Use <code>%</code> as wildcard, ex. <code>%per%car</code> to find "super car".</div>
									<div id="product-{{ _id }}" class="scrollbox">
										{% if (products is not empty) %}
											{% for product in products[store['store_id']]['Videos'][video_id][language['language_id']] %}
											<div id="product-{{ _id }}_{{ product['product_id'] }}"> {{ product['name'] }}<i class="fa fa-minus removeIcon"></i>
												<input type="hidden" name="{{ _vnb }}[LimitProductsList][]" value="{{ product['product_id'] }}" />
											</div>
											{% endfor %}
										{% endif %}

										{# auto assign filtered product for new video  #}
										{% if assignProduct is not empty %}
											<div id="product-{{ _id }}_{{ assignProduct.product_id }}"> {{ assignProduct.name }}<i class="fa fa-minus removeIcon"></i>
												<input type="hidden" name="{{ _vnb }}[LimitProductsList][]" value="{{ assignProduct.product_id }}" />
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div></div>
			</div>
		{% endfor %}
	</div>
</div>
