{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-6">
    <p class="ui-eyebrow">Step {{ current_step }} of {{ total_steps }} <span class="ml-2 text-xs font-normal text-slate-400">(optional)</span></p>
    <h1 class="ui-page-title">LLM API Key</h1>
    <p class="ui-page-subtitle">
      Enter your Gemini API key so Governor can generate SQL fix suggestions.
      Skip to run in detection-only mode — no code fixes will be generated until configured.
    </p>
  </div>

  {% if errors and errors.api_key %}
    <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
      {{ errors.api_key }}
    </div>
  {% endif %}

  <form method="post" action="/setup/5" class="space-y-5">

    <div>
      <label class="ui-form-label" for="api_key">Gemini API key</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-2.5 pr-10 {% if errors and errors.api_key %}border-rose-400 dark:border-rose-500{% endif %}"
          type="password"
          name="api_key"
          id="api_key"
          placeholder="AIza..."
          autocomplete="off"
        />
        <button type="button" onclick="togglePassword('api_key', this)" class="absolute inset-y-0 right-3 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="eye-open w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <svg class="eye-closed w-4 h-4 hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>
        </button>
      </div>
      <p class="mt-1.5 text-xs text-slate-500 dark:text-slate-400">
        A minimal test call will be made to confirm the key is valid.
      </p>
    </div>

    <div class="flex gap-3">
      <button type="submit" name="skip" value="" class="flex-1 ui-btn-primary py-2.5">
        <span class="btn-label">Test and continue</span>
        <svg class="btn-spinner w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
      </button>
      <button type="submit" name="skip" value="1" class="flex-1 ui-btn-secondary py-2.5">
        Skip for now
      </button>
    </div>
  </form>
</div>

<script>
function togglePassword(fieldId, btn) {
  var input = document.getElementById(fieldId);
  var isHidden = input.type === 'password';
  input.type = isHidden ? 'text' : 'password';
  btn.querySelectorAll('.eye-open').forEach(function(el) { el.classList.toggle('hidden', isHidden); });
  btn.querySelectorAll('.eye-closed').forEach(function(el) { el.classList.toggle('hidden', !isHidden); });
}
</script>
{% endblock %}