<div class='col-sm-8 text-left'> 
	<h3>Document Categories</h3>
	<hr>

	<!-- success/error message -->
	<div uib-alert ng-repeat="a in alert.alerts" ng-class="'alert-' + a.type" close="alert.closeAlert($index)">{{a.msg}}</div>

	<!-- ADD CATEGORY PANEL -->
	<div class='panel panel-primary'>
		<div class='panel-heading'>Add Category</div>
		<div class='panel-body'>
			<form ng-submit='addCategory(new_category)'>
				<label>Category</label>
				<input type="text" ng-model="new_category" class="form-control" required>
				<br>
				<button type="submit" class="btn btn-success">Add</button>
			</form>
		</div>
	</div>

	<!-- EDIT CATEGORY PANEL -->
	<div class='panel panel-primary' ng-init='getCategories()'>
		<div class='panel-heading'>Edit Categories</div>
		<!-- TO DO: Overflow not detected until page reloads -->
		<div class='panel-body' style="height:350px; overflow-y:scroll">
			<table class="table table-striped table-hover" style='margin:auto; width:100%'>
				<form class="form-inline">
					<div class="form-group">
						<label>Search</label>
						<input type="text" ng-model="search" class="form-control" placeholder="Search">
					</div>
				</form>    
				<thead>
					<tr>
						<th class="text-center">#</th>
						<th>Category Name</th>
						<th class="text-center">Edit</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat='c in categories|filter:search'>
						<td class='text-center'>{{$index + 1}}</td>
						<td>{{c.name}}</td>
						<td class='text-center'><button class="btn-default" ng-click='editCategory(c.id, c.name)'><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!-- EDIT CATEGORY MODAL -->
	<div class="modal fade" id="editModal" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header" style="padding:15px 15px;">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4><span class="glyphicon glyphicon-pencil"></span> Edit Category</h4>
				</div>
				<div class="modal-body" style="padding:40px 50px;">
					<button ng-click='removeCategory()' class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span> Delete</button>
					<br>
					<br>
					<form role="form" ng-submit='updateCategory()'>
						<div class="form-group">
							<label>Name</label>
							<input type="text" class="form-control" ng-model='updateName' required>
						</div>
						<br>
						<!-- TO DO: Don't show successful update message when no changes were made to the user -->
						<button type="submit" class="btn btn-success btn-block">Update</button>
						<br>
						<div class='alert alert-danger' ng-show='updateErrorMessage'>
							{{updateMessage}}
						</div>
						<div class='alert alert-success' ng-show='updateSuccessMessage'>
							{{updateMessage}}
						</div>
					</form>
				</div>
			</div>
		</div>
	</div> 	
</div>