{% extends 'main/layout.html' %} 
{% load static %} 
{% load crispy_forms_tags %} 
{% block title %}
  Login
{% endblock title %}
{% block content %}

<section class=" mt-4">
  <!-- Page content-->
  <div class="">
    <div class="container-fluid grid-example">
      <div class="card mb-3">
        <div class="card-body">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                <div class="content-heading text-center">
                  <div class="row justify-content-between mb-2">
                    <div class="col-md-4">
                      <img class="rounded-circle thumb80" src="{% static 'main/img/rdtl.png' %}" alt="Image" />
                    </div>
                    <div class="col-md-4">
                      <img class="rounded-circle thumb80" src="{% static 'main/img/mae.png' %}" alt="Image" />
                    </div>
                  </div>
                  <h1 class="text-center">Ministério da Administração Estatal</h1>
                  <h3>Diresaun Nasional Apoiu Administrasaun Sukus</h3>
                  <hr />
                  <h1>SISTEMA INTEGRADO DE INFORMAÇÃO E GESTÃO DE DADOS DE SUCOS E ALDEIAS (SIIGSA)</h1>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card border-info shadow-lg pt-1">
                  <div class="card-header text-center">
                    <h2>FAVOR LOGIN</h2>
                  </div>
                  <hr />
                  
                  <div class="card-body">
                    <form method="POST">
                      {% comment %} {% for key,msg in form.errors.items %}
                       {{msg}}
                      {% endfor %} {% endcomment %}
                      {% csrf_token %} 
                      {{ form|crispy }}
                      <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
                        <button class="btn btn-sm btn-outline-info" type="submit">Log In <i class="fa fa-sign-in"></i></button>
                      </div>
                    </form>
                  </div>
                  <!--end card-body-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock content %}
