{% extends "base.html" %}

{% block extrahead  %}
    {{ block.super }}
    <script src="/static/card-configuration.js" type="text/javascript"></script>
    <script src="/static/card-configuration-pki-server.js" type="text/javascript"></script>
{% endblock %}

{% block content %}

{% load card_configuration %}
{% keypme_server_feature_card_configuration_read_only as read_only %}

<ul class="nav nav-tabs" id="cardConfigurationTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="card-configuration-card-tab" data-bs-toggle="tab" data-bs-target="#card-configuration-card" type="button" role="tab" aria-controls="card-configuration-card" aria-selected="true">Card</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="card-configuration-card-app-tab" data-bs-toggle="tab" data-bs-target="#card-configuration-card-app" type="button" role="tab" aria-controls="card-configuration-card-app" aria-selected="false">Card Application</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="card-configuration-pki-tab" data-bs-toggle="tab" data-bs-target="#card-configuration-pki" type="button" role="tab" aria-controls="card-configuration-pki" aria-selected="false">PKI</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="card-configuration-hsm-tab" data-bs-toggle="tab" data-bs-target="#card-configuration-hsm" type="button" role="tab" aria-controls="card-configuration-hsm" aria-selected="false">HSM</button>
    </li>
  </ul>
<div class="tab-content" id="cardConfigurationContent">
    <div class="tab-pane fade show active" id="card-configuration-card" role="tabpanel" aria-labelledby="card-configuration-card-tab">
      {% include "card_configuration/include/card.html" %}
    </div>
    <div class="tab-pane fade" id="card-configuration-card-app" role="card-configuration-card-app" aria-labelledby="card-configuration-card-app-tab">
      {% include "card_configuration/include/card_app.html" %}
    </div>
    <div class="tab-pane fade" id="card-configuration-pki" role="card-configuration-pki" aria-labelledby="card-configuration-pki-tab">
      {% include "card_configuration/include/pki_server_list.html" %}
      {% if not read_only %}
      {% include "card_configuration/include/pki_server_create_or_edit.html" %}
      {% endif %}
    </div>
    <div class="tab-pane fade" id="card-configuration-hsm" role="card-configuration-hsm" aria-labelledby="card-configuration-hsm-tab">
      {% include "card_configuration/include/hsm_list.html" %}
      {% if not read_only %}
      {% include "card_configuration/include/hsm_create_or_edit.html" %}
      {% endif %}
    </div>
</div>

<script>
  async function showServerStatus(element, response) {
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const json = await response.json();
    if (json['status'] != 'ok') {
      element.classList.add("bi", "bi-x");
      element.style.color = 'orangered';
      element.style.fontSize = '2rem';
    } else {
      element.classList.add("bi", "bi-check");
      element.style.color = 'seagreen';
      element.style.fontSize = '2rem';
    }
  }

  document.addEventListener("DOMContentLoaded", function() {
      const pkiServerStatusElements = document.getElementsByClassName("pki-server-status");
      Array.prototype.forEach.call(pkiServerStatusElements, async function(element) {
        const pki_server_id = element.id.replace("pki-server-", "");

        const response = await fetch("/api/v1/card_configuration/pki-server/" + pki_server_id + "/status");
        showServerStatus(element, response);
      });

      const hsmStatusElements = document.getElementsByClassName("hsm-status");
      Array.prototype.forEach.call(hsmStatusElements, async function(element) {
        const hsm_id = element.id.replace("hsm-", "");

        const response = await fetch("/api/v1/card_configuration/hsm/" + hsm_id + "/status");
        showServerStatus(element, response);
      });

      const urlParams = new URLSearchParams(window.location.search);

{% if tab %}
      let tabName = "{{tab}}";
{% else %}
      if (!urlParams.has('tab')) {
        return;
      }

      let tabName = urlParams.get('tab');
{% endif %}

      const tabLink = document.querySelector('#card-configuration-' + tabName + '-tab');
      const tabPane = document.querySelector('#card-configuration-' + tabName + '');

      // Remove active class from current active tab and tab-pane
      document.querySelector('.nav-link.active').classList.remove('active');
      document.querySelector('.tab-pane.show.active').classList.remove('show', 'active');

      // Add active class to the new tab and tab-pane
      tabLink.classList.add('active');
      tabPane.classList.add('show', 'active');
  });
  </script>

{% endblock %}