{% extends 'generic/object.html' %}
{% load i18n %}
{% load helpers %}
{% load plugins %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-6">
    <div class="card">
      <h2 class="card-header">{% trans "Secret" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Object" %}</th>
          <td>{{ object.assigned_object|linkify|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Object type" %}</th>
          <td>{{ object.object_type.app_labeled_name }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Type" %}</th>
          <td>{{ object.secret_type|linkify }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Name" %}</th>
          <td>{{ object.name }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Description" %}</th>
          <td>{{ object.description|placeholder }}</td>
        </tr>
      </table>
    </div>
    {% include 'inc/panels/tags.html' %}
    {% plugin_left_page object %}
  </div>

  <div class="col col-md-6">
    {# The value panel. Rendered for everyone so it is obvious a value exists; #}
    {# the reveal control itself appears only with the decrypt permission. #}
    <div class="card">
      <h2 class="card-header">{% trans "Value" %}</h2>
      <div class="card-body">
        {% if can_decrypt %}
          {# The token travels in the markup, not the cookie: NetBox sets
          CSRF_COOKIE_HTTPONLY, so document.cookie cannot see csrftoken and a
          fetch that reads it there sends an empty header. Django then answers
          403 with an HTML page, which the script cannot parse as JSON. #}
          <button type="button" class="btn btn-primary" id="nbsm-reveal"
                  data-csrf="{{ csrf_token }}"
                  data-url="{% url 'plugins:netbox_secrets_manager:secret_reveal' pk=object.pk %}">
            <i class="mdi mdi-eye"></i> {% trans "Reveal" %}
          </button>
          <div id="nbsm-error" class="text-danger mt-2 d-none"></div>
          <table class="table table-hover attr-table mt-3 d-none" id="nbsm-values">
            <tbody></tbody>
          </table>
        {% else %}
          <p class="text-muted mb-0">
            <i class="mdi mdi-lock"></i>
            {% trans "You do not have permission to reveal this secret's value." %}
          </p>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <h2 class="card-header">{% trans "Storage" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "ARN" %}</th>
          <td><span class="font-monospace">{{ object.arn|placeholder }}</span></td>
        </tr>
        <tr>
          <th scope="row">{% trans "Version" %}</th>
          <td><span class="font-monospace">{{ object.version_id|placeholder }}</span></td>
        </tr>
        <tr>
          <th scope="row">{% trans "Last written" %}</th>
          <td>{{ object.last_written|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Written by" %}</th>
          <td>{{ object.last_written_by|placeholder }}</td>
        </tr>
      </table>
      {% if object.has_previous_version and can_decrypt and perms.netbox_secrets_manager.change_secret %}
        <div class="card-body border-top">
          <p class="text-muted small">
            {% trans "A previous version exists. Someone with permission to change but not to reveal this secret can overwrite a value they cannot read; this restores the version before the last write." %}
          </p>
          <form method="post" action="{% url 'plugins:netbox_secrets_manager:secret_restore' pk=object.pk %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-warning btn-sm">
              <i class="mdi mdi-history"></i> {% trans "Restore previous version" %}
            </button>
          </form>
        </div>
      {% endif %}
    </div>
    {% include 'inc/panels/custom_fields.html' %}
    {% include 'inc/panels/comments.html' %}
    {% plugin_right_page object %}
  </div>
</div>
{% endblock content %}

{% block javascript %}
{{ block.super }}
{% if can_decrypt %}
<script>
  (function () {
    const button = document.getElementById('nbsm-reveal');
    if (!button) return;
    const table = document.getElementById('nbsm-values');
    const errorBox = document.getElementById('nbsm-error');

    function row(key, value) {
      const tr = document.createElement('tr');
      const th = document.createElement('th');
      th.scope = 'row';
      th.textContent = key;

      const td = document.createElement('td');
      const code = document.createElement('span');
      code.className = 'font-monospace';
      // textContent, never innerHTML: a secret value is untrusted input as far
      // as this page is concerned.
      code.textContent = value === null || value === undefined ? '' : String(value);

      const copy = document.createElement('button');
      copy.type = 'button';
      copy.className = 'btn btn-sm btn-link';
      copy.textContent = 'Copy';
      copy.addEventListener('click', function () {
        navigator.clipboard.writeText(code.textContent);
      });

      td.appendChild(code);
      td.appendChild(copy);
      tr.appendChild(th);
      tr.appendChild(td);
      return tr;
    }

    button.addEventListener('click', function () {
      button.disabled = true;
      errorBox.classList.add('d-none');

      fetch(button.dataset.url, {
        method: 'POST',
        headers: {'X-CSRFToken': button.dataset.csrf},
        credentials: 'same-origin',
      })
        .then(function (response) {
          return response.json().then(function (body) {
            if (!response.ok) throw new Error(body.error || 'Unable to reveal this secret.');
            return body;
          });
        })
        .then(function (body) {
          const tbody = table.querySelector('tbody');
          tbody.replaceChildren();
          Object.keys(body.data).forEach(function (key) {
            tbody.appendChild(row(key, body.data[key]));
          });
          table.classList.remove('d-none');
          button.classList.add('d-none');
        })
        .catch(function (err) {
          errorBox.textContent = err.message;
          errorBox.classList.remove('d-none');
          button.disabled = false;
        });
    });
  })();
</script>
{% endif %}
{% endblock javascript %}