{% extends "core/base/base.html" %}
{% comment %}
SPDX-FileCopyrightText: 2022 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
{% load vendor_tags %}
{% block title %}
  HELIPORT API Tokens
{% endblock title %}
{% block content %}
  {% vendor_css "codemirror" %}
  <style>
    .expired-token-row{
        color: var(--bs-gray);
    }
    .token-row > td{
        vertical-align: middle;
    }
    .CodeMirror{
        height: 10em;
        margin-bottom: 2em;
    }
  </style>
  <div class="row">
    <div class="col">
      <h3>HELIPORT API Tokens</h3>
      {% comment %} trigger delete modal {% endcomment %}
      <button type="button"
              class="btn btn-danger mb-3"
              data-bs-toggle="modal"
              data-bs-target="#deleteTokenModal">Delete All Tokens</button>
      {% comment %} Delete Modal {% endcomment %}
      <div class="modal fade"
           id="deleteTokenModal"
           tabindex="-1"
           role="dialog"
           aria-labelledby="deleteTokenModalLabel"
           aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteTokenModalLabel">Delete All Tokens</h5>
              <button type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"></button>
            </div>
            <div class="modal-body">Are you sure you want to delete all Tokens for the HELIPORT API?</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-danger" id="token-delete-all">Delete</button>
            </div>
          </div>
        </div>
      </div>
      {% comment %} Show Token Modal {% endcomment %}
      <div class="modal fade"
           id="showTokenModal"
           tabindex="-1"
           role="dialog"
           aria-labelledby="showTokenModalLabel"
           aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteTokenModalLabel">Your New Token</h5>
              <button type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p>Note that this token is not shown again.</p>
              <div class="input-group mb-3">
                <input type="text" class="form-control" id="token-show" readonly />
                <button class="btn btn-outline-secondary"
                        type="button"
                        id="token-to-clipboard">
                  <i class="fa-solid fa-clipboard"></i>
                </button>
              </div>
            </div>
            <div class="modal-footer">
              <a href="{% url 'core:user_token_list' %}"
                 class="btn btn-primary"
                 id="token-after-show"
                 onclick="window.location.reload();">OK</a>
            </div>
          </div>
        </div>
      </div>
      <table class="table">
        <tr>
          <th>Hash</th>
          <th>
            <label for="token-name">Name</label>
          </th>
          <th>Date created</th>
          <th>
            <label for="token-expiry">Date expiry</label>
          </th>
          <th></th>
        </tr>
        {% for token in tokens %}
          <tr class="token-row {% if token.expiry < now %}expired-token-row{% endif %}">
            <td>
              <a id="{{ token.pk }}">{{ token.digest|truncatechars:7 }}</a>
            </td>
            <td>{{ token.namedtoken.name }}</td>
            <td>{{ token.created }}</td>
            <td>
              {% if token.expiry %}
                {{ token.expiry }}
              {% else %}
                Never
              {% endif %}
            </td>
            <td>
              <button class="btn btn-danger" data-delete-token="{{ token.pk }}">Delete</button>
            </td>
          </tr>
        {% endfor %}
        <tr>
          <td class="align-middle">New</td>
          <td>
            <input id="token-name" class="form-control" />
          </td>
          <td class="align-middle"></td>
          <td>
            <input id="token-expiry"
                   type="date"
                   value="{{ tomorrow }}"
                   class="form-control" />
          </td>
          <td>
            <button class="btn btn-primary" id="token-create">Create</button>
          </td>
        </tr>
      </table>
      <p>Example how to use tokens using the third-party Python Requests package:</p>
      <textarea id="token-example" rows="6" cols="72" readonly>
import requests
response = requests.get(
    "{{ api_url }}",
    headers={"Authorization": "{{ auth_header_prefix }} {{ token_prefix }}123abc..."},
)
print(response.json())</textarea>
    </div>
  </div>
  <br />
{% endblock content %}
{% block script %}
  <div id="token-interaction"
       class="invisible"
       data-token-delete-url="{% url 'core:delete_token' %}"
       data-token-logout-all-url="{% url 'core:logout_all_tokens' %}"
       data-login-named-url="{% url 'core:login_named' %}"
       data-user-token-list-url="{% url 'core:user_token_list' %}"></div>
  <script src="{% static 'core/js/token_interaction.js' %}"></script>
  {% vendor_js "codemirror" %}
  <script>
    let token_example_area = document.getElementById('token-example');
    let code_mirror = CodeMirror.fromTextArea(token_example_area,
        {'lineNumbers': true, 'mode': 'python', 'readOnly': true}
    );
  </script>
{% endblock script %}