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

{% block title %}{% trans "Issue replacement token" %} | {{ block.super }}{% endblock %}

{% if not is_popup %}
{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans "Home" %}</a>
  &rsaquo;
  <a href="{% url 'admin:ophix_core_client_changelist' %}">{% trans "Clients" %}</a>
  &rsaquo;
  <a href="{{ change_url }}">{{ client.name }}</a>
  &rsaquo;
  {% trans "Issue replacement token" %}
</div>
{% endblock %}
{% endif %}

{% block content %}
{% if is_popup %}
<style>
  #header, #nav-sidebar { display: none !important; }
  html, body { height: auto !important; margin: 0; }
  #container { display: flex; justify-content: center; padding: 2rem 1.5rem; }
  #content-main { max-width: 560px; width: 100%; }
</style>
<script>
(function() {
  try {
    var el = window.parent.document.querySelector('.mfp-content');
    if (el) { el.style.maxWidth = '640px'; el.style.margin = '80px auto'; el.style.height = 'auto'; }
    var ct = window.parent.document.querySelector('.mfp-container');
    if (ct) { ct.style.padding = '80px 20px'; }
    function fit() {
      if (window.frameElement) window.frameElement.style.height = document.body.scrollHeight + 'px';
    }
    document.readyState === 'complete' ? fit() : window.addEventListener('load', fit);
  } catch(e) {}
})();
// Apply parent dark mode after all scripts (including theme.js) have run
window.addEventListener('load', function() {
  try {
    var parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
    if (parentTheme) {
      document.documentElement.setAttribute('data-theme', parentTheme);
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
  } catch(e) {}
});
</script>
{% endif %}
<style>
  .warn-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: 620px;
    margin-bottom: 1.5rem;
  }
  .warn-card h2 {
    margin: 0 0 0.75rem;
    color: var(--admin-interface-delete-button-background-color, #ba2121);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .warn-card p {
    margin: 0 0 0.5rem;
  }
  .warn-card p:last-child {
    margin-bottom: 0;
  }
  .confirm-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .btn-issue, .btn-cancel {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
  }
  .btn-issue {
    background: var(--admin-interface-delete-button-background-color, #ba2121);
    color: var(--admin-interface-delete-button-text-color, #fff);
  }
  .btn-issue:hover, .btn-issue:focus {
    background: var(--admin-interface-delete-button-background-hover-color, #a41515);
    color: var(--admin-interface-delete-button-text-color, #fff);
  }
  .btn-cancel {
    background: var(--admin-interface-save-button-background-color, #44b78b);
    color: var(--admin-interface-save-button-text-color, #fff);
  }
  .btn-cancel:hover, .btn-cancel:focus {
    background: var(--admin-interface-save-button-background-hover-color, #2fa878);
    color: var(--admin-interface-save-button-text-color, #fff);
  }
  .client-meta {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--body-quiet-color);
  }
  .client-meta strong {
    color: var(--body-fg);
  }
</style>
<div id="content-main">
  <p class="client-meta">
    {% trans "Client" %} <strong>{{ client.name }}</strong>
    {% trans "on" %} <strong>{{ client.host }}</strong>
  </p>

  <div class="warn-card">
    <h2>{% trans "This will lock out the existing client" %}</h2>
    <p>
      {% blocktrans trimmed %}
        Issuing a replacement token immediately invalidates the current token.
        Any running instance of this client will be unable to authenticate
        until it is reconfigured with the new token.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans trimmed %}
        The new token will be shown once and cannot be recovered after that point.
      {% endblocktrans %}
    </p>
  </div>

  <form method="post">
    {% csrf_token %}
    <div class="confirm-actions">
      <button type="submit" class="btn-issue">{% trans "Issue replacement token" %}</button>
      {% if is_popup %}
        <button type="button" class="btn-cancel" onclick="window.parent.dismissRelatedObjectModal()">{% trans "Cancel" %}</button>
      {% else %}
        <a href="{{ change_url }}" class="btn-cancel">{% trans "Cancel" %}</a>
      {% endif %}
    </div>
  </form>
</div>
{% endblock %}