template.html

<style type="text/css">
	sf-builder {
		display: block;
		padding: 20px;
		background: rgb(144, 211, 45);
	}

	.sf-builder-decorator {
		border: 1px solid transparent;
		position: relative;
		display: block;
		padding: 8px;
		margin: 8px 0;
	}

	.sf-builder-decorator:hover {
		border-color: rgba(0,0,0,0.2);
	}

	.sf-builder-decorator:hover .sf-builder-controls-handle {
		position: absolute;
		top: -1px;
		right: 100%;
		bottom: -1px;
		margin-right: 1px;
		width: 14px;
		background: rgba(0,0,0,0.2);
		cursor: move;
	}
</style>


<sf-builder-palette class="col-md-3">
	<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-title">Types</div>
		</div>
		<div class="panel-body">
			<ul>
				<li ng-repeat="(type, definition) in types">{{ definition.title || type }}</li>
			</ul>
		</div>
	</div>
</sf-builder-palette>

<sf-builder-designer class="col-md-6">
	<div
		sf-model="model"
		sf-schema="schema"
		sf-form="form"
		></div>
</sf-builder-designer>

<sf-builder-inspector class="col-md-3">
	<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-title">Inspector</div>
		</div>
		<div class="panel-body" ng-if="!types[inspected.type]">Form type not supported.</div>
		<div class="panel-body" ng-if="types[inspected.type]">
			<div
				sf-model="inspected"
				sf-schema="types[inspected.type].schema"
				sf-form="types[inspected.type].form"
				></div>
		</div>
	</div>
</sf-builder-inspector>

<div class="clearfix"></div>