<div class="video-tab-content content-wrapper" id="video-tab-content">
	<!-- Toggle -->
	<div class="row">
		<div class="col-md-3">
			<!--[if !IE]>-->
			<button type="button" class="btn btn-lg btn-primary video-toggle" ng-click="videoService.videoViewToggle = !videoService.videoViewToggle;">
				<span ng-show="videoService.videoViewToggle"><i class="fa fa-times"></i>&nbsp;Close Form</span>
				<span ng-hide="videoService.videoViewToggle"><i class="fa fa-plus"></i>&nbsp;Add Video/Multimedia</span>
			</button>
			<!--<![endif]-->
		</div>
		<div class="col-md-3 col-md-offset-2 select-page-size">
			<div class="page-size-wrapper">
				<span>Items per page: </span>
				<select ng-model="videoService.userPageSizeSelection" ng-options="pagesize.size as pagesize.size for pagesize in videoService.userPageSizes" ng-change="videoService.getFirst();"></select>
			</div>
		</div>
		<div class="col-md-4 search-bar">
			<div class="search-content-wrapper">
				<button type="button" class="btn btn-primary btn-lg">Search</button>
				<input type="text" ng-model="videoService.searchTerm" placeholder="&#xf002;&nbsp;Search videos/multimedia." style="font-family:Arial, FontAwesome" ng-keyup="$event.keyCode == 13 ? videoService.search(videoService.searchTerm) : null">
			</div>
		</div>
	</div>
	<!-- Add View -->

	<!--[if !IE]>-->
	<div class="add-video-view" ng-show="videoService.videoViewToggle">
		<form class="video-form" id="newVideoForm" enctype="multipart/form-data">
			<label>Name*:</label><br/>
			<textarea class="video-name-input" ng-model="videoService.newVideoFormData.name"></textarea><br/>
			<label>Description*:</label><br/>
			<textarea class="video-description-input" ng-model="videoService.newVideoFormData.description"></textarea><br/>
			<label>Credit:</label><br/>
			<textarea class="video-credit-input" ng-model="videoService.newVideoFormData.credit"></textarea><br/>
			<label>Video URL/Embed*:</label><br/>
			<textarea class="video-url-embed" ng-model="videoService.newVideoFormData.video_url"></textarea><br/>
			<label>Video Thumbnail**:</label><br/>
			<!-- <input type="file" name="thumbnailImage" id="newVideoThumbnailUpload" file-model="videoService.newVideoFormData.video_thumbnail_image"> -->
			<label class="video-thumbnail-upload main-video-form">
				<input type="file" name="thumbnailImage" id="newVideoThumbnailUpload" file-model="videoService.newVideoFormData.video_thumbnail_image">
				<span ng-hide="videoService.newVideoFormData.video_thumbnail_image">Upload Thumbnail (Optional)</span>
				<span ng-show="videoService.newVideoFormData.video_thumbnail_image">{{videoService.newVideoFormData.video_thumbnail_image.name}}</span>
			</label>
			<!-- <span ng-show="videoService.newVideoFormData.video_thumbnail_image"><i class="fa fa-times"></i></span><br/> -->
			<button class="btn btn-success btn-lg" ng-disabled="!videoService.newVideoFormData.name || !videoService.newVideoFormData.description || !videoService.newVideoFormData.video_url;" ng-click="addVideo()">Add Video/Multimedia</button><br/>
			<div class="fine-print">
				<p>* : Required</p>
				<p>** : Uploaded thumbnail will overwrite thumbnail obtained from URL. </p>
			</div>
		</form>			
	</div>
	<!--<![endif]-->

	<!-- Select View -->
	<div class="select-video-view">
		<table class="video-table">
				<colgroup class="row">
				<col span="1" class="col-sm-1">
				<col span="1" class="col-sm-2">
				<col span="1" class="col-sm-2">
				<col span="1" class="col-sm-3">
				<col span="1" class="col-sm-1">
				<col span="1" class="col-sm-1">
				<col span="1" class="col-sm-1">
				<col span="1" class="col-sm-1">
			</colgroup>
			<thead>
				<tr>
					<th class="table-header action-head">
						<span class="action-head-text">Action</span>
					</th>
					<th class="table-header preview-head">
						<span class="preview-head-text">Preview</span>
					</th>
					<th class="table-header name-head sortable" ng-click="videoService.sort('name');">
						<span class="name-head-text">Name</span>
						<i class="fa fa-sort sort-icon" ng-hide="videoService.sort_by == 'name'"></i>
						<i class="fa fa-sort-asc sort-icon" ng-show="videoService.sort_by == 'name' && videoService.direction =='asc'"></i>
						<i class="fa fa-sort-desc sort-icon" ng-show="videoService.sort_by == 'name' && videoService.direction =='desc'"></i>
					</th>
					<th class="table-header description-head">
						<span class="description-head-text">Description</span>
					</th>
					<th class="table-header credit-head sortable" ng-click="videoService.sort('credit');">
						<span class="credit-head-text">Credit</span>
						<i class="fa fa-sort sort-icon" ng-hide="videoService.sort_by == 'credit'"></i>
						<i class="fa fa-sort-asc sort-icon" ng-show="videoService.sort_by == 'credit' && videoService.direction =='asc'"></i>
						<i class="fa fa-sort-desc sort-icon" ng-show="videoService.sort_by == 'credit' && videoService.direction =='desc'"></i>
					</th>
					<th class="table-header date-head sortable" ng-click="videoService.sort('created_at');">
						<span class="date-head-text">Date</span>
						<i class="fa fa-sort sort-icon" ng-hide="videoService.sort_by == 'created_at'"></i>
						<i class="fa fa-sort-asc sort-icon" ng-show="videoService.sort_by == 'created_at' && videoService.direction =='asc'"></i>
						<i class="fa fa-sort-desc sort-icon" ng-show="videoService.sort_by == 'created_at' && videoService.direction =='desc'"></i>
					</th>
					<th class="table-header edit-head">
						<span class="edit-head-text">Edit</span>
					</th>
					<th class="table-header delete-head">
						<span class="delete-head-text">Delete</span>
					</th>
				</tr>
			</thead>
			<tbody  ng-show="videoService.videoList.length">
				<tr ng-repeat="video in videoService.videoList | startFrom: ((videoService.currentPage - 1) * videoService.userPageSizeSelection) % videoService.stats.page_size | limitTo:videoService.userPageSizeSelection">
				<!-- <tr ng-repeat="video in videoService.videoList"> -->
					<td class="action-cell">
						<div class="content-cell-wrapper">
							<div class="img-cell-wrapper">
								<button type="button" class="btn btn-success insert-video-button" ng-show="currentActiveTab.activeTab==2" ng-click="insertVideo(video)" ng-disabled="disableInsert">Insert</button>
								<button type="button" class="btn btn-success add-video-button" ng-show="currentActiveTab.activeTab==3" ng-click="addElementToNewMG(video)">Add</button>
							</div>
						</div>
					</td>
					<td class="preview-cell">
						<div class="content-cell-wrapper">
							<div class="img-cell-wrapper">
								<div class="backdrop" ng-hide="editMode">
									<a class="preview-link" ng-click="openLightbox(videoService.videoList,$index)">
										<img  ng-src="{{video.thumbnail_image_url}}">
									</a>
								</div>
								<label ng-show="editMode" class="video-thumbnail-upload inline-video-form">
									<input type="file"  name="thumbnailImage" id="newVideoThumbnailUpload" file-model="video.edit_video_thumbnail_image">
									<span ng-hide="video.edit_video_thumbnail_image">Upload Thumbnail</span>
									<span ng-show="video.edit_video_thumbnail_image">{{video.edit_video_thumbnail_image.name}}</span>
								</label>
							</div>
						</div>
					</td>
					<td class="name-cell">
						<div class="content-cell-wrapper" ng-class="{'no-scroll': editMode}">
							<span ng-hide="editMode"class="video-name">{{video.name}}</span>
							<textarea ng-show="editMode" ng-model="video.editName" ng-init="video.editName=video.name"></textarea>
						</div>
					</td>
					<td class="description-cell">
						<div class="content-cell-wrapper" ng-class="{'no-scroll': editMode}">
							<span ng-hide="editMode" class="video-description">{{video.description}}</span>
							<textarea ng-show="editMode" ng-model="video.editDescription" ng-init="video.editDescription=video.description"></textarea>
						</div>
					</td>
					<td class="credit-cell">
						<div class="content-cell-wrapper" ng-class="{'no-scroll': editMode}">
							<span ng-hide="editMode" class="video-credit">{{video.credit}}</span>
							<textarea ng-show="editMode" ng-model="video.editCredit" ng-init="video.editCredit=video.credit"></textarea>
						</div>
					</td>
					<td class="date-cell">
						<div class="content-cell-wrapper">
							<span class="video-date">{{video.created_at}}</span>
						</div>
					</td>
					<td class="edit-cell">
						<div class="content-cell-wrapper">
							<!--[if (!IE) | (gte IE 10)]>-->
							<button ng-show="editMode" type="button" class="btn btn-success" ng-disabled="!video.editName || !video.editDescription" ng-click="editVideo(video); editMode = false; ">Save</button>
							<button ng-show="editMode" type="button" class="btn btn-danger" ng-click="editMode = false;">Cancel</button>
							<div class="img-cell-wrapper">
								<div ng-hide="editMode" class="edit-wrapper" ng-click="editMode = true;">
									<i class="fa fa-pencil fa-3x edit"></i>
								</div>
							</div>
							<!--<![endif]-->
							<!--[if lt IE 10]>
							<div class="img-cell-wrapper">
								<div class="edit-wrapper-ie" ng-click="ieAlert();">
									<span class="fa-stack fa-2x">
										<i class="fa fa-pencil fa-stack-1x"></i>
										<i class="fa fa-flip-horizontal fa-ban fa-stack-2x"></i>
									</span>
								</div>
							</div>
							<![endif]-->
						</div>
					</td>
					<td class="delete-cell">
						<div class="content-cell-wrapper">
							<div class="img-cell-wrapper">
								<!--[if (!IE) | (gte IE 10)]>-->
								<div class="trash-wrapper" ng-click="deleteVideo(video)">
									<i class="fa fa-trash fa-3x trash"></i>
								</div>
								<!--<![endif]-->
								<!--[if lt IE 10]>
								<div class="trash-wrapper-ie" ng-click="ieAlert();">
									<span class="fa-stack fa-2x">
										<i class="fa fa-trash fa-stack-1x"></i>
										<i class="fa fa-flip-horizontal fa-ban fa-stack-2x"></i>
									</span>
								</div>	
								<![endif]-->
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="video-table-placeholder placeholder" ng-hide="videoService.videoList.length">
			<p> No videos/multimedia available! </p>
		</div>
		<div class="pagination-controls row">
			<div class="col-md-6 col-md-offset-3 pagination-wrapper">
				<button type="button" class="btn btn-primary first-page" ng-disabled="videoService.currentPage == 1" ng-click="videoService.getFirst();">
					<i class="fa fa-angle-double-left"></i>
					<span>First</span>
				</button>
				<button type="button" class="btn btn-primary prev-page" ng-disabled="videoService.currentPage == 1" ng-click="videoService.getPrevious();">
					<i class="fa fa-angle-left"></i>
					<span>Previous</span>
				</button>
				<div class="page-count">
					<span ng-show="videoService.getTotalUserPages() > 1">Page {{videoService.currentPage}} of {{videoService.getTotalUserPages()}}
					</span>
					<span ng-hide="videoService.getTotalUserPages() > 1">Page 1 of 1</span>
				</div>
				<button type="button" class="btn btn-primary next-page" ng-disabled="videoService.currentPage == videoService.getTotalUserPages()" ng-click="videoService.getNext();">
					<span>Next</span>
					<i class="fa fa-angle-right"></i>
				</button>
				<button type="button" class="btn btn-primary last-page" ng-disabled="videoService.currentPage == videoService.getTotalUserPages()" ng-click="videoService.getLast();">
					<span>Last</span>
					<i class="fa fa-angle-double-right"></i>
				</button>
			</div>
		</div>
	</div>
</div>