{% extends 'base.html' %}
{% block title %}API - 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'%}">Mission generator</a></li>
        <li><a href="{% url 'kriging_heatmap'%}">Visualizations</a></li>
        </ul>
      </li>
      <li><a class="active " 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>API</h2>
          <ol class="nav-2-menu">
            <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
            <li><a class="active" href="{% url 'api_page' %}">API</a></li>
          </ol>
        </div>

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

    <br>

    <div class="section-title">
      <h2>API</h2>
      <p>Instructions on how to access our API.</p>
    </div>

    <div class="card-body" id="missions-table">
      <div class="container">

        <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500" style="margin-left:auto; margin-right:auto; justify-content: center;">
          <div class="api-container">
            <p class="description" id="numbers-api">1</p>
              <p class="text-api">Login to our site to generate public authentication token.</p>
          </div>
          <div class="api-container">
            <p class="description" id="numbers-api">2</p>
              <p class="text-api">Run following command in anaconda prompt: <strong>./manage.py drf_create_token [YOUR_EMAIL_HERE]</strong></p>
          </div>
          <div class="api-container">
            <p class="description" id="numbers-api">3</p>
              <p class="text-api">Create a GET request to <strong>localhost:8000/getData/[YOUR_TOKEN]</strong> to retrieve the datasets</p><br><br>
          </div>
      </div>

      </div>
  </div>

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

{% endblock %}