<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}

	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<title>
        {% block title %}LOGIN {% endblock %} - SIKD KITA
    </title>

	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<link rel="icon" href="{% static 'assets/img/sikd.ico' %} " type="image/x-icon"/>

	<!-- Fonts and icons -->
	<script src="{% static 'assets/js/plugin/webfont/webfont.min.js' %}"></script>
	<script>
		WebFont.load({
			google: {"families":["Lato:300,400,700,900"]},
			custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], 
			urls: ['{% static "assets/css/fonts.min.css" %}']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>

	<!-- CSS Files -->
	<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">
	<link rel="stylesheet" href="{% static 'assets/css/atlantis.min.css' %}">

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link rel="stylesheet" href="{% static 'assets/css/demo.css' %}">
	<link rel="stylesheet" href="{% static 'assets/css/sinergi.css' %}">


    <!-- Specific Page CSS goes HERE  -->
    {% block stylesheets %}{% endblock stylesheets %}

</head>
<body>
	<div class="wrapper">
          <div class="page-inner"> 
            <div class="row">
                <div class="col-md-12"> 
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav justify-content-end">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#">Tentang </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Kontak Kami </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Daftar</a>
                                </li>
                            </ul>
                            <div class="card-title titleLogin">
                                <h1>
                                    <b> SINERGI DJPK </b>
                                 </h1>
                                 {% if msg %}
                                    <span class="text-danger">{{ msg | safe }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% if next %}
                        <form action="/login/?next={{next}}" method="post" >
                        {%else%}
                        <!-- <form action="/login/" method="post" > -->
                        <form method="post" action="">
                        {% endif %}
                            {% csrf_token %}
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 ">
                                        <div class="form-group">
                                            <p> Username </p>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="icon-user"></i>
                                                    </span>
                                                </div>
                                                {{ form.username }}
                                            </div>
                                        </div>


                                       <div class="form-group">
                                            <p> Password</p>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="icon-lock"></i>
                                                    </span>
                                                </div>
                                                {{ form.password }}
                                            </div>
                                        </div>
                                        <div class="card-action">
                                            <!-- <p>Lupa Password</a></p>  -->
                                            <!-- {% comment %} <p> <a href="{% url 'register' %}" >Lupa Password</a></p>  {% endcomment %} -->
                                            <button type="submit" class="btn btn-secondary btn-round btnFull btn-block">Masuk</button>
                                        </div>
                                    </div>

                                    <div class="col-md-6  ">
                                        {% load static %}
                                        <img src="{% static 'assets/img/login.jpg' %}" width="90%"/>

                                    </div>
                                </div>
                            </div>
                        
                            
                            

                        </form>

                    </div>
                </div>
            </div>
          </div>
        {% if request.user.is_authenticated %}
        {% endif %}		
	</div>

	{% include 'includes/scripts.html' %}

    <!-- Specific Page JS goes HERE  -->
    {% block javascripts %}{% endblock javascripts %}

</body>
</html>