{% extends "base.html" %}

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

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

{% block content %}
<h3>Create KeypMe card for device '{{device.device_name}}'</h3>

<form>
<div class="row mb-3">
	<label for="username" class="col-sm-4 col-col-sm-4 col-form-label">Select for which user to create KeypMe Card on this computer:</label>
	<div class="col-sm-8">
    <input type="text" class="form-control user_completion" name="username_auto_completion" id="id_username_auto_completion" placeholder="Type user name">
    <input type="hidden" name="username" id="id_username" value="" onchange="on_user_found(this)">
	</div>
</div>
</form>

<div id="card-template-form-div" class="d-none">
  <form id="card-template-form" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="row mb-3">
    <label for="card-template" class="col-sm-4 col-form-label">Card template</label>
    <div class="col-sm-6">
      <select class="form-select" name="card-template" id="card-template" onchange="card_template_load()">
        {% for card_template in card_templates %}
          <option value="{{card_template.id}}">{{card_template.name}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div id="user-request-form">
  </div>
  <input type="hidden" name="user_dn" id="user_dn" value="">
  <input type="hidden" name="device_uuid" id="device_uuid" value="{{device.uuid}}">
  <div class="col-sm-3" style="text-align: center;">
  <button type="submit" class="btn btn-primary">Create card request</button>
  </div>
</form>
</div>

<script>
function getUsernameFromDN(dn) {
  if (!dn) return null;

  // Split on unescaped commas
  const parts = dn.split(/(?<!\\),/);
  for (const part of parts) {
    const [key, ...rest] = part.trim().split('=');
    if (key.trim().toUpperCase() === 'CN') {
      return rest.join('=').replace(/\\,/g, ',').trim();
    }
  }
  return null;
}

function on_user_found(input) {
  document.getElementById("card-template-form-div").classList.remove("d-none");
  document.getElementById("user_dn").value = input.value;

  const username = getUsernameFromDN(input.value);
  const url = `/card_request/${username}/request`;
  document.getElementById("card-template-form").action = url;
}
</script>
{% endblock %}

{% block extrascript %}
{% endblock %}