{% extends "base.html" %}

{% load static %}
{% 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="device" data-formatter="deviceTypeFormatter">Device</th>
      <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}}',
      device_type: '{% if card.device %}{{card.device.type}}{%endif%}',
      device: '{% if card.device %}{{card.device.device_name}}{%endif%}',
      name: '{{card.name}}',
      card_temporary_pin: {{ card.cipher_card_temporary_pin|base64_cipher_json }},
      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}}',
          {% if card_pending_action.card_key %}
          key: '{{card_pending_action.card_key.name}}',
          {% endif %}
          action: '{{card_pending_action.action}}',
          action_name: '{{card_pending_action.get_action_display}}',
          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}}',
          hsm_so_pin: {{ key.hsm_cipher_so_pin|base64_cipher_json }},
          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.deviceTypeFormatter = function(value, row) {
  if (row['device_type'] === "computer") {
    return `<i class="bi bi-laptop" style="font-size: 1.2rem;"></i> ${value}`;
  } else if (row['device_type'] === "smartphone") {
    return `<i class="bi bi-phone" style="font-size: 1.2rem;"></i> ${value}`;
  } else {
    return value;
  }
}

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);
    }
};

function copyHSMSoPin(button, hsm_so_pin) {
  navigator.clipboard.writeText(hsm_so_pin).then(() => {
    // Change icon to checkmark
    const icon = button.querySelector('i');
    icon.className = 'bi bi-check2';
    button.classList.add('btn-primary');
    button.classList.remove('btn-outline-primary');

    // Reset after 2 seconds
    setTimeout(() => {
      icon.className = 'bi bi-clipboard';
      button.classList.remove('btn-primary');
      button.classList.add('btn-outline-primary');
    }, 2000);
  }).catch(err => {
    console.error('Failed to copy:', err);
  });
}

function copyCardTemporaryPin(button, card_temporary_pin) {
  navigator.clipboard.writeText(card_temporary_pin).then(() => {
    // Change icon to checkmark
    const icon = button.querySelector('i');
    icon.className = 'bi bi-check2';

    // Reset after 2 seconds
    setTimeout(() => {
      icon.className = 'bi bi-clipboard';
    }, 2000);
  }).catch(err => {
    console.error('Failed to copy:', err);
  });
}

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

  html.push(`<div class="vstack gap-4">`);
  html.push(`<table class="table table-striped w-75 mx-auto">`);
  html.push(`<thead><tr><th scope="col" class="col-4">Name</th><th scope="col" class="col-2">Algo</th><th scope="col" class="col-2">Expiration</th><th scope="col" class="col-4">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 me-md-2" role="button" href="${value['card_certificate_revoke_url']}" title="Revoke certificate"><i class="bi bi-x-circle"></i></a>`);
    }
    if (value['hsm_so_pin'] !== null) {
      html.push(`{% include "include/secure_vault_button.html" with button_style="btn-sm btn-outline-primary" secure_vault_entry_human_name="HSM SO pin" on_click_callback="secure_vault_inject(this, ${JSON.stringify(value['hsm_so_pin'])})" %}`);
    }
    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['key'] !== undefined) {
      html.push(`<tr><td>${value['action_name']} ${value['key']} - <i>${value['created_date']}</i></td><td>`);
    } else {
      html.push(`<tr><td>${value['action_name']} - <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(`<form action="/card/${row['id']}/delete" method="post">`);
  html.push(`{% csrf_token %}`);
  html.push(`<button type="submit" class="btn btn-primary p-1 m-2">Delete card</button>`);
  if (row['card_temporary_pin'] !== null) {
    html.push(`{% include "include/secure_vault_button.html" with secure_vault_entry_human_name="card temporary PIN" on_click_callback="secure_vault_inject(this, ${JSON.stringify(row['card_temporary_pin'])})" %}`);
  }
  html.push(`</form>`);

  html.push(`</div></div>`);
  html.push(`</div>`);
  return html.join('')
}

function secure_vault_inject(button, value) {
  const secure_vault_form = button.closest('form[name="secret_vault_decode_form"]');

  const hiddenValueInput = document.createElement('input');
  hiddenValueInput.type = 'hidden';
  hiddenValueInput.name = 'cipher_value';
  hiddenValueInput.value = value['value'];
  secure_vault_form.appendChild(hiddenValueInput);

  const hiddenIVInput = document.createElement('input');
  hiddenIVInput.type = 'hidden';
  hiddenIVInput.name = 'cipher_iv';
  hiddenIVInput.value = value['iv'];
  secure_vault_form.appendChild(hiddenIVInput);
}
</script>

<script src="{% static 'secure_vault_button.js' %}" defer></script>
{% endblock %}