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

<%def name="title()">
    ${_('Create an Account')}
    %if c.rhodecode_name:
        &middot; ${h.branding(c.rhodecode_name)}
    %endif
</%def>
<style>body{background-color:#eeeeee;}</style>

<div class="loginbox">
    <div class="header">
        <div id="header-inner" class="title">
            <div id="logo">
                <div class="logo-wrapper">
                    <a href="${h.url('home')}"><img src="${h.url('/images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                </div>
                %if c.rhodecode_name:
                <div class="branding"> ${h.branding(c.rhodecode_name)}</div>
                %endif
            </div>
        </div>
    </div>

    <div class="loginwrapper">
        <div class="left-column">
            <img class="sign-in-image" src="${h.url('/images/sign-in.png')}" alt="RhodeCode"/>
        </div>
        
        <div id="register" class="right-column">
            <%include file="/base/flash_msg.html"/>
            <!-- login -->
            <div class="sign-in-title">
                <h1>${_('Create an account')}</h1>
                <h4>${h.link_to(_("Go to the login page to sign in with an existing account."),h.url('login'))}</h4>
            </div>
            <div class="inner form">
                ${h.form(url('register'), needs_csrf_token= False)}
                    <label for="username">${_('Username')}:</label>
                    ${h.text('username', c.form_data.get('username'))}
                    <label for="password">${_('Password')}:</label>
                    ${h.password('password', c.form_data.get('password'))}
                    <label for="password">${_('Re-enter password')}:</label>
                    ${h.password('password_confirmation', c.form_data.get('password'))}
                    <label for="firstname">${_('First Name')}:</label>
                    ${h.text('firstname')}
                    <label for="lastname">${_('Last Name')}:</label>
                    ${h.text('lastname')}
                    <label for="email">${_('Email')}:</label>
                    ${h.text('email', c.form_data.get('email'))}

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

                    %if not c.auto_active:
                        <p class="activation_msg">
                            ${_('Account activation requires admin approval.')}
                        </p>
                    %endif
                    <p class="register_message">
                        ${c.register_message|n}
                    </p>

                    ${h.submit('sign_up',_('Create Account'),class_="btn sign-in")}

                ${h.end_form()}
            </div>

        % if c.social_plugins:
        <p>${_('Register using one of external services')}:</p>

        <p>
            ${render_social_buttons(c.social_plugins, 'register')}
        </p>
        % endif

        </div>
    </div>
</div>

%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("${c.captcha_public_key}", "recaptcha", {theme: "white"});
    %endif
});
</script>