{% extends 'dg_core/base.html' %}
{% load i18n %}

{% block title %}{% translate "Token made" %}{% endblock %}

{% block content %}
<div class="py-3" style="max-width: 40rem">
  <h1 class="mb-3">{{ token.name }}</h1>
  <p>
    {% blocktranslate trimmed with areas=token.get_scopes_display %}
      Copy this key now: it is not stored and cannot be shown again. Anyone who has it can act as you on
      {{ areas }} until it is revoked or expires.
    {% endblocktranslate %}
  </p>
  <div class="input-group mb-3">
    <input type="text" class="form-control font-monospace" value="{{ key }}" id="api-token-key" readonly>
    <button class="btn btn-outline-secondary" type="button" data-copied="{% translate 'Copied' %}"
            onclick="navigator.clipboard.writeText(document.getElementById('api-token-key').value); this.textContent = this.dataset.copied;">
      {% translate "Copy" %}
    </button>
  </div>
  <p class="small text-muted">
    {% blocktranslate trimmed %}
      Keep it where your program keeps its secrets, never in code or a message you share. A program sends it
      with every request as the header <code>Authorization: Bearer &lt;key&gt;</code>. To give Claude Code the
      tools of every app here:
    {% endblocktranslate %}
  </p>
  <pre class="small bg-body-tertiary p-2 rounded"><code>claude mcp add --transport http datagroceries {{ mcp_url }} --header "Authorization: Bearer {{ key }}"</code></pre>
  <a href="{% url 'dg_connect:connect' %}" class="btn btn-primary w-100">{% translate "Done" %}</a>
</div>
{% endblock %}