{% 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 'intune:index' %}">Microsoft Intune Inventory</a></li>
  <li class="breadcrumb-item"><a href="{% url 'intune:tenants' %}">Tenants</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 class="ms-3">
            {% for link, anchor_text in store_links  %}
                {% button 'LINK' link anchor_text %}
            {% endfor %}
        </div>
    </div>
    <div class="d-flex align-items-center mb-3">
        <h3 class="m-0 fs-5 text-secondary">Microsoft Intune Inventory</h3>
        <div class="ms-auto">
            {% if perms.intune.change_tenant %}
                {% url 'intune:update_tenant' object.pk as url %}
                {% button 'UPDATE' url "Edit Tenant" %}
            {% endif%}
            {% if perms.intune.delete_tenant %}
                {% url 'intune:delete_tenant' object.pk as url %}
                {% button 'DELETE' url "Delete Tenant" %}
            {% endif%}
        </div>
    </div>

    <table class="table-object-properties">
    <thead>
        <tr>
        <th style="width:20vw">Attribute</th>
        <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>Business unit</td>
        <td>
            {% if perms.inventory.view_metabusinessunit %}
            <a href="{% url 'inventory:mbu_machines' object.business_unit.meta_business_unit.pk %}">
            {{ object.business_unit }}
            </a>
            {% else %}
            {{ object.business_unit }}
            {% endif %}
        </td>
        </tr>
        <tr>
            <td>Name</td>
            <td>{{ object.name }}</td>
        </tr>
        <tr>
            <td>Description</td>
            <td>{{ object.description }}</td>
        </tr>
        <tr>
            <td colspan="2"><h5>API authentication</h5></td>
        </tr>  
        <tr>
            <td>Tenant ID</td>
            <td>{{ object.tenant_id }}</td>
        </tr>
        <tr>
            <td>Client ID</td>
            <td>{{ object.client_id }}</td>
        </tr>
        <tr>
            <td>Client Secret</td>
            <td>
                <span class="bi bi-eye" aria-hidden="true" style="cursor:pointer"></span>
                <span hidden>{{ object.get_client_secret }}</span>
            </td>
        </tr>
    </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 %}