{% extends "base.html" %}
{% block title %}Rhizi - Sign up{% endblock %}
{% block head %}
{{ super() }}
<script src="/static/lib/jquery.js" type="text/javascript"></script>
<script src="/static/user_signup.js" type="text/javascript"></script>
<style type='text/css'>
#user_signup_form_panel {
	width: 550px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 20%;
}

#signup_form___submit_button {
	alpha: 0.8;
	background-color: #DCEDFD;
	border-radius: 3px;
	border: 1px solid #4B7CBD;
	cursor: pointer;
	float: right;
	font-weight: bold;
	margin: 20px;
	padding: 5px;
	text-align: center;
	width: 140px;
}

.signup_form__row {
	overflow: auto;
	width: 100%;
}

.signup_form__field {
	border-radius: 3px;
	border: 1px solid #4B7CBD;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 5px;
}

.signup_form__row_sharing_field {
	display: inline-block;
}

.signup_form__field input {
	background-color: inherit;
	border: none;
}

.signup_form__field input:focus {
	outline: none;
}

#signup_form__title {
	margin-bottom: 30px;
}

#signup_form___submit_button_row {
	overflow: auto;
}

#signup_form___submit_button:hover {
	alpha: 1.0;
}

#signup_form__ajax_response {
	margin-top: 30px;
	margin: 10px;
}

#err_msg_row {
	display: none;
	background-color: #DF5C5C;
	margin: 10px;
	vertical-align: middle;
}
</style>
{% endblock %}
{% block content %}
<div id="user_signup_form_panel">
    <h1 id="signup_form__title">Sign up</h1>
    {% if 'activation_success' == state %}
    <div>
        <p>
            Congratulations! your account has been activated.<br>Please
            head over to the <a href="/login">login page</a> to access
            your account.
        </p>
    </div>
    {% elif 'activation_failure' == state %}
    <div>
        <p>{{ html_str__err }}</p>
    </div>
    {% else %}
    <div
        class="signup_form__row"
        id="err_msg_row"></div>
    <div class="signup_form__row">
        <div class="signup_form__field signup_form__row_sharing_field">
            <input
                id="signup_form___first_name"
                placeholder="First name">
        </div>
        <div class="signup_form__field signup_form__row_sharing_field">
            <input
                id="signup_form___last_name"
                placeholder="Last name">
        </div>
    </div>
    <div class="signup_form__row">
        <div class="signup_form__field">
            <input
                id="signup_form___rz_username"
                placeholder="Rhizi username">
        </div>
    </div>
    <div class="signup_form__row">
        <div class="signup_form__field">
            <input
                id="signup_form___email_address"
                type="email"
                placeholder="Email">
        </div>
    </div>
    <div class="signup_form__row">
        <div class="signup_form__field">
            <input
                id="signup_form___password_first"
                type="password"
                placeholder="password">
        </div>
    </div>
    <div class="signup_form__row">
        <div class="signup_form__field">
            <input
                id="signup_form___password_second"
                type="password"
                placeholder="password repeat">
        </div>
    </div>
    <div id="signup_form___submit_button_row">
        <div
            id="signup_form___submit_button"
            onclick="signup_form___submit();">Submit</div>
    </div>
    <div id="signup_form__ajax_response"></div>
    {% endif %}
</div>
{% endblock %}