#{extends 'templates/form_layout.html' /}

#{set 'formTitle'}
Add Customer
#{/set}

*{test CDN}*
#{greenscript.js 'http://www.google.com/jsapi http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' /}
#{greenscript.css 'http://www.google.com/x.css' /}

<form action="/post" method="post">
    <div class="fields">
        <div>
            <label>First Name</label>
            <input type="text" id="first_name" name="firstName"/>
            <span class="help">required</span>
        </div>
        <div>
            <label>Last Name</label>
            <input type="text" id="last_name" name="lastName"/>
            <span class="help">required</span>
        </div>
        <div>
            <label>Birthday</label>
            <input class="date" type="text" name="birthday"/>
        </div>
        <div>
            <label>Street</label>
            <input type="text" name="street"/>
        </div>
        <div>
            <label>State</label>
            <input type="text" name="state"/>
        </div>
        <div>
            <label>Country</label>
            <input type="text" name="country"/>
        </div>
        <div>
            <label>Email</label>
            <input id="email" type="text" name="email"/>
        </div>
        <div>
            <label>Phone</label>
            <input type="text" name="phone" class="p-mask" data-pMask="{type:'fixed', mask:'[99.999.999-x]',stripMask:false, stripMaskOnSubmit:false}"/>
        </div>
    </div>
    <ul class="actions">    
        <li><input type="submit" value="Save"/></li>
        <li><input type="button" value="Reset"/></li>
    </ul>
</form>

#{greenscript.css 'datepicker' /}
*{
    THIS IS AN ANTI-PATTERN
    
	Using 'load' is NOT encouraged, as it will output a "javascript" tag directly in place
	thus cause additional http request from web browser.
	
	Further more it might cause problem of dependency management
	
	Here is the correct usage: #{greenscript.js 'datepicker'/}
}*
#{greenscript.js load: 'datepicker' /}
<script type="text/javascript">
    var rule = ruleById('first_name');
    rule.add(Validate.Presence)
    rule = ruleById('last_name');
    rule.add(Validate.Presence)
    rule = ruleById('email');
    rule.add(Validate.Email)
    rule.add(Validate.Presence)
    $$('input.date').each(function(el){
        new Control.DatePicker(el, {icon: '/public/images/calendar.png', locale: 'en_iso8601'});
    });
</script>

