{% extends 'template.html' %}
{% block content %}
		<b>Authentication Generator</b><br/>
		You can generate view, controller, and model for Authentication with ease using this generator. <br/>
		<div class="info">
			WARNING: EXISTING FILE WILL BE OVERWRITTEN.
		</div>

		<form method="post" action="{% nav index %}?module=auth">
			<br/>
			<table>
				<tr valign="top">
					<td>
						<b>Authentication Name</x`b><br/>
						<input type="text" name="name" style="width:300px;" tabindex="1"><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></td>
							</tr>
							<tr  valign="top">
								<td><div style="position:absolute;margin-left:-20px;margin-top:3px;color:#aaa;">User</div></td>
								<td><input type="text" class='text_field' name="fields[]" tabindex="2" value="username"/></td>
								<td>
									<select class="type" disabled="disabled">
										<option value="string" selected="selected">String</option>
									</select>
									<label><input class="required" type="checkbox" checked="checked" disabled="disabled"/>Required</label>
									<input class="required_hidden" type="hidden" name="required[]" value="true"/>
									<input type="hidden" name="types[]" value="string"/>
								</td>
								<td>
								</td>
							</tr>
							<tr valign="top">
								<td><div style="position:absolute;margin-left:-20px;margin-top:3px;color:#aaa;">Pass</div></td>
								<td><input type="text" class='text_field' name="fields[]" tabindex="2" value="password"/></td>
								<td>
									<select class="type" disabled="disabled">
										<option value="string" selected="selected">String</option>
									</select>
									<label><input class="required" type="checkbox" checked="checked" disabled="disabled"/>Required</label>
									<input class="required_hidden" type="hidden" name="required[]" value="true"/>
									<input type="hidden" name="types[]" value="string"/>
								</td>
								<td>
								</td>
							</tr>
							<tr class="field" valign="top">
								<td><a href="#" style="visibility:hidden;" 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 %}