{% load static %}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

<style>
    
    body {
        margin-top: 100px;
        /* background-image: url('https://3.bp.blogspot.com/-juutvktsA3I/WJsuDK2fYJI/AAAAAAAADJc/BLJqU67PqgMFlqG2E9KgxECwFlpO8_e1wCLcB/s4600/Peta%2BKabupaten%2BOgan%2BKomering%2Bulu%2B%2BOKU.gif'); */
        
    }

    /* .logo{ nn
        background-image: url("{% static 'img/logomaps.png' %}");
    } */
    .card-header{
        background-color: #1a222f !important;
        color: white;
    }
</style>
</head>
<body>
<div class="container">
<br>


<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<header class="card-header">
	<center>
        <h4 class="card-title mt-2 logo"> Log in OKU-GIS</h4>
    </center>
</header>
<article class="card-body">

<div>
    {% if form.errors %}
    <div class="alert alert-danger">
        Username atau Password salah. Silahkan coba kembali.
    </div>
    {% endif %}
</div>
{% load widget_tweaks %}
<form method="post" action="{% url 'login' %}" novalidate>
    {% csrf_token %}
	<div class="form-group">
		<label>{{ form.username.label_tag }}</label>
        {% if form.is_bound %}
            {% if form.username.errors %}
                {% render_field form.username class="form-control is-invalid" %}
            {% else %}
                {% render_field form.username class="form-control is-valid" %}
            {% endif %}
        {% else %}
            {% render_field form.username class="form-control" %}
        {% endif %}
	</div> <!-- form-group end.// -->
	<div class="form-group">
		<label>{{ form.password.label_tag }}</label>
	    {% if form.is_bound %}
            {% if form.password.errors %}
                {% render_field form.password class="form-control is-invalid" %}
            {% else %}
                {% render_field form.password class="form-control is-valid" %}
            {% endif %}
        {% else %}
            {% render_field form.password class="form-control" %}
        {% endif %}
	</div> <!-- form-group end.// -->  
    <hr style="margin-top: 50;">
    <div class="form-group" >
        <input type="hidden" name="next" value="{{ next }}">
        <center><button type="submit" class="btn btn-primary " style="background-color: #1a222f; /* Green */"> Login  </button></center>
    </div> <!-- form-group// -->                                             
</form>
</article> <!-- card-body end .// -->
<!-- <div class="border-top card-body text-center">Belum punya akun? <a href="#">Sign Up</a></div>
<div class="border-top card-body text-center"><a href="#">Lupa Password?</a></div> -->
</div> <!-- card.// -->
</div> <!-- col.//-->

</div> <!-- row.//-->

</div> 
<!--container end.//-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>