<!--Table with all configuration options.-->
<div class="inside-wrapper">
<h2 class="invisible">Configuration</h2>
<% var form = $('<div><form action="#" id="configuration-form">
		<h3>Parameters</h3>
		<table id="configuration-form-parameters" class="shortrightcolumn"></table>
		<h3>Projections</h3>
		<table id="configuration-form-projections" class="shortrightcolumn"></table></form></div>');

	_.each(parameters, function (p) {
		if ( p['user_editable'] ) {
			elements = Claun.forms['render' + p.type.firstUpper()](p);

			var	tds = [$('<th></th>').html(elements.label), $('<td></td>').html(elements.input), $('<td class="help"></td>').html(elements.help)],
				params = $('#configuration-form-parameters', form),
				projections = $('#configuration-form-projections', form),
				tr = $('<tr></tr>');

			$(tds).each(function (i, t) {
				tr.append(t);
			});

			if (p['group'] && p['group'] == 'projection') {
				tr.addClass('projection');
				projections.append(tr);
			} else {
				params.append(tr);
			}
		}
	}); %>

<%= form.html() %>

<table class="buttons">
	<tr>
		<td><button id="configuration-form-discard">Discard changes</button></td>
		<td><button id="configuration-form-save">Save</button></td>
		<td><button id="configuration-form-save-close">Save & Close</button></td>
	</tr>
</table>

<a class="invisible" id="configuration-close" href="">Close</a>
</div>