{% extends "base.html" %}

{% block title %}API Token Created - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">API Token Created</h1>
</div>

<div class="card mb-lg" style="border-left: 4px solid var(--accent-yellow);">
  <div class="card-body">
    <div style="display: flex; align-items: flex-start; gap: var(--space-md);">
      <span style="font-size: 2rem; color: var(--accent-yellow);">⚠</span>
      <div>
        <h3 style="margin: 0 0 var(--space-xs) 0; color: var(--accent-yellow);">Save this token now!</h3>
        <p class="text-secondary" style="margin: 0;">
          This is the only time you will see this API token. Copy and store it securely.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">{{ token.token_name }}</h2>
  </div>
  <div class="card-body">
    <div class="form-group">
      <label class="form-label">API Token</label>
      <div style="display: flex; gap: var(--space-sm);">
        <input
          type="text"
          id="api_token"
          value="{{ plaintext_token }}"
          readonly
          class="form-input"
          style="flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg-tertiary);"
        />
        <button onclick="copyToken()" class="btn btn-primary" id="copy-btn">Copy</button>
      </div>
      <p class="text-muted text-sm" style="margin-top: var(--space-xs);">
        Use this token in the <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 3px;">Authorization: Bearer &lt;token&gt;</code> header.
      </p>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg);">
      <div>
        <span class="text-muted text-sm">Token Prefix</span>
        <p class="text-mono">{{ token.token_prefix }}</p>
      </div>
      <div>
        <span class="text-muted text-sm">Expires</span>
        <p>{{ revision.expires_at | format_dt(user_preferences) }}</p>
      </div>
      <div>
        <span class="text-muted text-sm">Created</span>
        <p>{{ token.created_at | format_dt(user_preferences) }}</p>
      </div>
    </div>
  </div>
</div>

<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">Example Usage</h2>
  </div>
  <div class="card-body">
    <pre style="background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm);">curl -H "Authorization: Bearer {{ plaintext_token }}" \
https://localhost:8915/api/trfs</pre>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Security Best Practices</h2>
  </div>
  <div class="card-body">
    <ul style="margin: 0; padding-left: var(--space-lg); color: var(--text-secondary);">
      <li>Store the token in a secure location (e.g., environment variables, secrets manager)</li>
      <li>Never commit the token to version control</li>
      <li>Revoke the token immediately if you suspect it has been compromised</li>
      <li>Use HTTPS for all API requests</li>
      <li>Create separate tokens for different applications or environments</li>
    </ul>
  </div>
</div>

<div style="margin-top: var(--space-lg);">
  <a href="/admin/settings" class="btn btn-secondary">← Back to Settings</a>
</div>

<script>
function copyToken() {
  const input = document.getElementById('api_token');
  input.select();
  input.setSelectionRange(0, 99999);
  
  navigator.clipboard.writeText(input.value).then(() => {
    const button = document.getElementById('copy-btn');
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    button.style.background = 'var(--accent-green)';
    
    setTimeout(() => {
      button.textContent = originalText;
      button.style.background = '';
    }, 2000);
  }).catch(err => {
    alert('Failed to copy: ' + err);
  });
}
</script>
{% endblock %}