{% extends 'base.html' %}
{% block title %}Missions Stats - 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  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'%}">Mission 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>
  </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>My missions</h2>
          <ol class="nav-2-menu">
            <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
            <li><a id="nav-2" href="{% url 'upload_log' %}">Upload</a></li>
            <li><a class="active" 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>{{mission.name}} - Descriptive Statistics</h2>
      <p>View all your mission stats here.</p>
    </div>

    <div class="card">
      <div class="card-body" id="mission-stats">
          <div class="table-responsive">
              <table class="table">
                  <thead class=" thead-dark"> <tr>
                      <th scope="col"></th>
                      <th scope="col">Total Water Column (m)</th>
                      <th scope="col">Temperature (c)</th>
                      <th scope="col">pH</th>
                      <th scope="col">ODO mg/L</th>
                      <th scope="col">Salinity (ppt)</th>
                      <th scope="col">Turbid+ NTU</th>
                      <th scope="col">BGA-PC cells/mL</th>
                      </tr>
                  </thead>
          <tbody>
              <tr>
              <th class="table-dark">Count</th>
              <td>{{water_count}}</td>
              <td>{{temp_count}}</td>
              <td>{{pH_count}}</td>
              <td>{{ODO_count}}</td>
              <td>{{salinity_count}}</td>
              <td>{{turbid_count}}</td>
              <td>{{BGA_count}}</td>
              </tr>
              <tr>
              <th class="table-dark">Mean</th>
              <td>{{water_mean}}</td>
              <td>{{temp_mean}}</td>
              <td>{{pH_mean}}</td>
              <td>{{ODO_mean}}</td>
              <td>{{salinity_mean}}</td>
              <td>{{turbid_mean}}</td>
              <td>{{BGA_mean}}</td>
              </tr>
              <tr>
              <th class="table-dark">STDev</th>
              <td>{{water_std}}</td>
              <td>{{temp_std}}</td>
              <td>{{pH_std}}</td>
              <td>{{ODO_std}}</td>
              <td>{{salinity_std}}</td>
              <td>{{turbid_std}}</td>
              <td>{{BGA_std}}</td>
              </tr>
              <tr>
              <th class="table-dark">Min</th>
              <td>{{water_min}}</td>
              <td>{{temp_min}}</td>
              <td>{{pH_min}}</td>
              <td>{{ODO_min}}</td>
              <td>{{salinity_min}}</td>
              <td>{{turbid_min}}</td>
              <td>{{BGA_min}}</td>
              </tr>
              <tr>
              <th class="table-dark">25%</th>
              <td>{{water_25}}</td>
              <td>{{temp_25}}</td>
              <td>{{pH_25}}</td>
              <td>{{ODO_25}}</td>
              <td>{{salinity_25}}</td>
              <td>{{turbid_25}}</td>
              <td>{{BGA_25}}</td>
              </tr>
              <tr>
              <th class="table-dark">50%</th>
              <td>{{water_50}}</td>
              <td>{{temp_50}}</td>
              <td>{{pH_50}}</td>
              <td>{{ODO_50}}</td>
              <td>{{salinity_50}}</td>
              <td>{{turbid_50}}</td>
              <td>{{BGA_50}}</td>
              </tr>
              <tr>
              <th class="table-dark">75%</th>
              <td>{{water_75}}</td>
              <td>{{temp_75}}</td>
              <td>{{pH_75}}</td>
              <td>{{ODO_75}}</td>
              <td>{{salinity_75}}</td>
              <td>{{turbid_75}}</td>
              <td>{{BGA_75}}</td>
              </tr>
              <tr>
              <th class="table-dark">Max</th>
              <td>{{water_max}}</td>
              <td>{{temp_max}}</td>
              <td>{{pH_max}}</td>
              <td>{{ODO_max}}</td>
              <td>{{salinity_max}}</td>
              <td>{{turbid_max}}</td>
              <td>{{BGA_max}}</td>
              </tr>
                  </tbody>
              </table>
          </div>
      </div>
    </div>

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

{% endblock %}