{% extends "base.html" %}
{% load static %}
{% load tags %}
{% load cache %}
{% load humanize %}
{% load tags %}

{% block title %}
  {% if user == request.user %} - Dashboard{% else %} - User: {{ user.username }}{% endif %}
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col col-md-12">
      <h2>
        {% cache 3600 observations-avatar user.email %}
          <img src="{{ user.email|gravatar_url:50 }}" class="img-avatar"/>
        {% endcache %}
        {{ user.displayname }}
      <h2>
    </div>

    <div class="col d-none d-lg-flex justify-content-end align-items-center">
      <span class="user-actions">
        {% if user == request.user %}
            <a class="btn btn-primary" role="button" href="{% url 'users:update_user' %}">
              <span class="bi bi-gear" aria-hidden="true"></span> Settings
           </a>
           {% if not using_auth0 %}
           <a class="btn btn-primary"  role="button" href="{% url 'account_email' %}">
              <span class="bi bi-envelope-at" aria-hidden="true"></span> Email
           </a>
           {% endif %}
           <a class="btn btn-info"  role="button" data-toggle="modal" data-target="#APIModal" href="#">
              <span class="bi bi-Key" aria-hidden="true"></span> API Key
           </a>
        {% endif %}
      </span>
    </div>

    <div class="col d-flex d-lg-none justify-content-end align-items-center">
      <span class="user-actions">
        {% if user == request.user %}
            <a class="btn btn-primary" role="button" href="{% url 'users:update_user' %}">
              <span class="bi bi-gear" aria-hidden="true"></span>
           </a>
           {% if not using_auth0 %}
           <a class="btn btn-primary"  role="button" href="{% url 'account_email' %}">
              <span class="bi bi-envelope-at" aria-hidden="true"></span>
           </a>
           {% endif %}
           <a class="btn btn-info"  role="button" data-toggle="modal" data-target="#APIModal" href="#">
              <span class="bi bi-Key" aria-hidden="true"></span>
           </a>
        {% endif %}
      </span>
    </div>
  </div>


  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="stations-tab" data-toggle="tab" data-target="#stations" type="button" role="tab" aria-controls="stations" aria-selected="true">Ground Stations</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="observations-tab" data-toggle="tab" data-target="#observations" type="button" role="tab" aria-controls="observations" aria-selected="false">Recent Observations</button>
    </li>
  </ul>

  <div class="tab-content" id="user-tab-content">
    <div class="tab-pane fade show active" id="stations" role="tabpanel" aria-labelledby="stations-tab">
      {% if stations %}
        <div class="row">
          <div class="col-md-12">
            {% include 'includes/stations_table.html' with show_client_version=True %}
          </div>
        </div>
      {% else %}
        <div class="row">
          <div class="col-md-12 notice">
            <p>{{ user.displayname }} is not an owner of any ground stations.</p>
          </div>
        </div>
      {% endif %}

      {% if user == request.user %}
        <div class="row">
          <div class="col-md-12">
            <a class="btn btn-outline-dark" href="{% url 'base:station_edit' %}">
              <span class="bi bi-plus" aria-hidden="true"></span> Add Ground Station
            </a>
          </div>
        </div>
      {% endif %}
    </div>

    <div class="tab-pane fade" id="observations" role="tabpanel" aria-labelledby="observations-tab">
      {% if observations %}
        <div class="row">
          <div class="col-md-12">
            {% include 'includes/observations_table.html' %}
          </div>
        </div>
      {% else %}
        <div class="row">
          <div class="col-md-12 notice">
            <p>{{ user.displayname }} is not an author of any observation.</p>
          </div>
        </div>
      {% endif %}

      {% if can_schedule and user == request.user %}
        <div class="row">
          <div class="col-md-12">
            <a class="btn btn-outline-dark" href="{% url 'base:observation_new' %}">
              <span class="bi bi-plus" aria-hidden="true"></span>
              New Observation
            </a>
          </div>
        </div>
      {% endif %}
    </div>
  </div>

  {% if user == request.user %}
    <!-- API Modal -->
    <div class="modal fade" id="APIModal" tabindex="-1" role="dialog" aria-labelledby="APIModalTitle" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="APIModalTitle">API Key</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div id="api-key">
              <div>You can use this token to interact with the API.</div>
              <div>
                <code>{{ token }}</code>
              </div>
            </div>
            <div id="renew-api-message" hidden>
              <p>Do you really want to renew your API Key?</p>
              <p>If you change it, your station(s) will need a configuration update in order to use the new API Key.</p>
              <p>Until this update is done, your station(s) will not be able to get jobs or upload any artifacts for the completed ones.</p>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <form id="renew-api-form" method="post" action="{% url 'users:update_user_token' %}" hidden>
              {% csrf_token %}
              <button type="submit" class="btn btn-danger">Yes, renew the API Key</button>
            </form>
            <button class="btn btn-danger" id="api-modal-button">Renew API Key</button>
            <button type="button" class="btn btn-outline-dark" id="api-modal-close-button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {% include 'includes/satellite.html' %}
{% endblock content %}

{% block javascript %}
  <script src="{% static 'js/satellite.js' %}"></script>
  <script src="{% static 'js/api-renew.js' %}"></script>
{% endblock javascript %}