{% extends "base.html" %}

{% block title %}Registrieren{% endblock %}
{% block nav_signup_class %}is-active{% endblock %}

{% block content %}
<div class="rom-overview">
	<div class="columns">
		<div class="column">
			<div class="box">
				<h1 class="title is-1">Registrieren</h1>
				{% if user.is_authenticated %}
				Was zur Hölle machst du bitte hier?<br/>
				Du bist eingeloggt und willst du dich registrieren.<br/>
				Geh heim du bist besoffen!
				{% else %}
				{% if form.non_field_errors %}
					<div class="message is-danger">
						<div class="message-header">
							<strong>Nope!</strong>
						</div>
						<div class="message-body">
							{{ form.non_field_errors }}
						</div>
					</div>
				{% endif %}
				<form method="post">
					{% csrf_token %}

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.username.id_for_label}}">{{form.username.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.username.errors %}is-danger{% endif %} is-primary"
									type="text" name="{{form.username.html_name}}"
									 id="{{form.username.id_for_label}}" value="{{form.username.value|default_if_none:''}}" />
									<span class="icon is-small is-left">
							        	<i class="fa fa-user"></i>
							     	</span>
									<span class="icon is-small is-right">
										{% if form.username.errors %}
							        	<i class="fa fa-warning"></i>
										{% endif %}
							      	</span>
								</div>
								<p class="help is-danger">
									{{form.username.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.email.id_for_label}}">{{form.email.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.email.errors %}is-danger{% endif %} is-primary"
									type="text" name="{{form.email.html_name}}"
									 id="{{form.email.id_for_label}}" value="{{form.email.value|default_if_none:''}}" />
									<span class="icon is-small is-left">
										<i class="fa fa-envelope"></i>
									</span>
									<span class="icon is-small is-right">
										{% if form.email.errors %}
										<i class="fa fa-warning"></i>
										{% endif %}
									</span>
								</div>
								<p class="help is-danger">
									{{form.email.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.password1.id_for_label}}">{{form.password1.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.password1.errors %}is-danger{% endif %} is-primary"
									type="password" name="{{form.password1.html_name}}"
									 id="{{form.password1.id_for_label}}" value="{{form.password1.value|default_if_none:'' }}" />
									<span class="icon is-small is-left">
										<i class="fa fa-unlock-alt"></i>
									</span>
									<span class="icon is-small is-right">
										{% if form.password1.errors %}
										<i class="fa fa-warning"></i>
										{% endif %}
									</span>
								</div>
								<p class="help is-danger">
									{{form.password1.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.password2.id_for_label}}">{{form.password2.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.password2.errors %}is-danger{% endif %} is-primary"
									type="password" name="{{form.password2.html_name}}"
									 id="{{form.password2.id_for_label}}" value="{{form.password2.value|default_if_none:'' }}" />
									<span class="icon is-small is-left">
										<i class="fa fa-unlock"></i>
									</span>
									<span class="icon is-small is-right">
										{% if form.password2.errors %}
										<i class="fa fa-warning"></i>
										{% endif %}
									</span>
								</div>
								<p class="help is-danger">
									{{form.password2.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="form-help">
						Twitter und Github-Benutzername sind optionale Angaben.<br/>
						Sie werden zusammen mit deinem Benutzername auf Details-Seite zu deinen Roms angezeigt.<br/>
						Bitte nur die Benutzernamen, nicht die Urls und bei Twitter das @ weglassen.
					</div>

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.twitter.id_for_label}}">{{form.twitter.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.twitter.errors %}is-danger{% endif %}"
									type="text" name="{{form.twitter.html_name}}"
									 id="{{form.twitter.id_for_label}}" value="{{form.twitter.value|default_if_none:'' }}" />
									<span class="icon is-small is-left">
										<i class="fa fa-twitter"></i>
									</span>
									<span class="icon is-small is-right">
										{% if form.twitter.errors %}
										<i class="fa fa-warning"></i>
										{% endif %}
									</span>
								</div>
								<p class="help is-danger">
									{{form.twitter.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label class="label" for="{{form.github.id_for_label}}">{{form.github.label}}</label>
						</div>
						<div class="field-body">
							<div class="field is-narrow">
								<div class="control has-icons-left has-icons-right">
									<input class="input {% if form.github.errors %}is-danger{% endif %}"
									type="text" name="{{form.github.html_name}}"
									 id="{{form.github.id_for_label}}" value="{{form.github.value|default_if_none:'' }}" />
									<span class="icon is-small is-left">
										<i class="fa fa-github"></i>
									</span>
									<span class="icon is-small is-right">
										{% if form.github.errors %}
										<i class="fa fa-warning"></i>
										{% endif %}
									</span>
								</div>
								<p class="help is-danger">
									{{form.github.errors.as_text}}
								</p>
							</div>
						</div>
					</div>

					<div class="field is-grouped">
						<p class="control">
							<button class="button is-primary">Registrieren</button>
						</p>
					</div>
				</form>
				{% endif %}
			</div>
		</div>
	</div>
</div>
{% endblock %}