{% extends "setup/base.html" %}
{% block title %}Choose provider — kairix setup{% endblock %}
{% block content %}
<hgroup>
  <h2>Choose an AI provider</h2>
  <p>kairix uses a language model to understand your documents and answer questions. Pick the provider you already have an account with — you bring your own key.</p>
</hgroup>
<form id="provider-form" method="get" action="/setup/key">
  <div class="kx-provider-grid">
    {% for p in providers %}
    <label class="kx-provider-card">
      <input type="radio" name="provider" value="{{ p }}" {% if loop.first %}checked{% endif %}>
      <div class="kx-provider-body">
        <strong>{{ p }}</strong>
        <div class="kx-provider-meta">
          <span>Bring your own key</span>
        </div>
      </div>
    </label>
    {% endfor %}
  </div>
</form>
{% endblock %}
{% block actions %}
<a href="/setup" class="kx-btn-secondary">Back</a>
<button type="submit" form="provider-form" class="kx-btn-primary">Continue</button>
{% endblock %}