{% extends 'template.html' %}
{% block content %}
		<b>Edit Scaffold: {{ name }}</b><br/>
		You can edit model,view, controller with ease using this scaffold editor. <br/>
		{% for file in files.scaffolds %}
		{% if file.name == name %}
		{% if file.check == "changed" %}
		<div class="info warning">
			TEMPE GENERATOR HAS DETECTED CHANGES IN THIS SCAFFOLD.<hr/>
			To prevent accidental deletion, delete has been disabled.<br/> 
			To enable deletion, edit this scaffold or just click submit in this form.
			<hr/>
			WARNING: YOU WILL LOST YOUR CHANGES WHEN YOU SUBMIT THIS FORM.
		</div>
		{% else %}
		<div class="info">
			WARNING: EXISTING FILE WILL BE OVERWRITTEN.
		</div>
		{% endif %}
		{% endif %}
		{% endfor %}
	
		<form method="post">
			<br/>
			<table>
				<tr valign="top">
					<td>
						<b>Name</b><br/>
						<input type="text" name="name" style="width:300px;" tabindex="1" value="{{ name  }}"><br/>
						<small>Use lowercase with underscore, eg: posts</small>
						<br/><br/><br/>
						<b>Fields</b><br/>
						<small>For field name use lowercase with underscore, eg: post_name</small>
					</td>
					<td style="padding-left:30px;">
					</td>
				</tr>
				<tr>
					<td colspan="2">					
						<table class="fields" cellpadding="3" cellspacing="0" border="0" style="font-size:13px">
							<tr>
								<td></td>
								<td>Field Name</td>
								<td>Type</td>
								<td><!--Validation--></td>
							</tr>
							{% for field in fields %}
							<tr class="field" valign="top">
								<td><a href="#" style="{% if loop.first %}visibility:hidden;{% endif %}" class="del">&#215;</a></td>
								<td><input type="text" class='text_field' name="fields[]" tabindex="2" value="{{ field.name }}"/></td>
								<td>
									<select name="types[]" class="type">
									  <option value="string" {% if field.type == "text" %}selected="selected"{% endif %}>String</option>
									  <option value="dropdown" {% if field.type == "select" %}selected="selected"{% endif %}>Dropdown</option>
									  <option value="checkbox"  {% if field.type == "checkbox" %}selected="selected"{% endif %}>Checkbox</option>
									  <option value="radio"  {% if field.type == "radio" %}selected="selected"{% endif %}>Radio</option>
									  <option value="date" {% if field.type == "date" %}selected="selected"{% endif %}>Date</option>
									</select>
									{% for v in field.value_label %}
										<div class="value_label">
											Value: <input type="text" name="{{field.name}}_value[]" value="{{v.value}}" class='value' /> 
											Label: <input type="text" name="{{field.name}}_label[]" value="{{v.label}}" class='label' />
											<input class="del_value_label" type="button" value="Del" />
											<input class="add_value_label" type="button" value="Add" />
										</div>
									{% endfor %}
									
									<label><input class="required" type="checkbox" {% if field.required == 'true' %}checked="checked"{% endif %}/>Required</label>
									<input class="required_hidden" type="hidden" name="required[]" {% if field.required == 'true' %}value="true"{% else %}value="false"{% endif %}/>
									
								</td>
								<td>
									<!--<label>
										<input type="checkbox" name="validation[]" value="required" class="required"/>
										Required
									</label>-->
								</td>
							</tr>
							{% endfor %}
							<tr class="field" valign="top">
								<td><a href="#" style="" class="del">&#215;</a></td>
								<td><input type="text" class='text_field' name="fields[]" tabindex="2" /></td>
								<td>
									<select name="types[]" class="type">
									  <option value="string">String</option>
									  <option value="dropdown">Dropdown</option>
									  <option value="checkbox">Checkbox</option>
									  <option value="radio">Radio</option>
									  <option value="date">Date</option>
									</select>
									<label><input class="required" type="checkbox"/>Required</label>
									<input class="required_hidden" type="hidden" name="required[]" value="false"/>
								</td>
								<td>
									<!--<label>
										<input type="checkbox" name="validation[]" value="required" class="required"/>
										Required
									</label>-->
								</td>
							</tr>
							<tr class="addField"><td></td><td colspan="3"><a href="#" id="add">Add Field</a> <span style="color:#666">(Ctrl-M)<br/>
							<small>Press backspace on field name to delete field.<br/>Press up/down to navigate between fields<br/></small>
							</span></td></tr>
						</table>	
					</td>
				</tr>
			</table><hr/>
			<input type="submit" value="Submit" />
		</form>
		<div class="value_label master" style="display:none;">
			Value: <input type="text" class='value' /> 
			Label: <input type="text" class='label' />
			<input class="del_value_label" type="button" value="Del" />
			<input class="add_value_label" type="button" value="Add" />
		</div>
{% endblock %}
{% block script2 %}
	<script type="text/javascript">
	$(document).ready(function() {
		$("select.type").live('change',function() {
			$(this).parent().find(".value_label").remove();
			var type = $(this).find('option:selected').val();
			if (type == "dropdown" || type == "radio" || type == "checkbox") {
				var am = $(".value_label.master").clone().removeClass("master").show()
				am.find('.value').attr('name',$(this).parent().parent().find('.text_field').val().trim() + "_value[]");
				am.find('.label').attr('name',$(this).parent().parent().find('.text_field').val().trim() + "_label[]");
				am.insertAfter($(this).parent().find('.required_hidden'));
			}
		});
		
		$(".add_value_label").live("click",function() {
			var am = $(".value_label.master").clone().removeClass("master").show()
			am.find('.value').attr('name',$(this).parent().parent().parent().find('.text_field').val().trim() + "_value[]");
			am.find('.label').attr('name',$(this).parent().parent().parent().find('.text_field').val().trim() + "_label[]");
			am.insertAfter($(this).parent());
		});
		
		$(".del_value_label").live("click",function() {
			if ($(this).parent().parent().find(".value_label").length == 1) {
				$(this).parent().parent().find('select').val('string');
			}
			$(this).parent().remove();
		});
		
		$('.required').live('click',function() { 
			$(this).parent().parent().find(".required_hidden").val($(this).is(':checked'));
			console.debug($(this).parent().parent().find(".required_hidden"));
		});
		
		$("input.text_field").live('keyup',function() {
			$(this).parent().parent().find('.value').attr('name',$(this).val().trim() + "_value[]");
			$(this).parent().parent().find('.label').attr('name',$(this).val().trim() + "_label[]");
		});
	});
	</script>
{% endblock %}