{% extends "base.html" %}

{% load ldap_front %}
{% load card_configuration %}

{% block content %}
<table id="table"
  class="table table-striped table-hover" data-classes="table-borderless"
  data-search="true"
  data-sort-name="name"
  data-detail-view="true"
  data-detail-formatter="detailFormatter">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th scope="col" data-field="algos" data-formatter="algoFormatter">Algo</th>
      <th scope="col" data-field="expiration" data-formatter="expirationFormatter">Expiration</th>
      <th scope="col" data-field="status" data-formatter="statusFormatter">Status</th>
      <th scope="col" data-field="pending_actions" data-formatter="pendingActionFormatter" data-events="actionEvents">Pending actions</th>
    </tr>
  </thead>
</table>
{% endblock %}

{% block extrascript %}
<script>
const $table = $('#table');
function initTable() {
  const data = [
{% for card in cards %}
    {
      id: '{{card.id}}',
      name: '{{card.name}}',
      algos: [
		    {% for algo in card.algo %}'{{algo}}', {% endfor %}
      ],
      expiration: '{{card.expiration|date:"d/m/Y"}}',
      expiration_class: '{{ card.expiration|expiration_date_class }}',
      status: '{{card.status.value}}',
      {% if card.status.value == "APPROVED" %}
      status_class: 'text-bg-success',
      {% elif card.status.value == "REVOKED" %}
      status_class: 'text-bg-secondary',
      {% elif card.status.value == "WAITING_FOR_REVIEW" %}
      status_class: 'text-bg-warning',
      {% elif card.status.value == "PENDING" %}
      status_class: 'text-bg-primary',
      {% endif %}
      pending_actions: [
        {% for card_pending_action in card.card_pending_actions %}
        {
          id: '{{card_pending_action.id}}',
          key: '{{card_pending_action.card_key.name}}',
          action: '{{card_pending_action.action}}',
          card_pending_action_delete_url: '{% url 'card_pending_action_delete' card=card.id action=card_pending_action.id %}',
          created_date: '{{card_pending_action.created_datetime|date:"d/m/Y"}}',
        },
        {% endfor %}
      ],
      keys: [
      {% for key in card.keys.all %}
        {
          id: '{{key.id}}',
          name: '{{key.name}}',
          algo: '{{key.algo|algo_name}}',
          card_certificate_renew_url: '{% url 'card_certificate_renew' card=card.id key=key.id %}',
          card_certificate_revoke_url: '{% url 'card_certificate_revoke' card=card.id key=key.id %}',
          {% if key.key_template and key.key_template.pki_server %}
            pki_server: '{{key.key_template.pki_server.server_backend}}',
          {% endif %}
          {% if key.certificate_expiration_datetime %}
            certificate_expiration: '{{key.certificate_expiration_datetime|date:"d/m/Y"}}'
          {% endif %}
        },
      {% endfor %}
      ]
    },
{% endfor %}
  ];

  $table.bootstrapTable({ data })
}

$(document).ready(function() {
    initTable();
});

window.algoFormatter = function(value, row) {
   return value.join(', ');
}

window.statusFormatter = function(value, row) {
   return `<span class="badge ${row['status_class']}">${value}</span>`;
}

window.expirationFormatter = function(value, row) {
   return `<span class="${row['expiration_class']}">${value}</span>`;
}

window.pendingActionFormatter = function(value, row) {
  if (value !== undefined) {
    return `<button type="button" class="btn btn-primary btn-sm show-details">Pending actions <span class="badge text-bg-secondary">${value.length}</span></button>`;
  } else {
    return `<button type="button" class="btn btn-primary btn-sm show-details">Pending actions</button>`;
  }
}

window.actionEvents = {
    'click .show-details': function (e, value, row, index) {
        $('#table').bootstrapTable('toggleDetailView', index);
    }
};

window.detailFormatter = (index, row) => {
  const html = []

  html.push(`<div class="vstack gap-4">`);
  html.push(`<table class="table table-striped">`);
  html.push(`<thead><tr><th scope="col">Name</th><th scope="col">Algo</th><th scope="col">Expiration</th><th scope="col">Action</th></tr></thead>`);
  for (const [key, value] of Object.entries(row['keys'])) {
    var expiration_date = '-';
    if (value['certificate_expiration'] !== undefined) {
      expiration_date = value['certificate_expiration'];
    }
    html.push(`<tr><td>${value['name']}</td><td>${value['algo']}</td><td>${expiration_date}</td>`);
    html.push(`<td>`);
    if (value['pki_server'] !== undefined) {
      html.push(`<a class="btn btn-outline-primary btn-sm me-md-2" role="button" href="${value['card_certificate_renew_url']}" title="Renew certificate"><i class="bi bi-arrow-repeat"></i></a>`);
      html.push(`<a class="btn btn-outline-primary btn-sm" role="button" href="${value['card_certificate_revoke_url']}" title="Revoke certificate"><i class="bi bi-x-circle"></i></a>`);
    }
    html.push(`</td></tr>`);
  }
  html.push(`</table>`);

  html.push(`<div class="row justify-content-center"><div class="col-md-6">`);
  html.push(`<table class="table table-striped">`);
  html.push(`<thead><tr><th scope="col">Pending action</th><th scope="col"></th></tr></thead>`);
  for (const [key, value] of Object.entries(row['pending_actions'])) {
    if (value['action'] == 1) {
      html.push(`<tr><td>Revoke ${value['key']} - <i>${value['created_date']}</i></td><td>`);
    } else if (value['action'] == 2) {
      html.push(`<tr><td>Renew ${value['key']} - <i>${value['created_date']}</i></td><td>`);
    }
    html.push(`<a class="btn btn-sm" role="button" href="${value['card_pending_action_delete_url']}" title="Delete pending action"><i class="bi bi-trash-fill"></i></button>`);
    html.push(`</td></tr>`);
  }
  html.push(`</table>`);
  html.push(`</div></div>`);
  html.push(`</div>`);
  return html.join('')
}
</script>
{% endblock %}