<!-- BootStrap NavBar -->
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
	<h3><a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a></h3>
    </div>
  </div>
</div>

<!-- HEADER line -->
<div class="container">

<div class="page-header">
	<div class="row">
		<div class="span12">
			<h2>Dancer + Bootstrap Examples</h2>
			<h1>Simple HTML Form</h1>
		</div>
	</div>
</div>

<div class="row">
	<div class="span12">
	This is a simple HTML &lt;form&gt;, using all of <a target="_blank" href="http://twitter.github.com/bootstrap/base-css.html#forms">Bootstrap's form goodies</a>, and Dancer's CGI/POST processing.
	<br/>
	<br/>

	<h3>Code Highlights</h3>
	<ul>
		<li>The Dancer code is in
                    <a href="[% request.uri_for("/show_file",file => "simple_form.pm", example => "SimpleForm", url => request.uri_for("/simple_form") ) %]">
                    <code>./lib/examples/simple_form.pm</code> <i class="icon-eye-open"></i> </a>.
                </li>
		<li>This HTML tempate is in
                    <a href="[% request.uri_for("/show_file",file => "simple_form_entry.tt", example => "SimpleForm", url => request.uri_for("/simple_form") ) %]">
                    <code>./views/examples/simple_form_entry.tt</code> <i class="icon-eye-open"></i> </a>.
       	        </li>
		<li>Once you click <span class="label label-info">submit</span>, the HTTP POST request is handed in the dancer code.</li>
		<li>If you enter <span class="label label-warning">gordon</span> as your name, you'll see a warning, using <a target="_blank" href="http://twitter.github.com/bootstrap/components.html#alerts">Bootstrap's Alerts</a></li>
	</ul>


<!--- ################
      Form starts here
      ################ -->

<form class="form-horizontal" method="post">
<fieldset>
	<legend>Tell us about yourself</legend>

[%###### If the dancer module defined this variable, show a warning to the user ##### %]
[% IF show_warning %]
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> 
<strong>Hey!</strong> [% show_warning %]
</div>
[% END %]

	<!-- Text-Entry Control -->
	<div class="control-group">
		<label class="control-label" for="username">Your name</label>
		<div class="controls">
			<input type="text" class="input-xlarge" id="username" name="username">
			<span class="help-inline">(Any name will do, except <span class="label label-warning">gordon</span>)</span> 
		</div>
	</div>


	<!-- List box control -->
	<div class="control-group"> 
		<label class="control-label" for="animal">Your favorite Animal</label> 
		<div class="controls"> 
			<select id="animal" name="animal"> 
[%#### the "animals" list is set by the Dancer module, allows dynamic <form> creation #### %]
[% FOREACH animal IN animals %]
				<option>[% animal %]</option> 
[% END %]
			</select> 
		</div> 
	</div> 


	<!-- Radio Buttons Controls -->
	<div class="control-group"> 
		<label class="control-label">You prefer</label> 
		<div class="controls"> 
			<label class="radio"> 
				<input type="radio" name="magic" id="magic1" value="more" checked> 
				More Magic!
			</label> 
			<label class="radio"> 
				<input type="radio" name="magic" id="magic2" value="less"> 
				Less Magic
			</label> 
		</div> 
	</div> 


	<!-- The Submit buttons -->
	<div class="form-actions"> 
		<button type="submit" class="btn btn-primary">Go!</button> 
	</div> 

</fieldset>
</form>

	</div>
</div>