{% extends "admin/change_form.html" %}
{% load i18n %}

{% block submit_buttons_bottom %}
{% if add and pending_token %}
<style>
  .pending-token-card {
    background: var(--darkened-bg, #f8f8f8);
    border: 2px solid var(--admin-interface-delete-button-background-color, #ba2121);
    border-radius: 6px;
    padding: 1.5rem 2rem;
    max-width: 660px;
    margin-bottom: 0;
  }
  .pending-token-card h3 {
    margin: 0 0 0.75rem;
    color: var(--admin-interface-delete-button-background-color, #ba2121);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .pending-token-card p {
    margin: 0 0 1rem;
  }
  .pending-token-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--body-bg, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
  }
  .pending-token-box code {
    flex: 1;
    font-family: monospace;
    font-size: 0.95rem;
    word-break: break-all;
    user-select: all;
  }
  .pending-token-copy {
    flex-shrink: 0;
    background: var(--admin-interface-save-button-background-color, #44b78b);
    color: var(--admin-interface-save-button-text-color, #fff);
    border: none;
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .pending-token-copy:hover,
  .pending-token-copy:focus {
    background: var(--admin-interface-save-button-background-hover-color, #2fa878);
    color: var(--admin-interface-save-button-text-color, #fff);
  }
</style>
<fieldset class="module aligned">
  <h2>{% trans "Token" %}</h2>
  <div class="form-row">
    <div class="pending-token-card">
      <h3>{% trans "Record this token — it will not be shown again" %}</h3>
      <p>{% trans "This is the only time this token will be displayed. Once you save, it cannot be recovered. Paste it into the client's configuration now." %}</p>
      <div class="pending-token-box">
        <code id="pending-token-value">{{ pending_token }}</code>
        <button type="button" class="pending-token-copy" id="pending-token-copy-btn"
                onclick="copyPendingToken()">{% trans "Copy" %}</button>
      </div>
    </div>
  </div>
</fieldset>
<script>
function copyPendingToken() {
  navigator.clipboard.writeText(document.getElementById('pending-token-value').textContent).then(function() {
    var btn = document.getElementById('pending-token-copy-btn');
    btn.textContent = "{% trans 'Copied!' %}";
    setTimeout(function() { btn.textContent = "{% trans 'Copy' %}"; }, 2000);
  });
}
</script>
{% endif %}
{{ block.super }}
{% endblock %}