{% extends 'base.html' %}
{% load static %}

{% block style %}
<style>
	.alert-error {
	  color: red;
      margin-bottom: 5px;
      font-size: medium;
	}
	</style>
{% endblock style %}
	

{% block content %} 
{% if not request.user.is_authenticated %}
	<div class="sign section--bg" data-bg="https://i.ibb.co/rp5sjD9/section.jpg">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="sign__content">
						<!-- authorization form -->
						<form action="" method="POST" class="sign__form">
                            {% csrf_token %}
							<a href="index.html" class="sign__logo">
								<img src="{% static 'img/lc.svg' %}" alt="">
                            </a>
                            {% for field in form %}
							<div class="sign__group">
                                {% if field.errors %}
                                {{ field.errors }}
                                {% endif %}
                                {{ field }}
                            </div>
                            {% endfor %}
                            <button class="sign__btn" type="submit">Registrati</button>

							<span class="sign__text">Hai giá un account? Esegui il <a href="{% url 'login' %}">Login!</a></span>
						</form>
						<!-- end authorization form -->
					</div>
				</div>
			</div>
		</div>
    </div>
    {% else %}

    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="sign__content">
                    <div class="sign__form">
                        <span class="sign__text">Caro Utente, sei giá registrato!</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endif %}    

    {% endblock content %}
    {% block javascript %}
        <script>
            $(document).ready(function(){
                $('input[type="text"]').addClass('sign__input').attr('placeholder','Nome Utente');
                $('input[type="password"]').addClass('sign__input').attr('placeholder','Password');
                $('input#id_password2').addClass('sign__input').attr('placeholder','Conferma Password');
                $('input[type="email"]').addClass('sign__input').attr('placeholder','Email');
                $("ul.errorlist").removeClass('errorlist').addClass('alert-error');
            })
        </script>
    {% endblock javascript %}