<div class="media-gallery-tab-content content-wrapper">
	<!-- Toggle -->
	<div class="row" ng-hide="mgService.mgViewToggle" >
		<div class="col-md-3">
			<!--[if !IE]>-->
			<button type="button" class="btn btn-lg btn-primary mg-toggle" ng-click="mgService.mgViewToggle = !mgService.mgViewToggle;">
				<span ><i class="fa fa-plus"></i>&nbsp;Create Media Gallery</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="mgService.userPageSizeSelection" ng-options="pagesize.size as pagesize.size for pagesize in mgService.userPageSizes" ng-change="mgService.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" ng-click="mgService.search(mgService.searchTerm);">Search</button>
				<input type="text" ng-model="mgService.searchTerm" placeholder="&#xf002;&nbsp;Search media galleries." style="font-family:Arial, FontAwesome" ng-keyup="$event.keyCode == 13 ? mgService.search(mgService.searchTerm) : null">
			</div>
		</div>
	</div>
	<!-- Select View -->
	<div class="select-mg-view" ng-hide="mgService.mgViewToggle">
		<table class="mg-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="mgService.sort('name');">
						<span class="name-head-text">Name</span>
						<i class="fa fa-sort sort-icon" ng-hide="mgService.sort_by == 'name'"></i>
						<i class="fa fa-sort-asc sort-icon" ng-show="mgService.sort_by == 'name' && mgService.direction =='asc'"></i>
						<i class="fa fa-sort-desc sort-icon" ng-show="mgService.sort_by == 'name' && mgService.direction =='desc'"></i>
					</th>
					<th class="table-header description-head">
						<span class="description-head-text">Description</span>
					</th>
					<th class="table-header assets-head">
						<span class="assets-head-text">Assets</span>
					</th>
					<th class="table-header date-head sortable" ng-click="mgService.sort('created_at');">
						<span class="date-head-text">Date</span>
						<i class="fa fa-sort sort-icon" ng-hide="mgService.sort_by == 'created_at'"></i>
						<i class="fa fa-sort-asc sort-icon" ng-show="mgService.sort_by == 'created_at' && mgService.direction =='asc'"></i>
						<i class="fa fa-sort-desc sort-icon" ng-show="mgService.sort_by == 'created_at' && mgService.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="mgService.mgList.length">
				<tr ng-repeat="mg in mgService.mgList | startFrom: ((mgService.currentPage - 1) * mgService.userPageSizeSelection) % mgService.stats.page_size | limitTo:mgService.userPageSizeSelection">
					<td class="action-cell">
						<div class="content-cell-wrapper">
							<div class="img-cell-wrapper">
								<button type="button" class="btn btn-success insert-mg-button" ng-click="insertMG(mg)" ng-disabled="disableInsert">Insert</button>
							</div>
						</div>
					</td>
					<td class="preview-cell">
						<div class="content-cell-wrapper">
							<div class="img-cell-wrapper">
								<div class="backdrop">
									<img ng-src="{{mg.thumbnail_image_url}}">
								</div>
							</div>
						</div>
					</td>
					<td class="name-cell">
						<div class="content-cell-wrapper">
							<span class="mg-name">{{mg.name}}</span>
						</div>
					</td>
					<td class="description-cell">
						<div class="content-cell-wrapper">
							<span class="mg-description">{{mg.description}}</span>
						</div>
					</td>
					<td class="assets-cell">
						<div class="content-cell-wrapper">
							<a class="preview-link" ng-click="openLightbox(mg.elements, 0)">
								<span class="mg-assets">{{mg.elements.length}}</span>
							</a>
						</div>
					</td>
					<td class="date-cell">
						<div class="content-cell-wrapper">
							<span class="mg-date">{{mg.created_at}}</span>
						</div>
					</td>
					<td class="edit-cell">
						<div class="content-cell-wrapper">
							<!--[if (!IE) | (gte IE 10)]>-->
							<div class="edit-wrapper">
								<button type="button" class="btn btn-success btn-mg-edit" ng-click="loadMediaGallery(mg, false);">Edit</button>
								<button type="button" class="btn btn-success btn-duplicate" ng-click="loadMediaGallery(mg, true);">Duplicate</button>
							</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="deleteMG(mg)">
									<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="mg-table-placeholder placeholder" ng-hide="mgService.mgList.length">
			<p> No galleries 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="mgService.currentPage == 1" ng-click="mgService.getFirst();">
					<i class="fa fa-angle-double-left"></i>
					<span>First</span>
				</button>
				<button type="button" class="btn btn-primary prev-page" ng-disabled="mgService.currentPage == 1" ng-click="mgService.getPrevious();">
					<i class="fa fa-angle-left"></i>
					<span>Previous</span>
				</button>
				<div class="page-count">
					<span ng-show="mgService.getTotalUserPages() > 1">Page {{mgService.currentPage}} of {{mgService.getTotalUserPages()}}
					</span>
					<span ng-hide="mgService.getTotalUserPages() > 1">Page 1 of 1</span>
				</div>
				<button type="button" class="btn btn-primary next-page" ng-disabled="mgService.currentPage == mgService.getTotalUserPages()" ng-click="mgService.getNext();">
					<span>Next</span>
					<i class="fa fa-angle-right"></i>
				</button>
				<button type="button" class="btn btn-primary last-page" ng-disabled="mgService.currentPage == mgService.getTotalUserPages()" ng-click="mgService.getLast();">
					<span>Last</span>
					<i class="fa fa-angle-double-right"></i>
				</button>
			</div>
		</div>
	</div>
	<!--[if (!IE) | (gte IE 10)]>-->
	<newmg/>
	<!--<![endif]-->
</div>