[% c.load_once("jquery.ui/themes/flora/flora.tabs.css") %]

<div id='edit_profile_tabs' class='tabs'>
    <ul class="ui-tabs-nav">
        <li><a href='/profile/edit'><span>[% c.loc('Edit Profile') %]</span></a></li>
        <li class="ui-tabs-selected"><a href='javascript:void(0);'><span>Change Username</span></a></li>
        <li><a href='/profile/change_password'><span>Change Password</span></a></li>
        <li><a href='/profile/change_email'><span>Change Email</span></a></li>
        <li><a href='/profile/profile_photo'><span>Profile Photo</span></a></li>
    </ul>
    <div class="ui-tabs-panel">

<div class='one'>
<table align='center'>
	<tbody>
	<form method='post'>
	<tr class='misc1'><td width='20%' align='right'>Old Username:</td><td>[% c.user.username %]
	</td></tr>
    <tr class='misc2'><td align='right'>Password:</td><td><input type='password' name='password' size='12' />
    [% IF c.form.error('password') %]
	    Please type your password correctly.
	[% END %]
	</td></tr>
	<tr class='misc1'><td align='right'>New Username:</td><td><input type='text' name='new_username' size='12' />
	[% IF c.form.error('new_username') %]
	    [% IF c.form.error('new_username', 'HAS_BLANK') %]
	    don't put blank in your username.
	    [% ELSIF c.form.error('new_username', 'HAS_SPECAIL_CHAR') %]
	    only A-Z, a-z, 0-9, - is allowed.
	    [% ELSIF c.form.error('new_username', 'HAS_RESERVED') %]
	    this username is reserved.
	    [% ELSIF c.form.error('new_username', 'DBIC_UNIQUE') %]
	    This username is used by another one.
	    [% ELSE %]
	    username should be 6-20 chars.
	    [% END %]
	[% END %]
	only A-Z, a-z, 0-9, -, _ is allowed.
	</td></tr>
	<tr class='misc2'><td align='right'>Confirm Username:</td><td>
	<input type='text' name='confirm_username' size='12' />
	[% IF c.form.error('usernames') %]Confirm Username is not the same as New Username[% END %]
	</td></tr>
	<tr class='misc2'><td></td><td><input type='submit' /></td></tr>
	</form>
	</tbody>
</table>
</div>

    </div>
</div>