script#nodes_renderer(type="text/ng-template")
	div(ui-tree-handle)
		a.btn.btn-defualt.btn-xs(ng-if="node.children && node.children.length > 0",data-nodrag,ng-click="toggle(this)")
			span.glyphicon(ng-class="{'glyphicon-menu-right': collapsed,'glyphicon-menu-down': !collapsed}")
		| (\#{{node.ID}}) {{node.name}}
		.pull-right.btn-group.btn-group-xs(data-nodrag)
			a.btn.btn-default(data-nodrag,ng-click="add(this)")
				span.glyphicon.glyphicon-plus
			a.btn.btn-default(data-nodrag,ng-click="edit(this)")
				span.glyphicon.glyphicon-pencil
			a.btn.btn-default(data-nodrag,ng-click="remove(this)")
				span.glyphicon.glyphicon-remove
	.list-group(ui-tree-nodes,ng-model="node.children",ng-class="{hidden: collapsed}")
		.list-group-item(ui-tree-node,ng-repeat="node in node.children",ng-include="'nodes_renderer'")
.container
	h1 Menu
	.row
		.well.col-md-6(ui-tree)
			.btn-toolbar
				.btn-group
					a.btn.btn-default(ng-click="$broadcast('angular-ui-tree:collapse-all')")
						span.glyphicon.glyphicon-chevron-right
					a.btn.btn-default(ng-click="$broadcast('angular-ui-tree:expand-all')")
						span.glyphicon.glyphicon-chevron-down
				.btn-group
					a.btn.btn-default(ng-click="add(null)")
						span.glyphicon.glyphicon-plus
			br
			.list-group(ui-tree-nodes,data-ui-tree="treeOptions",ng-model="data")
				.list-group-item(ui-tree-node,ng-repeat="node in data",ng-include="'nodes_renderer'")
		form.col-md-6(ng-submit="save()")
			h3(ng-if="obj.ID") Edit
			h3(ng-if="!obj.ID") New
			.form-group(ng-if="parent")
				label Under Parent
				input.form-control(id="name",ng-model="parent.name",readonly)
			.form-group
				label(for="name") Name
				input.form-control(id="name",ng-model="obj.name")
			.form-group
				label(for="shortUrl") URL 
					i (http(s)://PLACEHOLDER/{{obj.url}})
				input.form-control(id="shortUrl",ng-model="obj.url")
			submit.btn.btn-default Save