{% extends 'base.html' %}
{% block title %}Home - BBQUDA{% endblock title %}
{% block content %}
{% load static %}

  <!-- ======= 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 class="active " 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'%}">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 -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex justify-cntent-center align-items-center">
    <div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">

      <!-- Slide 1 -->
      <div class="carousel-item active">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">This is Biscayne Bay, Florida</h2>
          <p class="animate__animated animate__fadeInUp"></p>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Our fishes are dying</h2>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">We want to do something about it</h2>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
      </a>

    </div>
  </section><!-- End Hero -->



  <main id="main" style="margin-top: 0%;">

    <!-- ======= Services Section ======= -->
    <section class="services">
      <div class="container">

        <div class="row">
          <div class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="fade-up">
            <div class="icon-box icon-box-pink">
              <div class="icon"><i class="bx bxs-file"></i></div>
              <h4 class="title"><a href="{% url 'my_missions'%}">Gather data</a></h4>
              <p class="description">We are collecting water quality data using our underwater vehicles and deploying them in Biscayne Bay.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
            <div class="icon-box icon-box-cyan">
              <div class="icon"><i class="bx bx-upload"></i></div>
              <h4 class="title"><a href="{% url 'upload_log'%}">Upload</a></h4>
              <p class="description">You can join us and upload your mission files and analyze your data.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
            <div class="icon-box icon-box-green" >
              <div class="icon"><i class="bx bx-log-in"></i></div>
              <h4 class="title"><a href="{% url 'api_page'%}">Use Our API</a></h4>
              <p class="description">Get access to publicly available datasets uploaded by field researchers.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
            <div class="icon-box icon-box-blue">
              <div class="icon"><i class="bx bx-world"></i></div>
              <h4 class="title"><a href="{% url 'kriging_heatmap'%}">Visualize</a></h4>
              <p class="description">With our heatmap tool, you can interact with your data to gain new insights.</p>
            </div>
          </div>

        </div>

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

    <!-- ======= Why Us Section ======= -->
    <section class="why-us section-bg" data-aos="fade-up" date-aos-delay="200">
      <div class="container">

        <div class="row">
          <div class="col-lg-6 video-box">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/qOFmkouoJXM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </div>

          <div class="col-lg-6 d-flex flex-column justify-content-center p-5">

              <h4 class="title"><a href="">Find us on the news!</a></h4>
              <p class="description">We are honored to have gotten the chance to be interviewed by our local news team on April 2, 2021 about our research efforts in rescuing the Biscayne Bay.
              </p>

              <br>

            </div>

          </div>
        </div>

      </div>
    </section><!-- End Why Us Section -->

    <!-- ======= Features Section ======= -->
    <section class="features">
      <div class="container">

        <div class="section-title">
          <h2>Our Recent Missions</h2>
        </div>

        <div class="row portfolio-container" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">

          <div class="col-lg-4 col-md-6 portfolio-wrap filter-app">
            <div class="portfolio-item">
              <img src="{% static 'ecomapperInsertion.jpeg' %}" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h3>Little River</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-wrap filter-web">
            <div class="portfolio-item">
              <img src="{% static 'standingMapper.jpeg' %}" class="img-fluid" alt="" style="size: 20%;">
              <div class="portfolio-info">
                <h3>FIU</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-wrap filter-web">
            <div class="portfolio-item">
              <img src="{% static 'biscayne-canal.jpeg' %}" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h3>Biscayne Bay canal</h3>
              </div>
            </div>
          </div>
        </div>





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

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

  {% endblock %}