{% extends "diet_optimizer_website/layout.html" %}
{% block content %}

{% load static %}
<style>
	body{
		background: url("/static/img/food_world.jpg") no-repeat center;
    }
</style>

<main>
<!--form id="msform"-->
	<form  id="msform" method="POST" action="/diet_optimizer_website/signup">
		{% csrf_token %}

  		<!-- progressbar -->
  		<ul id="progressbar">
    		<li class="active">Account Setup</li>
    		<li>Personal Details</li>
 		 </ul>
  <!-- fieldsets -->
  		<fieldset>
    		<h2 class="fs-title">Create your account</h2>
    		<h3 class="fs-subtitle">This is step 1</h3>

    <!--input type="text" name="username" placeholder="Username"--> 
			<div class='form-group'>
				{{ form.username.label }}

				{% if form.username.errors %}
					{% for error in form.username.errors %}
						<p class='error-message'>{{ error }}</p>
					{% endfor %}
				{% endif %}

				{{ form.username }}
			</div>

			<div class='form-group'>
				{{ form.email.label }}

				{% if form.email.errors %}
					{% for error in form.email.errors %}
						<p class='error-message'>{{ error }}</p>
					{% endfor %}
				{% endif %}

				{{ form.email }}
			</div>

			<div class='form-group'>
				{{ form.password1.label }}

				{% if form.password1.errors %}
					{% for error in form.password1.errors %}
						<p class='error-message'>{{ error }}</p>
					{% endfor %}
				{% endif %}

				{{ form.password1 }}
			</div>

			<div class='form-group'>
				{{ form.password2.label }}

				{% if form.password2.errors %}
					{% for error in form.password2.errors %}
						<p class='error-message'>{{ error }}</p>
					{% endfor %}
				{% endif %}

				{{ form.password2 }}
			</div>

			<input type="submit" name="submit" value="Next" />

		  </fieldset>

	</form>

</main>

{% endblock %}