{% extends 'base.html' %}

{% 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:filevault_configs' %}">FileVault configurations</a></li>
  {% if object %}
  <li class="breadcrumb-item"><a href="{{ object.get_absolute_url }}">{{ object }}</a></li>
  <li class="breadcrumb-item active">update</li>
  {% else %}
  <li class="breadcrumb-item active">create</li>
  {% endif %}
</ol>

<h3>{% if object %}Update FileVault configuration <i>{{ object }}</i>{% else %}Create FileVault configuration{% endif %}</h3>

<form method="post" class="update-form">{% csrf_token %}
  {{ form }}
  <p>
    {% if object %}
    <a class="btn btn-outline-secondary" href="{{ object.get_absolute_url }}">Cancel</a>
    {% else %}
    <a class="btn btn-outline-secondary" href="{% url 'mdm:filevault_configs' %}">Cancel</a>
    {% endif %}
    <button type="submit" class="btn btn-primary">Save</button>
  </p>
</form>
{% endblock %}

{% block extrajs %}
<script nonce="{{ request.csp_nonce }}">
  function toggleMaxBypassField() {
    var checked = $("#id_at_login_only").prop("checked");
    var $input = $("#id_bypass_attempts");
    $input.toggle(checked);
    var val = $input.val();
    if (val === "" || (checked && parseInt(val, 10) < 0)) {
        $input.val(0);
    }
  }

  $(document).ready(function () {
    $("#id_at_login_only").change(function () {
      toggleMaxBypassField()
    });
    toggleMaxBypassField();
  });
</script>
{% endblock %}