{% extends "setup/base.html" %}
{% block title %}API key — kairix setup{% endblock %}
{% block content %}
<hgroup>
  <h2>Paste your {{ provider }} key</h2>
  <p>Your key is stored locally on this machine and never leaves it.</p>
</hgroup>
{% if save_error %}
<div class="kx-validation-error">
  <p class="kx-error-msg">{{ save_error }}</p>
</div>
{% endif %}
<form id="key-form" method="post" action="/setup/key">
  <input type="hidden" name="provider" value="{{ provider }}">
  <label>
    API key
    <input type="password" name="api_key" placeholder="Paste your key" required autocomplete="off">
  </label>
  <label>
    Endpoint URL <span class="kx-muted kx-small">(only if your provider needs one — Azure, Ollama, proxy)</span>
    <input type="text" name="endpoint" placeholder="https://...">
  </label>
  {% if azure_provider %}
  <label>
    Deployment name <span class="kx-muted kx-small">(optional)</span>
    <input type="text" name="deployment" placeholder="e.g. text-embedding-3-small">
    <small class="kx-muted">Azure gives each model you deploy its own name — enter the embedding
      deployment's name. You can find it in the Azure portal under your resource's Deployments page.</small>
  </label>
  {% endif %}
</form>
{% endblock %}
{% block banner_class %} kx-banner-slot-md{% endblock %}
{% block banner %}
<span id="validating-indicator" class="kx-indicator kx-muted" aria-busy="true">Validating…</span>
<div id="validation-result"></div>
{% endblock %}
{% block actions %}
<a href="/setup/provider" class="kx-btn-secondary">Back</a>
<button type="button" class="kx-btn-outline"
        hx-post="/setup/key/validate"
        hx-target="#validation-result"
        hx-swap="innerHTML"
        hx-include="#key-form"
        hx-indicator="#validating-indicator">
  Validate key
</button>
<button type="submit" form="key-form" class="kx-btn-primary kx-btn-reveal" id="save-key-btn">Save and continue</button>
{% endblock %}
{% block scripts %}
<script>
  document.addEventListener('htmx:afterSwap', function () {
    if (document.querySelector('.kx-validation-success')) {
      document.getElementById('save-key-btn').classList.add('kx-revealed');
    }
  });
</script>
{% endblock %}