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

{% block title %}{% translate "Connect an agent" %}{% endblock %}

{% block content %}
<div class="py-3" style="max-width: 44rem">
  <h1 class="mb-2">{% translate "Connect an agent" %}</h1>
  <p class="text-muted">
    {% blocktranslate trimmed %}
      An agent such as Claude works here as you: it reaches only what you may use yourself, and loses an app
      the moment you do. What it changes says so in the history.
    {% endblocktranslate %}
  </p>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-chat-square-text me-1"></i> {% translate "Claude: claude.ai, Desktop and mobile" %}</div>
    <div class="card-body small">
      <p class="mb-2">
        {% blocktranslate trimmed %}
          In Claude, open <strong>Settings › Connectors</strong>, choose <strong>Add custom connector</strong>, and
          paste this address. Claude then asks you to sign in here and allow it.
        {% endblocktranslate %}
      </p>
      <div class="input-group input-group-sm">
        <input type="text" class="form-control font-monospace" value="{{ mcp_url }}" id="mcp-url" readonly>
        <button class="btn btn-outline-secondary" type="button" data-copied="{% translate 'Copied' %}"
                onclick="navigator.clipboard.writeText(document.getElementById('mcp-url').value); this.textContent = this.dataset.copied;">{% translate "Copy" %}</button>
      </div>
      {% if not request.is_secure %}
        <p class="text-warning-emphasis mt-2 mb-0">
          <i class="bi bi-exclamation-triangle"></i>
          {% blocktranslate trimmed %}
            Claude reaches this site from Anthropic's servers, so only when it is on the internet over HTTPS. On
            an internal network, use Claude Code instead.
          {% endblocktranslate %}
        </p>
      {% endif %}
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-terminal me-1"></i> Claude Code</div>
    <div class="card-body small">
      <p class="mb-2">{% blocktranslate trimmed %}Run this once, then <code>/mcp</code> in Claude Code to sign in here in your browser:{% endblocktranslate %}</p>
      <pre class="bg-body-tertiary p-2 rounded mb-0"><code>claude mcp add --transport http datagroceries {{ mcp_url }}</code></pre>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-code-square me-1"></i> {% translate "VS Code (Copilot in agent mode)" %}</div>
    <div class="card-body small">
      <p class="mb-2">{% blocktranslate trimmed %}Put this in <code>.vscode/mcp.json</code> and start the server: VS Code asks you to sign in here in your browser.{% endblocktranslate %}</p>
      <pre class="bg-body-tertiary p-2 rounded mb-0"><code>{"servers": {"datagroceries": {"type": "http", "url": "{{ mcp_url }}"}}}</code></pre>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-plug me-1"></i> {% translate "Connected apps" %}</div>
    <div class="card-body">
      {% for connection in connections %}
        <div class="d-flex justify-content-between align-items-start gap-2{% if not forloop.last %} mb-3{% endif %}">
          <div class="small">
            <strong>{{ connection.application.name }}</strong><br>
            <span class="text-muted">{% blocktranslate with date=connection.since|date:"j M Y" %}signed in {{ date }}{% endblocktranslate %}</span>
          </div>
          <form method="post" action="{% url 'dg_connect:connection_revoke' connection.application.id %}"
                data-confirm="{% blocktranslate with name=connection.application.name %}Disconnect {{ name }}? It stops working at once.{% endblocktranslate %}"
                onsubmit="return confirm(this.dataset.confirm);">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-outline-danger">{% translate "Disconnect" %}</button>
          </form>
        </div>
      {% empty %}
        <p class="text-muted small mb-0">{% translate "No app has signed in as you yet." %}</p>
      {% endfor %}
    </div>
  </div>

  <h2 class="h5 mt-4">{% translate "Personal tokens" %}</h2>
  <p class="text-muted small">
    {% blocktranslate trimmed %}
      For scripts, CI and agents that cannot sign in the way Claude does. A program sends the token with every
      request as <code>Authorization: Bearer &lt;token&gt;</code>. Make one per program, so you can revoke it on
      its own.
    {% endblocktranslate %}
  </p>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-braces me-1"></i> {% translate "Your tokens" %}</div>
    <div class="card-body">
      {% for token in tokens %}
        <div class="d-flex justify-content-between align-items-start gap-2{% if not forloop.last %} mb-3{% endif %}">
          <div class="small">
            <strong>{{ token.name }}</strong><br>
            {{ token.get_scopes_display }}<br>
            <span class="text-muted">
              {% if token.is_expired %}{% translate "expired" %}{% elif token.is_inactive %}{% translate "stopped: unused for three months" %}{% elif token.expires_at %}{% blocktranslate with date=token.expires_at|date:"j M Y" %}expires {{ date }}{% endblocktranslate %}{% else %}{% translate "until revoked" %}{% endif %}
              &middot; {% if token.last_used_at %}{% blocktranslate with date=token.last_used_at|date:"j M Y" %}last used {{ date }}{% endblocktranslate %}{% else %}{% translate "never used" %}{% endif %}
            </span>
          </div>
          <form method="post" action="{% url 'dg_connect:token_revoke' token.id %}"
                data-confirm="{% translate 'Revoke this token? Whatever uses it stops working at once.' %}"
                onsubmit="return confirm(this.dataset.confirm);">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-outline-danger">{% translate "Revoke" %}</button>
          </form>
        </div>
      {% empty %}
        <p class="text-muted small mb-0">{% translate "You have no tokens yet." %}</p>
      {% endfor %}
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold"><i class="bi bi-plus-circle me-1"></i> {% translate "New token" %}</div>
    <div class="card-body">
      <form method="post" action="{% url 'dg_connect:token_create' %}">
        {% csrf_token %}
        <label class="form-label small" for="token-name">{% translate "What uses it" %}</label>
        <input type="text" name="name" id="token-name" class="form-control mb-3" maxlength="60" required
               placeholder="{% translate 'The nightly report script' %}">
        <div class="form-label small">{% translate "What it may open" %}</div>
        {% for value, label in scopes %}
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="scopes" value="{{ value }}" id="token-scope-{{ value }}" checked>
            <label class="form-check-label" for="token-scope-{{ value }}">{{ label }}</label>
          </div>
        {% endfor %}
        <label class="form-label small mt-3" for="token-days">{% translate "How long it lives" %}</label>
        <select name="days" id="token-days" class="form-select mb-3">
          {% for days, label in lifetimes %}<option value="{{ days }}"{% if days == 0 %} selected{% endif %}>{{ label }}</option>{% endfor %}
        </select>
        <button type="submit" class="btn btn-primary w-100">{% translate "Make token" %}</button>
      </form>
    </div>
  </div>

  <p class="text-muted small">
    {% translate "A connection or a token stops after three months without use." %}
  </p>
</div>
{% endblock %}