<div class="row" ng-controller="CabinetController">

	<div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{ currentDirectory }}</h3>
            </div>

            <div class="panel-body">
				<form class="form-inline pull-right" role="form">
					<div class="input-group">
						<input type="text" placeholder="Change Directory" class="form-control" ng-model="userDirectory">
						<span class="input-group-btn">
							<button type="submit" class="btn btn-default" ng-click="getDirectoryContents(userDirectory)">Go</button>
						</span>
					</div>
				</form>
				<span class="input-group-btn pull-left">
					<button type="button" class="btn btn-default btn-sm" ng-show="currentDirectory == '/'" disabled>Back</button>
					<button type="button" class="btn btn-default btn-sm" ng-click="goToParentDirctory()" ng-hide="currentDirectory == '/'">Back</button>
					<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#fileModal">New File</button>
					<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#folderModal">New Folder</button>
					<button type="button" class="btn btn-default btn-sm" ng-click="getDirectoryContents(currentDirectory)">Refresh</button>
				</span>
				<br />
				<hr/>
				<div class="table-responsive">
					<table class="table table-striped" align="center">
						<thead>
							<th>File Name</th>
							<th>Location</th>
							<th>Permissions</th>
							<th>Size</th>
							<th>Delete</th>
							<th>Edit</th>
						</thead>
						<tbody>
							<tr ng-repeat="item in directoryContents">
								<td ng-hide="item.directory">{{ item.name }}</td>
								<td ng-show="item.directory"><a href="javascript:;" ng-click="getDirectoryContents(item.path)">{{ item.name }}</a></td>
								<td class="text-muted"><i>{{ item.path }}</i></td>
								<td class="text-muted"><i>{{ item.permissions }}</i></td>
								<td class="text-muted"><i>{{ item.size }}</i></td>
								<td><a href="" data-toggle="modal" data-target="#deleteModal" ng-click="requestDeleteFile(item)">Delete</a></td>
								<td><a href="" ng-hide="item.directory" ng-click="requestEditFile(item)" data-toggle="modal" data-target="#fileModal">Edit</a></td>
							</tr>
						</tbody>
					</table>
				</div>
            </div>
        </div>
    </div>

    <!-- Edit file Modal -->
	<div id="fileModal" class="modal fade" role="dialog">

		<script type="text/javascript">
            // Thanks to sud0nick on forums.hak5.org for this snippet
            $(document).delegate('#cabinetEditor', 'keydown', function(e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode == 9) {
                    for (var i = 0; i < 4; i++) {
                        // get caret position/selection
                        var start = this.selectionStart;
                        var end = this.selectionEnd;

                        var $this = $(this);
                        var value = $this.val();

                        // set textarea value to: text before caret + tab + text after caret
                        $this.val(value.substring(0, start)
                            + " "
                            + value.substring(end));

                        // put caret at right position again (add one for the tab)
                        this.selectionStart = this.selectionEnd = start + 1;

                        // prevent the focus lose
                        e.preventDefault();
                    }
                }
            });

		</script>

		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" ng-click="editFile = {}">&times;</button>
					<h4 class="modal-title">File Editor {{ editFile.name }}</h4>
				</div>
				<div class="modal-body">
						<label class="control-label">File Name</label>
						<input type="text" class="form-control" ng-model="editFile.name" placeholder="Notes.txt">
						<br />
						<label class="control-label">File Contents</label>
						<a href="javascript:;" ng-click="editFile.content = ''" class="pull-right">Clear</a>
						<textarea class="form-control" rows="10" id="cabinetEditor" ng-model="editFile.content" placeholder="Write some text here"></textarea>
						<label class="control-label pull-right">File Size: {{ editFile.size }}</label>
						<a href="javascript:;" class="pull-left" ng-click="download(editFile.path)">Download</a>
						<br />
				</div>
				<div class="modal-footer">
					<button type="button" ng-click="sendEditFile()" class="btn btn-success pull-right" data-dismiss="modal">Save</button>
					<button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="editFile = {}">Cancel</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Delete file Modal -->
	<div id="deleteModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" ng-click="deleteFile = {}">&times;</button>
					<h4 class="modal-title">Delete File {{ deleteFile.name }}</h4>
				</div>
				<div class="modal-body">
					<p>You are about to delete {{ deleteFile.name }}. Once you do this it can not be undone.</p>
					<p ng-show="deleteFile.directory">{{ deleteFile.name }} is a directory. Deleteing it will also delete all files and folders contained inside.</p>
					<p><b>Are you absolutely sure you want to delete {{ deleteFile.name }} located at {{ deleteFile.path }}?</b></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary pull-right" data-dismiss="modal" ng-click="deleteFile = {}">Cancel</button>
					<button type="button" class="btn btn-danger pull-left" data-dismiss="modal" ng-click="sendDeleteFile()">Delete</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Create directory Modal -->
	<div id="folderModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Create Folder</h4>
				</div>
				<div class="modal-body">
					<form class="form-inline" role="form">
						<label class="control-label">Folder Name</label>
						<input type="text" class="form-control" ng-model="newFolder.name" placeholder="Notes.txt">
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" ng-click="createFolder()" class="btn btn-success pull-left" data-dismiss="modal">Create</button>
					<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Create Message Modal -->
	<div id="messageModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">{{ message.title }}</h4>
				</div>
				<div class="modal-body">
					<p>{{ message.body }}</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Dismiss</button>
				</div>
			</div>
		</div>
	</div>

</div>