{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}

{% import "macro_functions.phtml" as mf %}

{% block meta_title %}{% trans 'Login / Sign up' %}{% endblock %}
{% block content %}

    <div class="h-block">
        <div class="h-block-header">
            <div class="icon"><span class="big-light-icon i-profile"></span></div>
            <h2>{% trans 'Sign In / Create new account' %}</h2>
            <p>{% trans 'Become a member to participate in forum, contact support, order new services' %}</p>
        </div>
        <div class="block" id="login-to-account" {% if request.register %}style="display:none;"{% endif %}>
            <div class="splitter">
            <div class="grid_6 alpha">
                <div class="box" >
                    <div class="block">
                        <h2>{% trans 'Sign in' %}</h2>
                        <form action="" method="post" id="client-login">
                            <fieldset>
                                <legend>{% trans 'Login to client area' %}</legend>
                                <p>
                                    <label>{% trans 'Email Address' %}: </label>
                                    <input type="email" name="email" value="{{ request.email }}" required="required">
                                </p>

                                <p>
                                    <label>{% trans 'Password' %}: </label>
                                    <input type="password" name="password" value="{{ request.password }}" required="required">
                                </p>
                                <input type="hidden" name="remember" value="1" />
                                <input class="bb-button bb-button-submit" type="submit" value="{% trans 'Login' %}">
                                <a class="bb-button" href="{{ 'reset-password'|link }}">{% trans 'Reset password' %}</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

            <div class="grid_6 omega">
                <div class="box" {% if request.register %}style="display:none;"{% endif %}>
                    <h2>{% trans 'Do not have an account yet?' %}</h2>
                    <div class="block">
                        <a style="margin: 30px 0 0 40px;" class="bb-button bb-button-red bb-button-big" href="#" onclick="$('#login-to-account').slideUp(); $('#register-new-account').slideDown(); return false;" >{% trans 'Register' %}</a>
                    </div>
                    {% if guest.extension_is_on({"mod":"oauth"}) %}
                        {% include "mod_oauth_buttons.phtml" with {"redirect_to":"me"} %}
                    {% endif %}
                </div>
            </div>
            <div class="clear"></div>
        </div>
        </div>

        <div class="block" id="register-new-account" {% if not request.register %}style="display:none;"{% endif %}>
            <form action="" method="post" id="create-profile">
            <div class="grid_6 alpha">
                <div class="box">
                    <h2>{% trans 'Enter your details below' %}</h2>
                    <div class="block">
                        <fieldset>
                            <legend>{% trans 'Create new profile' %}</legend>
                            <p>
                                <label>{% trans 'First Name' %}: </label>
                                <input type="text" name="first_name" value="{{ request.first_name }}" required="required">
                            </p>
                            <p>
                                <label>{% trans 'Last Name' %}: </label>
                                <input type="text" name="last_name" value="{{ request.last_name }}" required="required">
                            </p>
                            <p>
                                <label>{% trans 'Company' %}: </label>
                                <input type="text" name="company" value="{{ request.company }}" required="required">
                            </p>
                            
                            {{ mf.recaptcha }}

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

            <div class="grid_6 omega">
                <div class="box" id="register-new-account">
                    <h2>&nbsp;</h2>
                    <div class="block">
                        <fieldset>
                            <legend>{% trans 'Create new profile' %}</legend>
                            <p>
                                <label>{% trans 'Email Address' %}: </label>
                                <input type="email" name="email" value="{{ request.email }}" required="required" id="reg-email">
                            </p>
                            <p>
                                <label>{% trans 'Password' %}: </label>
                                <input type="password" name="password" value="" required="required" id="reg-password">
                            </p>
                            <p>
                                <label>{% trans 'Password confirm' %}: </label>
                                <input type="password" name="password_confirm" value="" required="required">
                            </p>
                            <input class="bb-button bb-button-red bb-button-big" type="submit" value="{% trans 'Register' %}" style="margin: 30px 0 0 70px;">
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            </form>
        </div>
    </div>

{% endblock %}

{% block js %}
<script type="text/javascript">
$(function() {

    $('#password-reset').bind('submit',function(event){
        api.post(
            'guest/client/reset_password',
            $(this).serialize(),
            function(result) {
                bb.msg('Password reset confirmation email was sent');
            }
        );
        return false;
    });

    $('#client-login').bind('submit',function(event){
        api.post(
            'guest/client/login',
            $(this).serialize(),
            function(result) {
                bb.redirect();
            }
        );
        return false;
    });

    $('#create-profile').bind('submit',function(event){
        api.post(
            'guest/client/create',
            $(this).serialize(),
            function(result) {
                //login after registration
                var login_details = {
                    email: $('#reg-email').val(),
                    password: $('#reg-password').val(),
                };
                api.post(
                    'guest/client/login',
                    login_details,
                    function(result) {
                        bb.redirect();
                    }
                );
            }
        );
        return false;
    });

});
</script>
{% endblock %}