{% load i18n static %}

<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <h5 class="mb-0">
      Secrets
    </h5>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-sm btn-primary"
              id="pw-bind-btn"
              onclick="pwOpenPicker(this)">
        <i class="mdi mdi-link-variant"></i> {% trans "Bind secret" %}
      </button>
    </div>
  </div>
  <div class="card-body p-0">

    <div id="pw-loading" class="text-center p-4 text-muted">
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      {% trans "Loading secrets…" %}
    </div>

    <div id="pw-empty" class="text-center p-4 text-muted" style="display:none">
      <i class="mdi mdi-lock-outline me-1"></i>
      {% trans "No secrets bound to this object." %}
    </div>

    <div id="pw-auth-required" class="text-center p-4 text-muted" style="display:none">
      <i class="mdi mdi-account-lock-outline me-1"></i>
      {% trans "Passwork authentication required." %}
      <button class="btn btn-sm btn-outline-primary ms-2" onclick="pwShowLoginModal()">
        {% trans "Log in" %}
      </button>
    </div>

    <table class="table table-hover mb-0" id="pw-secrets-table" style="display:none">
      <thead>
        <tr>
          <th>{% trans "Name" %}</th>
          <th>{% trans "Login" %}</th>
          <th>{% trans "Password" %}</th>
          <th style="width:120px"></th>
        </tr>
      </thead>
      <tbody id="pw-secrets-tbody"></tbody>
    </table>

  </div>
</div>

{% include "netbox_passwork/login_modal.html" %}
{% include "netbox_passwork/totp_modal.html" %}
{% include "netbox_passwork/picker_modal.html" %}

<script>
  const PW_OBJECT_TYPE = "{{ object_type }}";
  const PW_OBJECT_ID   = "{{ object_id }}";
</script>
<script src="{% static 'netbox_passwork/passwork.js' %}"></script>