{% extends 'base.html' %}
{% load ui_extras %}

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{% url 'mdm:index' %}">MDM</a></li>
  <li class="breadcrumb-item"><a href="{% url 'mdm:scep_configs' %}">SCEP configurations</a></li>
  <li class="breadcrumb-item active">{{ object }}</li>
</ol>

<div class="object-details">
    <div class="d-flex align-items-center mb-1">
        <h2 class="m-0">{{ object }}</h2>
    </div>
    <div class="d-flex align-items-center mb-3">
        <h3 class="m-0 fs-5 text-secondary">SCEP Configuration</h3>
        <div class="ms-auto">
            {% if perms.mdm.change_scepconfig and object.can_be_updated %}
                {% url 'mdm:update_scep_config' object.pk as url %}
                {% button 'UPDATE' url "Edit SCEP Configuration" %}
            {% endif %}
            {% if perms.mdm.delete_scepconfig and object.can_be_deleted %}
                {% url 'mdm:delete_scep_config' object.pk as url %}
                {% button 'DELETE' url "Delete SCEP Configuration" %}
            {% endif %}
        </div>
    </div>

<table class="table-object-properties">
  <tbody>
    <tr>
      <th width="160px">URL</th>
      <td>{{ object.url }}</th>
    </tr>
    <tr>
      <th>Key usage</th>
      <td>{{ object.key_usage }}</td>
    </tr>
    <tr>
      <th>Key is extractable</th>
      <td>{{ object.key_is_extractable|yesno }}</td>
    </tr>
    <tr>
      <th>Keysize</th>
      <td>{{ object.get_keysize_display }}</td>
    </tr>
    <tr>
      <th>Allow all apps access</th>
      <td>{{ object.allow_all_apps_access|yesno }}</td>
    </tr>
    {% if not object.provisioning_uid %}
    <tr>
      <th>Challenge
      <td>
        <dl class="row">
          <dt class="col-sm-3 text-md-end">Type</dt>
          <dd class="col-sm-9">{{ object.get_challenge_type_display }}</dd>
          {% with object.get_challenge_kwargs as kwargs %}
          {% if object.challenge_type == "STATIC" %}
          <dt class="col-sm-3 text-md-end">Challenge</dt>
          <dd class="col-sm-9">
            <span class="bi bi-eye" aria-hidden="true" style="cursor:pointer"></span>
            <span hidden>{{ kwargs.challenge }}</span>
          </dd>
          {% elif object.challenge_type == "MICROSOFT_CA" %}
          <dt class="col-sm-3 text-md-end">NDES mscep_admin/ endpoint</dt>
          <dd class="col-sm-9">{{ kwargs.url }}</dd>
          <dt class="col-sm-3 text-md-end">mscep admin user</dt>
          <dd class="col-sm-9">{{ kwargs.username }}</dt>
          <dt class="col-sm-3 text-md-end">mscep admin password</dt>
          <dd class="col-sm-9">
            <span class="bi bi-eye" aria-hidden="true" style="cursor:pointer"></span>
            <span hidden>{{ kwargs.password }}</span>
          </dd>
          {% elif object.challenge_type == "OKTA_CA" %}
          <dt class="col-sm-3 text-md-end">Challenge URL</dt>
          <dd class="col-sm-9">{{ kwargs.url }}</dd>
          <dt class="col-sm-3 text-md-end">Username</dt>
          <dd class="col-sm-9">{{ kwargs.username }}</dt>
          <dt class="col-sm-3 text-md-end">Password</dt>
          <dd class="col-sm-9">
            <span class="bi bi-eye" aria-hidden="true" style="cursor:pointer"></span>
            <span hidden>{{ kwargs.password }}</span>
          </dd>
          {% endif %}
          {% endwith %}
        </dl>
      </td>
    </tr>
    {% endif %}
  </tbody>
</table>

{% created_updated_at object %}

</div>

{% endblock %}

{% block extrajs %}
<script nonce="{{ request.csp_nonce }}">
  var openEyes = document.querySelectorAll(".bi-eye");
  openEyes.forEach(function(openEye) {
    openEye.addEventListener("click", function(event) {
      var valueSpan = openEye.nextElementSibling;
      if (valueSpan.hidden) {
        valueSpan.hidden = false;
        openEye.classList.remove("bi-eye");
        openEye.classList.add("bi-eye-slash");
      } else {
        valueSpan.hidden = true;
        openEye.classList.remove("bi-eye-slash");
        openEye.classList.add("bi-eye");
      }
    });
  });
</script>
{% endblock %}