{% extends "setup/_base.html" %}
{% block step_content %}
<h1>Step 2 — Paths</h1>
<p>Where your Obsidian vault lives and which Zotero collection to monitor. Stored at <code>config/paths.yaml</code>.</p>

<form
  class="setup-form"
  hx-post="/setup/api/paths"
  hx-target="#result"
  hx-swap="innerHTML"
>
  <label>Obsidian vault path
    <div class="input-row">
      <input id="vault_path" type="text" name="vault_path" value="{{ vault_path }}" required>
      <button type="button" class="button"
        hx-get="/setup/fs-modal?path={{ home | urlencode }}"
        hx-target="#fs-modal" hx-swap="innerHTML">
        Browse…
      </button>
    </div>
  </label>

  <label>Zotero collection name
    <select name="collection_name" id="collection-select"
      hx-get="/setup/api/collections-options?current={{ collection_name | urlencode }}"
      hx-trigger="load"
      hx-target="this" hx-swap="innerHTML">
      <option value="{{ collection_name }}">Loading collections…</option>
    </select>
    <noscript>(Enter manually:) <input type="text" name="collection_name" value="{{ collection_name }}"></noscript>
  </label>

  <label>Zotero library ID
    <input type="text" name="library_id" value="{{ library_id }}" required>
  </label>

  <label>Library type
    <select name="library_type">
      <option value="user" {% if library_type == "user" %}selected{% endif %}>user</option>
      <option value="group" {% if library_type == "group" %}selected{% endif %}>group</option>
    </select>
  </label>

  <label>Zotero local storage path
    <input type="text" name="local_storage_path" value="{{ local_storage_path }}">
  </label>

  <button type="submit">Save</button>
</form>

<div id="result" aria-live="polite"></div>
<div id="fs-modal"></div>

<p><a href="/setup">← Back to setup overview</a></p>
{% endblock %}