{% 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:recovery_password_configs' %}">Recovery password 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">Recovery Password Configuration</h3>
        <div class="ms-auto">
            {% if perms.mdm.change_recoverypasswordconfig %}
                {% url 'mdm:update_recovery_password_config' object.pk as url %}
                {% button 'UPDATE' url "Edit Recovery Password Configuration" %}
            {% endif %}
            {% if perms.mdm.delete_recoverypasswordconfig and object.can_be_deleted %}
                {% url 'mdm:delete_recovery_password_config' object.pk as url %}
                {% button 'DELETE' url "Delete Recovery Password Configuration" %}
            {% endif %}
        </div>
    </div>

    <table class="table-object-properties">
    <tbody>
        <tr>
        <th width="240px">Name</th>
        <td>{{ object.name }}</th>
        </tr>
        <tr>
        <th>Dynamic password?</th>
        <td>
            {{ object.dynamic_password|yesno }}
        </td>
        </tr>
        {% if not object.dynamic_password %}
        <tr>
        <th>Static password</th>
        <td>
            <span class="bi bi-eye" aria-hidden="true" style="cursor:pointer"></span>
            <span hidden>{{ object.get_static_password }}</span>
        </td>
        </tr>
        {% endif %}
        <tr>
        <th>Automatic rotation</th>
        <td>
            {% if not object.rotation_interval_days %}
            never
            {% else %}
            every {{ object.rotation_interval_days }} day{{ object.rotation_interval_days|pluralize }}
            {% endif %}
        </td>
        </tr>
        <tr>
        <th>Rotate firmware password?</th>
        <td>
            {{ object.rotate_firmware_password|yesno }}
        </td>
        </tr>
        <tr>
        <th>Blueprint{{ blueprint_count|pluralize }} ({{ blueprint_count }})</th>
        <td>
            {% if blueprint_count %}
            <ul class="list-unstyled">
            {% for blueprint in blueprints %}
            {% if perms.mdm.view_blueprint %}
            <li><a href="{{ blueprint.get_absolute_url }}">{{ blueprint }}</a></li>
            {% else %}
            <li>{{ blueprint }}</li>
            {% endif %}
            {% endfor %}
            </ul>
            {% else %}
            -
            {% endif %}
        </td>
    </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 %}