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

{% block style %}
<style>
	.alert-error {
	  padding: 20px;
	  background-color: #f44336;
	  color: white;
	  margin-bottom: 20px;
	}
	</style>
{% endblock style %}
	

{% block content %}
	
	<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 method="POST" novalidate class="sign__form">
                            {% csrf_token %}
							<a href="/" class="sign__logo">
								<img src="{% static 'img/lc.svg' %}" alt="">
							</a>

							<div class="sign__group">
                                {{ form }}
							</div>
							
							<button class="sign__btn" type="submit">CAMBIA PASSWORD</button>
						</form>
						<!-- end authorization form -->
					</div>
				</div>
			</div>
		</div>
	</div>
	{% endblock content %}
	

{% block javascript %}
	<script>
        function deletelabel(){
            $('label').each(function(){
                return $(this).text('');
            });
        }
        function listyle(){
            $('.helptext').each(function(){// id of ul
            var $li = $(this).find('li');
            return $li.addClass('sign__text');
            });
        }
        function margin_input(){
            $('input').each(function(){
                $(this).css({
                    'margin-top': '30px'
                });
            });
        }
		$( document ).ready(function(){
			$('input').addClass('sign__input');
			$("ul.errorlist").removeClass('errorlist').addClass('alert-error');
            $('#id_old_password').attr('placeholder','Password attuale...');
            $('#id_new_password1').attr('placeholder','Nuova password...');
            $('#id_new_password2').attr('placeholder','Conferma nuova password...');
            deletelabel()
            listyle()
            margin_input()
		});
	</script>	

{% endblock javascript %}