## -*- coding: utf-8 -*-
<%inherit file="base/root.html"/>

<%block name="title">
    ${_('Sign Up')}
</%block>

<%include file="/base/flash_msg.html"/>

<div id="register" class="panel panel-primary">
    <div class="panel-heading">
        %if c.site_name:
            <h5>${_('Sign Up to %s') % c.site_name}</h5>
        %else:
            <h5>${_('Sign Up')}</h5>
        %endif
    </div>
    <div class="panel-body">
        ${h.form(url('register'))}
        <div class="form">
                <div class="form-group">
                    <label class="control-label" for="username">${_('Username')}:</label>
                    <div>
                        ${h.text('username',class_='form-control')}
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="password">${_('Password')}:</label>
                    <div>
                        ${h.password('password',class_='form-control')}
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="password_confirmation">${_('Re-enter password')}:</label>
                    <div>
                        ${h.password('password_confirmation',class_='form-control')}
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="firstname">${_('First Name')}:</label>
                    <div>
                        ${h.text('firstname',class_='form-control')}
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="lastname">${_('Last Name')}:</label>
                    <div>
                        ${h.text('lastname',class_='form-control')}
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label" for="email">${_('Email')}:</label>
                    <div>
                        ${h.text('email',class_='form-control')}
                    </div>
                </div>

                %if c.captcha_active:
                <div class="form-group">
                    <label class="control-label" for="recaptcha_field">${_('Captcha')}:</label>
                    <div>
                        ${h.hidden('recaptcha_field')}
                        <div id="recaptcha"></div>
                    </div>
                </div>
                %endif

                <div class="form-group">
                    <div class="buttons">
                        ${h.submit('sign_up',_('Sign Up'),class_="btn btn-default")}
                        %if c.auto_active:
                            <div class="alert alert-info">${_('Registered accounts are ready to use and need no further action.')}</div>
                        %else:
                            <div class="alert alert-info">${_('Please wait for an administrator to activate your account.')}</div>
                        %endif
                    </div>
                </div>
        </div>
        ${h.end_form()}
        %if c.captcha_active:
        <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
        %endif
        <script type="text/javascript">
        $(document).ready(function(){
            $('#username').focus();

            %if c.captcha_active:
            Recaptcha.create(${h.js(c.captcha_public_key)}, "recaptcha",
                {
                  theme: "white"
                }
            );
            %endif
        });
        </script>
    </div>
 </div>