<!--begin::Card-->
<style>
.image_area {
	position: relative;
}

img {
	display: block;
	max-width: 100%;
}

.preview {
	overflow: hidden;
	width: 160px; 
	height: 160px;
	margin: 10px;
	border: 1px solid red;
}

.modal-lg{
	max-width: 1000px !important;
}

.overlay {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	height: 0;
	transition: .5s ease;
	width: 100%;
}

.image_area:hover .overlay {
	height: 50%;
	cursor: pointer;
}

.text {
	color: #333;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
</style>
<div class="card card-custom gutter-b example example-compact">
	<div class="card-header">
		<h3 class="card-title"><?=$form_heading?>
		</h3>
	</div> 
	<?=form_open_multipart('',['class'=>'form','autocomplete'=>'off','onsubmit'=>'blockPage()'])?>
	<div class="card-body">		
		<div class="form-group row">
			<label class="col-lg-1 col-form-label text-lg-right">Video Album</label>
			<div class="col-lg-3">
				<select name="video_album_id" id="video_album_id" class="form-control" required>
					<?=$cmObj->get_video_album_title_options(set_value('video_album_id',$update_data['video_album_id'] ?? ''))?>
				</select>
				<?=$validation->showError('video_album_url')?>
			</div>
			<label class="col-lg-1 col-form-label text-lg-right">Embedded Code</label>
			<div class="col-lg-3">
				<textarea name="video_code" id="video_code" class="form-control" placeholder="Video Embedded Code"><?=set_value('video_code', $update_data['video_code'] ?? '')?></textarea>
			</div>
			<label class="col-lg-1 col-form-label text-lg-right">Status</label>
			<div class="col-lg-3">
				<select required name="status" id="status" class="form-control">
						<?=$cmObj->get_status_options(set_value('status',($update_data['status'] ?? '')))?>
				</select>
					<?=$validation->showError('status')?>
			</div>
		</div>
		<?php if($language_list){ ?>
			<div class="accordion accordion-toggle-arrow form-group" id="accordionLanguage">
			<?php foreach($language_list as $language){ ?>	
				<input type="hidden" name="video_gallery_ln_id_<?=$language['code']?>" value="<?=set_value('video_gallery_ln_id_'.$language['code'],$update_data['video_gallery_ln_id_'.$language['code']] ?? '')?>">
				<div class="card">
					<div class="card-header">
						<div class="card-title" data-toggle="collapse" data-target="#<?=$language['code']?>">
							<?=$language['name']?>
						</div>
					</div>
					<div id="<?=$language['code']?>" class="collapse show" data-parent="#accordionLanguage">
						<div class="card-body">
							<div class="form-group row">
								<label class="col-lg-1 col-form-label text-lg-right">Title</label>
								<div class="col-lg-5">
									<input type="text" name="title_<?=$language['code']?>" id="title_<?=$language['code']?>" value="<?=set_value('title_'.$language['code'],$update_data['title_'.$language['code']] ?? '')?>" class="form-control" placeholder="Title" required />					
									<?=$validation->showError('title_'.$language['code'])?>
								</div>
							</div>							
						</div>
					</div>
				</div>
			<?php } ?>
			</div>
		<?php } ?>		
	</div>
	<div class="card-footer">
		<div class="row">
			<div class="col-lg-12 text-center">
				<button type="submit" name="save" value="Save" class="btn btn-primary mr-2">Save</button>
			</div>
		</div>
	</div>
</form>
</div>