{% extends "base.html" %}
{% block title %}Settings · MarkAI{% endblock %}
{% block content %}
<h1>Settings</h1>
<p class="subtitle">Your account and the providers for the upcoming "Resolve with AI" feature.</p>

<section class="settings-section">
  <h2>Account</h2>
  <div class="settings-row">
    <span class="settings-label">Signed in as</span>
    <strong>{{ g.user['email'] }}</strong>
  </div>

  <div class="card" style="max-width:460px;margin-top:14px;">
    <h2>Change password</h2>
    <p class="hint" style="margin:-6px 0 14px;">
      Your current password is required. Forgot it? Run
      <code>markai reset-password</code> in a terminal on this machine.
    </p>
    <form method="post" action="{{ url_for('settings.change_password') }}">
      <label for="current_password">Current password</label>
      <input type="password" id="current_password" name="current_password" required
             autocomplete="current-password">

      <label for="new_password">New password</label>
      <input type="password" id="new_password" name="new_password" minlength="6" required
             autocomplete="new-password">

      <label for="confirm_password">Repeat the new password</label>
      <input type="password" id="confirm_password" name="confirm_password" minlength="6" required
             autocomplete="new-password">

      <button class="btn" type="submit">Change password</button>
    </form>
  </div>
</section>

<section class="settings-section">
  <h2>AI providers</h2>

  <div class="banner">
    <strong>Coming soon —</strong>
    <span>providers saved here are stored for later use. Resolving notes in-app isn't implemented yet;
    for now, export notes to a source folder and point an external AI coding agent at the exported JSON.</span>
  </div>

  <div class="provider-list">
    {% for p in providers %}
    <div class="provider-row" data-provider-id="{{ p['id'] }}">
      <div>
        <strong>{{ p['name'] }}</strong>
        <span class="kind-badge">{{ p['kind'] }}</span>
        {% if p['model'] %}<span class="doc-meta">&middot; {{ p['model'] }}</span>{% endif %}
      </div>
      <button class="btn danger small" onclick="deleteProvider({{ p['id'] }}, this)">Remove</button>
    </div>
    {% else %}
    <div class="empty-state">No providers configured yet.</div>
    {% endfor %}
  </div>

  <div class="card" style="max-width:480px;">
    <h2>Add a provider</h2>
    <form method="post" action="{{ url_for('settings.create_ai_provider') }}">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="e.g. Claude API, Local Ollama" required>

      <label for="kind">Kind</label>
      <select id="kind" name="kind" required>
        <option value="api">Hosted API</option>
        <option value="local">Local (e.g. Ollama)</option>
      </select>

      <label for="base_url">Base URL (optional)</label>
      <input type="text" id="base_url" name="base_url" placeholder="https://api.example.com or http://localhost:11434">

      <label for="model">Model (optional)</label>
      <input type="text" id="model" name="model" placeholder="e.g. claude-sonnet-5, llama3">

      <label for="api_key">API key (optional, stored as plain text for now)</label>
      <input type="text" id="api_key" name="api_key">

      <button class="btn" type="submit">Save provider</button>
    </form>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
async function deleteProvider(id, btn) {
  if (!confirm("Remove this provider?")) return;
  await fetch(`/settings/ai-providers/${id}`, {method: "DELETE"});
  btn.closest(".provider-row").remove();
}
</script>
{% endblock %}