{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} REST API token management. The plaintext token is rendered exactly once,
   in the response to the issuing call; every page load after that shows only
   a prefix. {% endcomment %}

{% block title %}API access{% endblock %}

{% block content %}
{% comment %} The stored allowlist is handed to the controller through a data attribute so
   Django does the escaping; never interpolate server text into a script body. {% endcomment %}
<div ng-controller="apiAccessController" id="cpApiAccess" data-allowed-ips="{{ allowedIPs }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">API access</h1>
      <p class="text-muted mb-0 small">
        Tokens authenticate automated callers against the CloudPanel REST API at
        <code>/api/</code>.
      </p>
    </div>
    <a href="/users/profile" class="btn btn-outline-secondary">
      <i class="fas fa-user me-1"></i>Profile
    </a>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="alert alert-success" ng-show="issuedToken" ng-cloak>
    <h2 class="h6 mb-2">
      <i class="fas fa-key me-1"></i>
      New token for <span ng-bind="issuedFor"></span>
    </h2>
    <p class="small mb-2">
      <strong>Copy it now.</strong> This is the only time the full value is
      shown &mdash; the panel stores it but never displays it again. If you lose it,
      issue a new one, which invalidates this one.
    </p>
    <div class="input-group">
      <input type="text" class="form-control font-monospace" readonly
             ng-model="issuedToken" id="cpIssuedToken"
             aria-label="Newly issued API token">
      <button class="btn btn-outline-secondary" type="button" ng-click="copyToken()">
        <i class="fas fa-copy me-1"></i>Copy
      </button>
      <button class="btn btn-outline-secondary" type="button" ng-click="issuedToken = ''">
        <i class="fas fa-eye-slash me-1"></i>Hide
      </button>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Your token</h2>

          <dl class="row small mb-4">
            <dt class="col-5">Account</dt>
            <dd class="col-7"><code>{{ userName }}</code></dd>
            <dt class="col-5">Status</dt>
            <dd class="col-7">
              {% if apiEnabled %}
                <span class="badge rounded-pill text-bg-success">Enabled</span>
              {% else %}
                <span class="badge rounded-pill text-bg-secondary">Disabled</span>
              {% endif %}
            </dd>
            <dt class="col-5">Token</dt>
            <dd class="col-7">
              {% if hasToken %}
                <code>{{ tokenPrefix }}&hellip;</code>
                <span class="text-muted">(prefix only)</span>
              {% else %}
                <span class="text-muted">No token issued</span>
              {% endif %}
            </dd>
            <dt class="col-5">Rate limit</dt>
            <dd class="col-7">{{ rateLimitPerMinute }} requests / minute</dd>
            <dt class="col-5">Last used</dt>
            <dd class="col-7">{{ lastUsed }}</dd>
          </dl>

          <div class="mb-3">
            <label class="form-label" for="apiIPs">Allowed source addresses</label>
            <textarea class="form-control font-monospace" id="apiIPs" rows="3"
                      ng-model="allowedIPs"
                      placeholder="One address or CIDR per line. Empty = any."></textarea>
            <div class="form-text">
              Applied when the token is issued. A leaked token is still useless
              from an address outside this list.
            </div>
          </div>

          <div class="d-flex flex-wrap gap-2">
            <button type="button" class="btn btn-primary" ng-click="issue()" ng-disabled="busy">
              <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                    role="status" aria-hidden="true"></span>
              <i class="fas fa-key me-1" ng-hide="busy"></i>
              <span ng-bind="busy ? 'Working…' : ({% if hasToken %}'Replace token'{% else %}'Issue token'{% endif %})"></span>
            </button>
            {% if hasToken %}
              <button type="button" class="btn btn-outline-danger" ng-click="revoke()"
                      ng-disabled="busy">
                <i class="fas fa-ban me-1"></i>Revoke token
              </button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-circle-info me-1 text-primary"></i>Using the token
          </h2>
          <p class="small text-muted">Send it as a bearer token:</p>
          <pre class="small border rounded p-2 mb-3" style="background:var(--cp-bg-subtle)"><code>curl -H "Authorization: Bearer &lt;token&gt;" \
     https://cp.a1hosting.net:8090/api/</code></pre>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">Issuing a new token immediately invalidates the old one.</li>
            <li class="mb-2">Revoking also switches API access off for the account.</li>
            <li>Issue and revoke are both written to the audit log, with the prefix
              but never the token itself.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  {% if manageableUsers %}
  <div class="card mt-4">
    <div class="card-body">
      <h2 class="h6 mb-3">Manage another account's token</h2>
      <p class="small text-muted">
        Issuing a token for an account is equivalent to holding its credentials,
        so this is limited to accounts you own.
      </p>
      <div class="d-flex flex-wrap gap-2 align-items-end">
        <div style="min-width:260px">
          <label class="form-label" for="apiTargetUser">Account</label>
          <select class="form-select" id="apiTargetUser" ng-model="targetUser">
            <option value="">Choose an account…</option>
            {% for candidate in manageableUsers %}
              <option value="{{ candidate }}">{{ candidate }}</option>
            {% endfor %}
          </select>
        </div>
        <button type="button" class="btn btn-outline-primary"
                ng-click="issue(targetUser)" ng-disabled="busy || !targetUser">
          <i class="fas fa-key me-1"></i>Issue for this account
        </button>
        <button type="button" class="btn btn-outline-danger"
                ng-click="revoke(targetUser)" ng-disabled="busy || !targetUser">
          <i class="fas fa-ban me-1"></i>Revoke
        </button>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'userManagement/userManagement.js' %}"></script>
{% endblock %}