{% extends 'base.html' %}
{% block title %}Upload - 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 class="active " href="#"><span>Missions</span> <i class="bi bi-chevron-down"></i></a>
        <ul>
        <li><a class="nav-2" href="{% url 'upload_log'%}">Upload a file</a></li>
        <li><a class="nav-2" href="{% url 'my_missions'%}">Uploaded missions</a></li>
        <li><a class="nav-2" href="{% url 'trail_generator'%}">Trail generator</a></li>
        <li><a class="nav-2" 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>
  </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>Upload</h2>
          <ol class="nav-2-menu">
            <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
            <li><a class="active" href="{% url 'upload_log' %}">Upload</a></li>
            <li><a id="nav-2"  href="{% url 'my_missions' %}">My missions</a></li>
            <li><a id="nav-2" href="{% url 'trail_generator' %}">Mission generator</a></li>
            <li><a id="nav-2" href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
          </ol>
        </div>

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

    <br>

    <div class="section-title">
      <h2>Upload</h2>
      <p>Upload a log or csv file from any mission here.</p>
    </div>

    <!-- Upload boxes-->
    <section class="contact" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
      <div class="container">
        <div class="row">
            <div class="row">
              <!--Upload log-->
              <div class="col-md-6">
                <div class="info-box">
                    <h4 class="login-title">Upload Log File</h4>
                      <div class="table-responsive">
                          <table class="table">

              <tbody>
              <form method="post"  enctype='multipart/form-data'>
                                          {% csrf_token %}

                                          {{ form.non_field_errors }}

                                          {{ form.source.errors }}
                                          {{ form.source }}
                                          <ul style="list-style: none; text-align: left; margin-left: auto;
                                                      margin-right: auto; width: 300px;">
                                            <li class="field">
                                                {{ form.name.errors }}{{form.name}}
                                            </li>
                                            <li class="field">
                                                {{ form.file.errors }}{{form.file}}
                                            </li>
                                          </ul>
                                  <button id="upload-button" type="submit" class="btn btn-default btn-lg btn-block">Upload</button>

                                  </form>

                              </tbody>
                          </table>
                      </div>
                </div>
              </div>
              <!-- End upload log-->

              <!-- Upload csv -->
              <div class="col-md-6">
                <div class="info-box">
                        <h4 class="login-title">Upload CSV File</h4>
                          <div class="table-responsive">
                              <table class="table">

                    <tbody>
                    <form method="post"  enctype='multipart/form-data'>
                                              {% csrf_token %}

                                              {{ form.non_field_errors }}

                                              {{ form.source.errors }}
                                              {{ form.source }}
                                              <ul style="list-style: none; text-align: left; margin-left: auto;
                                                          margin-right: auto; width: 300px;">
                                                  <li class="field">
                                                      {{ form.name.errors }}{{form.name}}

                                                  </li>
                                                  <li id= "login-boxes" class="field">
                                                      {{ form.file.errors }}{{form.file}}
                                                      </li>


                                                  </ul>

                                      <button id="upload-button" type="submit" class="btn btn-default btn-lg btn-block">Upload</button>

                                      </form>

                                  </tbody>
                              </table>
                          </div>
                </div>
              </div>
              <!-- End upload csv -->
          </div>
        </div>
      </div>
    </section><!-- End Upload boxes Section -->




    </div>



    <br>

</main><!-- End #main -->

{% endblock %}