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

{% block title %}{% trans "Client token" %} | {{ block.super }}{% endblock %}
{% block bodyclass %}{{ block.super }} change-form{% 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 "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: 730px; width: 100%; }
</style>
<script>
(function() {
  try {
    var el = window.parent.document.querySelector('.mfp-content');
    if (el) { el.style.maxWidth = '810px'; 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) {}
})();
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>
{% else %}
<style>
  @media (min-width: 1280px) {
    #main.shifted > #nav-sidebar + .content { max-width: calc(100% - 360px); }
  }
  #content-main { display: flex; flex-direction: column; align-items: center; padding-top: 2rem; }
  .client-meta, .token-card, .token-actions { width: 100%; max-width: 730px; }
  .token-card { max-width: 730px; }
</style>
{% endif %}
<style>
  .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: 730px;
    margin-bottom: 1.5rem;
  }
  .token-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;
  }
  .token-card p {
    margin: 0 0 1rem;
  }
  .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;
  }
  .token-box code {
    font-family: monospace;
    font-size: 0.95rem;
    flex: 1;
    word-break: break-all;
    user-select: all;
  }
  .token-copy-btn {
    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;
  }
  .token-copy-btn:hover,
  .token-copy-btn:focus {
    background: var(--admin-interface-save-button-background-hover-color, #2fa878);
    color: var(--admin-interface-save-button-text-color, #fff);
  }
  .token-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .token-continue {
    padding: 0.5rem 1.25rem;
    background: var(--admin-interface-save-button-background-color, #44b78b);
    color: var(--admin-interface-save-button-text-color, #fff);
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .token-continue:hover,
  .token-continue: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">
    {% if is_replacement %}
      {% trans "Replacement token issued for client" %} <strong>{{ client.name }}</strong>
      {% trans "on" %} <strong>{{ client.host }}</strong>.
      {% trans "The previous token is now invalid." %}
    {% else %}
      {% trans "Client" %} <strong>{{ client.name }}</strong>
      {% trans "on" %} <strong>{{ client.host }}</strong>
      {% trans "was created successfully." %}
    {% endif %}
  </p>

  <div class="token-card">
    <h2>{% trans "Record this token — it will not be shown again" %}</h2>
    <p>
      {% blocktrans trimmed %}
        This is the only time this token will be displayed. Once you leave this
        page it cannot be recovered. Paste it into the client's configuration now.
      {% endblocktrans %}
    </p>
    <div class="token-box">
      <code id="client-token">{{ token }}</code>
      <button type="button" class="token-copy-btn" onclick="copyToken()">{% trans "Copy" %}</button>
    </div>
  </div>

  <div class="token-actions">
    {% if is_popup %}
      <button type="button" class="token-continue" onclick="window.parent.location.href='{{ parent_redirect_url }}'">
        {% trans "I've recorded my token — close" %}
      </button>
    {% else %}
      <a href="{{ change_url }}" style="text-decoration:none;">
        <button type="button" class="token-continue">{% trans "I've recorded my token — continue to client" %}</button>
      </a>
    {% endif %}
  </div>
</div>

<script>
function copyToken() {
  var token = document.getElementById("client-token").textContent;
  navigator.clipboard.writeText(token).then(function() {
    var btn = document.querySelector(".token-copy-btn");
    btn.textContent = "{% trans 'Copied!' %}";
    setTimeout(function() { btn.textContent = "{% trans 'Copy' %}"; }, 2000);
  });
}
</script>
{% endblock %}