
{% load ext %}

<form id="login_or_register_form" class="form" method="POST" action="{% url 'account_login' %}">
	<div class="form-group">
		<div class="input-group">
			<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
			<input type="text" class="form-control" name="login" placeholder="Login">
		</div>
	</div>
	{# todo whitespace #}
	{# todo focus on unfold #}
	<div class="form-group">
		<div class="input-group">
			<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
			<input type="password" class="form-control" name="password" placeholder="Password">
		</div>
	</div>
	{% csrf_token %}
	<input type="hidden" name="next" value="{{ request.path }}" />
	<div class="form-group">
		<div class="btn-group btn-group-justified" role="group">
			<div class="btn-group" role="group">
				<button id="login_or_register_form_button_register" type="submit" name="action"
				        value="register" class="btn btn-default" formaction="{% url 'account_signup' %}">
					Register
				</button>
			</div>
			<div class="btn-group" role="group">
				<button id="login_or_register_form_button_login" type="submit" name="action"
				        value="login" class="btn btn-primary" formaction="{% url 'account_login' %}">
					Login
				</button>
			</div>
		</div>
	</div>
</form>

<script>
	(function() {
        var form = document.getElementById("login_or_register_form");
        document.getElementById("login_or_register_form_button_login").onclick = function (k, elem) {
            form.action = "{% url 'account_login' %}";
        };
        document.getElementById("login_or_register_form_button_register").onclick = function (k, elem) {
            form.action = "{% url 'account_signup' %}";
        };
    })();
</script>
