{% extends 'base.html' %}
{% block title %}Login - BBQUDA{% endblock title %}
{% block content %}

<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
  <div class="container d-flex justify-content-between align-items-center">
    {% include 'base/logo.html' %}

    <nav id="navbar" class="navbar">
      <ul>
      <li><a href="{% url 'homepage' %}">Home</a></li>
      <li><a href="{% url 'about'%}">About</a></li>
      <li class="dropdown"><a href="#"><span>Missions</span> <i class="bi bi-chevron-down"></i></a>
        <ul>
        <li><a  href="{% url 'upload_log'%}">Upload a file</a></li>
        <li><a href="{% url 'my_missions'%}">Uploaded missions</a></li>
        <li><a href="{% url 'trail_generator'%}">Trail generator</a></li>
        <li><a href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
        </ul>
    </li>
      <li><a href="{% url 'api_page'%}">API</a></li>
      <li><a href="{% url 'contact' %}">Contact Us</a></li>
      <li>{% if request.user.is_authenticated %}
        <a href="{% url 'logout' %}"><button class="login-button">Logout</button></a>
        {% else %}
        <a href="{% url 'login' %}"><button class="login-button">Login</button></a>
        {% endif %}
    </li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
  </nav><!-- .navbar -->
  </div>

  <style>

    .errorlist
        {
            color: red;
        }

    </style>
</header><!-- End Header -->

<main id="main">

  <!-- ======= Contact Section ======= -->
  <section class="breadcrumbs">
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <h2>Login</h2>
        <ol class="nav-2-menu">
          <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
          <li><a class="active" href="{% url 'login' %}">Login</a></li>
        </ol>
      </div>

    </div>
  </section><!-- End Contact Section -->

<div class="card-body" >
          <div class="form-fields-section" >
              <div class="registration" >
                  <div class="bg-form" id="login-form">
                      <form method="post" action="" id="form-login" class="login"><div class="signin form-fields-section kaxsdc" data-event="load">
                          {% csrf_token %}

                          <h4 class="login-title"> Login</h4>

                          <div class="returningCustomer bg-form">
                                  <fieldset>
                                      <ol id="login-form-headings">
                                          <li id= "login-boxes" class="field field--content">
                                              {{ form.username.errors }}
                                              {{ form.username.label_tag }}
                                              {{form.username }}
                                          </li>

                                          <li id= "login-boxes" class="field field--content">
                                              {{ form.password.errors }}
                                              {{ form.password.label_tag }}
                                              {{ form.password }}
                                          </li>
                                      </ol>
                                  </fieldset>
                                  <button type="submit" id="submit-button" class="btn btn-default btn-lg btn-block">Login</button>
                          </div>

                      </form>
                      <div class="separator">
                          <hr>
                      </div>
                      <a href="{%url 'register'%}"
                         class="cw-btn cw-btn--default cw-btn--full js-sign-in">
                         Dont have an account? Register here.
                      </a>
                  </div>
              </div>
          </div>

</div>
</main>

{% endblock %}