{% extends "page.html" %}
{% block title %}LiteLLM API Key{% endblock %}

{% block main %}
<div class="container" style="max-width: 720px;">
  <h2>LiteLLM API Key</h2>

  {% if generated %}
  <div class="alert alert-success">Key generated successfully.</div>
  {% endif %}
  {% if budget_exceeded %}
  <div class="alert alert-danger">Budget exceeded. Your key has been deactivated.</div>
  {% endif %}
  {% if delete_failed %}
  <div class="alert alert-warning">Failed to delete old key. Please try again.</div>
  {% endif %}

  {% if has_key %}
  <div class="card mb-3" style="border: 1px solid #dee2e6; padding: 16px;">
    <label style="font-weight: 600; margin-bottom: 4px;">Your API Key</label>
    <div style="background: #f8f9fa; padding: 8px 12px; border-radius: 4px; word-break: break-all; font-family: monospace;">
      {{ key_value }}
    </div>
  </div>

  {% if usage %}
  <div class="card mb-3" style="border: 1px solid #dee2e6; padding: 16px;">
    <h4 style="margin-top: 0;">Usage &amp; Limits</h4>

    {% if usage.max_budget is not none and usage.max_budget > 0 %}
    <div style="margin-bottom: 8px;">
      <strong>Spent:</strong> ${{ "%.4f"|format(usage.spend or 0) }} / ${{ "%.2f"|format(usage.max_budget) }}
      {% if usage.budget_duration %}
      (resets every {{ usage.budget_duration }})
      {% endif %}
    </div>
    <div style="background: #e9ecef; border-radius: 4px; height: 16px; overflow: hidden;">
      <div style="width: {{ ((usage.spend or 0) / usage.max_budget * 100)|round(1) }}%; background: {% if (usage.spend or 0) > usage.max_budget %}#dc3545{% elif (usage.spend or 0) > usage.max_budget * 0.8 %}#ffc107{% else %}#28a745{% endif %}; height: 100%; transition: width 0.3s;"></div>
    </div>
    {% else %}
    <div style="margin-bottom: 8px;"><strong>Spent:</strong> ${{ "%.4f"|format(usage.spend or 0) }} (no budget limit)</div>
    {% endif %}

    {% if usage.tpm_limit %}
    <div style="margin-top: 8px;"><strong>TPM Limit:</strong> {{ usage.tpm_limit }} tokens/min</div>
    {% endif %}
    {% if usage.rpm_limit %}
    <div><strong>RPM Limit:</strong> {{ usage.rpm_limit }} requests/min</div>
    {% endif %}
    {% if usage.expires %}
    <div style="margin-top: 8px; color: #6c757d;"><strong>Key expires:</strong> {{ usage.expires }}</div>
    {% endif %}
  </div>
  {% endif %}
  {% endif %}

  <form method="post" action="{{ base_url }}litellm-key">
    <input type="hidden" name="action" value="generate">
    <button type="submit" class="btn btn-primary">Generate / Regenerate Key</button>
  </form>

  <div style="margin-top: 16px;">
    <p style="color: #6c757d;">
      <strong>Endpoint:</strong> <code>{{ endpoint }}</code><br>
      <strong>Model:</strong> <code>{{ model_name }}</code>
    </p>
  </div>
</div>
{% endblock %}