{% extends 'base.html' %}
{% load base_extras 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:dep_virtual_servers' %}">DEP virtual servers</a></li>
  <li class="breadcrumb-item active">{{ object }}</li>
</ol>

<h3>DEP virtual server <i>{{ object }}</i></h3>

<div class="row">
  <div class="col-md-12">
    <dl class="row">
      <dt class="col-sm-3 text-md-end">name</dt>
      <dd  class="col-sm-9">{{ object.name }}</dd>
      <dt class="col-sm-3 text-md-end">uuid</dt>
      <dd  class="col-sm-9">{{ object.uuid }}</dd>
      <dt class="col-sm-3 text-md-end">default enrollment</dt>
      <dd  class="col-sm-9">
        {% if object.default_enrollment %}
        {% if perms.mdm.view_depenrollment %}
        <a href="{{ object.default_enrollment.get_absolute_url }}">{{ object.default_enrollment }}</a>
        {% else %}
        {{ object.default_enrollment }}
        {% endif %}
        {% else %}
        -
        {% endif %}
        {% if perms.mdm.change_depvirtualserver %}
        <a href="{% url 'mdm:update_dep_virtual_server' object.pk %}" class="btn btn-secondary btn-xs">Change</a>
        {% endif %}
      </dd>
    </dl>

    {% created_updated_at object %}

  </div>
  {% with object.organization as org %}
  <div class="col-md-6">
    <h4>DEP organization</h3>
    <dl class="row">
      <dt class="col-sm-3 text-md-end">name</dt>
      <dd class="col-sm-9">{{ org.name }}</dd>
      <dt class="col-sm-3 text-md-end">admin</dt>
      <dd class="col-sm-9"{{ org.admin_id }}</dd>
      <dt class="col-sm-3 text-md-end">email</dt>
      <dd class="col-sm-9">{{ org.email }}</dd>
      <dt class="col-sm-3 text-md-end">phone</dt>
      <dd class="col-sm-9">{{ org.phone }}</dd>
      <dt class="col-sm-3 text-md-end">address</dt>
      <dd class="col-sm-9">{{ org.address_lines|linebreaksbr }}</dd>
      <dt class="col-sm-3 text-md-end">type</dt>
      <dd class="col-sm-9">{{ org.type }}</dd>
      <dt class="col-sm-3 text-md-end">version</dt>
      <dd class="col-sm-9">{{ org.version }}</dd>
    </dl>
  </div>
  {% endwith %}
  {% with object.token as token %}
  <div class="col-md-6">
    <h4>DEP Token</h3>
    {% if perms.mdm.change_depvirtualserver and token %}
    <a href="{% url 'mdm:renew_dep_token' token.id %}" class="btn btn-secondary">Renew</a>
    {% endif %}
    <dl class="row">
      <dt class="col-sm-3 text-md-end">expiry</dt>
      <dd class="col-sm-9">
        {% if token.expires_soon %}
        <span class="text-danger">{{ token.access_token_expiry|date:'r' }}</span>
        {% else %}
        {{ token.access_token_expiry|date:'r' }}
        {% endif %}
      </dd>
    </dl>
  </div>
  {% endwith %}
</div>

<div class="row">
  <div class="col-md-12">
    {% with object.depenrollment_set.count as enrollment_count %}

    <h3>Profile{{ enrollment_count|pluralize }} ({{ enrollment_count }})</h3>

    {% if enrollment_count %}
    <table class="table-object-properties">
      <thead>
        <th class="col-md-4">Enrollment</th>
        <th class="col-md-2">Business unit</th>
        <th class="col-md-2">Assigned devices</th>
        <th class="col-md-2">Created at</th>
        <th class="col-md-2">Updated at</th>
      </thead>
      <tbody>
        {% for enrollment in object.depenrollment_set.all %}
        <tr>
          <td>
            {% if perms.mdm.view_depenrollment %}
            <a href="{{ enrollment.get_absolute_url }}">{{ enrollment }}</a>
            {% else %}
            {{ enrollment }}
            {% endif %}
            <br>{{ enrollment.uuid }}
          </td>
          <td>{{ enrollment.enrollment_secret.meta_business_unit }}</td>
          <td>{{ enrollment.assigned_devices.count }}</td>
          <td>{{ enrollment.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
          <td>{{ enrollment.updated_at|date:"SHORT_DATETIME_FORMAT" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}

    {% endwith %}
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="d-flex align-items-center mb-1">
        <h3>Device{{ devices_count|pluralize }} ({{ devices_count }})</h3>
        <div class="ms-auto">
            {% if perms.mdm.change_depvirtualserver %}
            <a id="devices-sync-btn" href="{% url 'mdm_api:dep_virtual_server_sync_devices' object.id %}" class="btn btn-link task"
                data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Synchronize">
                <i class="bi bi-arrow-repeat"></i>
            </a>
            {% endif %}
        </div>
    </div>
    {% if devices_count %}
    <table class="table-object-properties">
      <thead>
        <th>Serial number</th>
        <th>Profile</th>
        <th>Last Assigment</th>
        <th>Status</th>
        {% if perms.mdm.change_depdevice %}
        <th></th>
        {% endif %}
      </thead>
      <tbody>
        {% for device in latest_devices %}
        <tr id="{{ device.serial_number }}" class="data-row">
          <td>
            {% if perms.mdm.view_depdevice %}
            <a href="{{ device.get_absolute_url }}">{{ device.serial_number|privacywrapper }}</a>
            {% else %}
            {{ device.serial_number|privacywrapper }}
            {% endif %}
            {% if device.is_deleted %} <span class="label label-danger">DELETED</span>{% endif %}</td>
          <td>
            {% if device.enrollment %}
            {% if perms.mdm.view_depenrollment %}
            <a href="{{ device.enrollment.get_absolute_url }}">{{ device.enrollment }}</a>
            {% else %}
            {{ device.enrollment }}
            {% endif %}
            {% else %}
            -
            {% endif %}
          </td>
          <td>
            {{ device.device_assigned_by|default:"-" }}
            {% if device.device_assigned_by %} - {{ device.device_assigned_date|date:"SHORT_DATETIME_FORMAT"|default:"-" }}{% endif %}
          </td>
          <td>
            {{ device.profile_status }}
            {% if device.profile_status == "pushed" and device.profile_push_time  %} - {{ device.profile_push_time|date:"SHORT_DATETIME_FORMAT" }}{% endif %}
          </td>
          {% if perms.mdm.change_depdevice %}
          <td class="text-end py-0">
            {% if not dep_device.is_deleted %}
            <form action="{% url 'mdm:refresh_dep_device' device.pk %}" method="post">{% csrf_token %}
                {% url 'mdm:assign_dep_device_profile' device.pk as url %}
                {% button 'UPDATE' url "Edit DEP Device Profile" %}
                <button type="submit" class="btn btn-link"
                    data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Synchronize">
                  <span class="bi bi-arrow-repeat" aria-hidden="true"></span>
                </button>
            </form>
            {% endif %}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}

    {% if show_more_devices %}
    <a href="{% url 'mdm:dep_devices' %}?server={{ object.pk }}">View all devices</a>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block extrajs %}
<script nonce="{{ request.csp_nonce }}">
  var WAIT_FOR_TASK_TIMEOUT_ID;

  function waitForTask(url) {
    $.ajax({
      dataType: "json",
      url: url,
      success: function (data) {
        if (data.unready) {
          WAIT_FOR_TASK_TIMEOUT_ID = window.setTimeout(waitForTask, 1000, url);
        } else {
          $("#devices-sync-btn").prop("disabled", false);
          if (data.status === "SUCCESS") {
            window.location.reload();
          }
        }
      }
    });
  }

  function launchTask($link) {
      $link.prop("disabled", true);
      var url = $link.attr("href");
      $.ajax({
        dataType: "json",
        url: url,
        method: "post",
        success: function (data) {
          WAIT_FOR_TASK_TIMEOUT_ID = window.setTimeout(waitForTask, 300, data.task_result_url);
        }
      });
  }

  $(document).ready(function () {
    $(".task").click(function (event) {
      event.preventDefault();
      launchTask($(this));
    });
  });
</script>
{% endblock %}