{% extends 'frontend/index.html' %}
{% load static %}

{% block head %}

    <link rel="stylesheet" type="text/css" href="{% static "login/css/index.css" %}"
    /><!--===============================================================================================-->
	<link rel="icon" type="image/png" href="{% static "login/images/icons/favicon.ico" %}"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/bootstrap/css/bootstrap.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/fonts/font-awesome-4.7.0/css/font-awesome.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/fonts/iconic/css/material-design-iconic-font.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/animate/animate.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/css-hamburgers/hamburgers.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/animsition/css/animsition.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/select2/select2.min.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/vendor/daterangepicker/daterangepicker.css" %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static "login/css/util.css" %}">
	<link rel="stylesheet" type="text/css" href="{% static "login/css/main.css" %}">
<!--===============================================================================================-->
{% endblock head %}

{% block content %}
<div class="login_container">
    <div class="container-login100" style="background-image: url("{% static 'login/images/bg-01.jpg' %}");">
		<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
			<form class="login100-form validate-form">
				<span class="login100-form-title p-b-37">
					Register
				</span>

				<div class="wrap-input100 validate-input m-b-10" data-validate="Enter username">
					<input class="input100" type="username" name="username" placeholder="username">
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100 validate-input m-b-10" data-validate="Enter email">
					<input class="input100" type="email" name="email" placeholder="email">
					<span class="focus-input100"></span>
				</div>

                <div class="wrap-input100 validate-input m-b-10" data-validate="Enter first name">
					<input class="input100" type="text" name="firstname" placeholder="first name">
					<span class="focus-input100"></span>
				</div>

                <div class="wrap-input100 validate-input m-b-10" data-validate="Enter last name">
					<input class="input100" type="text" name="lastname" placeholder="lastname">
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100 validate-input m-b-10" data-validate = "Enter password">
					<input class="input100" type="password" name="pass1" placeholder="password">
					<span class="focus-input100"></span>
				</div>

                <div class="wrap-input100 validate-input m-b-15" data-validate = "Confirm password">
					<input class="input100" type="password" name="pass2" placeholder="confirm password">
					<span class="focus-input100"></span>
				</div>

				<div class="container-login100-form-btn">
					<button class="login100-form-btn">
						Register
					</button>
				</div>

				<div class="text-center p-t-57 p-b-20">
					<span class="txt1">
						Or signin with
					</span>
				</div>

				<div class="flex-c p-b-10">
					<a href="#" class="login100-social-item">
						<i class="fa fa-facebook-f"></i>
					</a>

					<a href="#" class="login100-social-item">
						<img src="{% static 'login/images/icons/icon-google.png' %}" alt="GOOGLE">
					</a>
				</div>

				<div class="text-center">
					<a href="{% url 'login' %}" class="txt2 hov1">
						Login
					</a>
				</div>
			</form>


		</div>
	</div>
	<div id="dropDownSelect1"></div>
{% endblock content %}

{% block js %}

<!--===============================================================================================-->
	<script src="{% static "login/vendor/jquery/jquery-3.2.1.min.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/vendor/animsition/js/animsition.min.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/vendor/bootstrap/js/popper.js" %}"></script>
	<script src="{% static "login/vendor/bootstrap/js/bootstrap.min.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/vendor/select2/select2.min.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/vendor/daterangepicker/moment.min.js" %}"></script>
	<script src="{% static "login/vendor/daterangepicker/daterangepicker.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/vendor/countdowntime/countdowntime.js" %}"></script>
<!--===============================================================================================-->
	<script src="{% static "login/js/main.js" %}"></script>
{% endblock js %}