<page-title title="{{typeDesc.name}}"></page-title>

<div class="container-fluid">
	<div class="row">
		<div class="col">
			<p>
				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newResourceModal" ng-click="prepareNewResource()">create a new resource</button>
			</p>
			
			<page-filter filter="resFilter" list="resources"></page-filter>

			<div class="card mb-4" ng-repeat="r in resources|filter:resFilter">
				<div class="card-body small">
					<span class="badge badge-primary float-right">{{typeDesc.contentType}}</span>
					<h5 class="card-title" title="{{r.id}}">{{r.name}}</h5>
					<p class="card-text">{{r.description}}</p>
					<p class="text-muted small">
						<b>Id:</b> {{r.id}}<br /> <b>Creation date:</b> {{r.creationDate}}<br /> <b>Modification date:</b> {{r.modificationDate}}
					</p>
					<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editMetadataModal" ng-click="prepareEditMetadata(r)">edit metadata</button>
					<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editContentModal" ng-click="prepareEditContent(r)">edit content</button>
					<a href="./api/resources/{{r.id}}/content" class="btn btn-sm btn-success" target="_blank">raw content</a>
					<button type="button" class="btn btn-sm btn-danger" ng-click="deleteResource(r)">delete</button>
				</div>
			</div>

		</div>
	</div>
</div>

<!-- Modals -->

<div class="modal fade" tabindex="-1" id="editMetadataModal">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Edit metadata</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<form>
				<div class="modal-body">
					<div class="form-group">
						<label>ID</label> <input type="text" readonly class="form-control-plaintext" ng-model="tmpRes.id" />
					</div>
					<div class="form-group">
						<label>Type</label> <input type="text" readonly class="form-control-plaintext" ng-model="tmpRes.type" />
					</div>
					<div class="form-group">
						<label>Name</label> <input type="text" class="form-control" ng-model="tmpRes.name" />
					</div>
					<div class="form-group">
						<label>Description</label>
						<textarea class="form-control" ng-model="tmpRes.description" rows="3"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveMetadata(tmpRes.id, tmpRes)" ng-disabled="!tmpRes.id || !tmpRes.name">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" tabindex="-1" id="newResourceModal">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">New resource ({{type}})</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<form>
				<div class="modal-body">
					<div class="form-group">
						<label>Name</label> <input type="text" class="form-control" ng-model="tmpRes.name" />
					</div>
					<div class="form-group">
						<label>Description</label>
						<textarea class="form-control" ng-model="tmpRes.description"></textarea>
					</div>
					<div class="form-group">
						<label>Content ({{typeDesc.contentType}})</label>
						<textarea class="form-control" ng-model="tmpRes.content" rows="25"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-sm btn-primary" ng-click="createNewResource(tmpRes)" ng-disabled="!tmpRes.name || !tmpRes.content">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" tabindex="-1" id="editContentModal">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Edit content</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<form>
				<div class="modal-body">
					<div class="form-group">
						<label>{{typeDesc.contentType}}</label>
						<textarea class="form-control" ng-model="tmpContent" rows="25"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-sm btn-primary" ng-click="saveContent(tmpRes.id, tmpContent)" ng-disabled="!tmpContent">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>




