{% extends "setup/base.html" %}
{% block title %}Choose folder — kairix setup{% endblock %}
{% block content %}
<hgroup>
  <h2>Choose your first source</h2>
  <p>Point kairix at a local folder to get started. You can add more sources after setup.</p>
</hgroup>
{% if save_error %}
<div class="kx-validation-error">
  <p class="kx-error-msg">{{ save_error }}</p>
</div>
{% endif %}
<form id="folder-form" method="post" action="/setup/folder">
  <label>
    Folder path
    <input type="text" name="folder_path" id="folder-input" placeholder="~/Documents" required
           value="{{ folder_path|default('') or (hint.suggested_path if hint is defined else '') }}">
  </label>
  {% if hint is defined and hint.in_container %}
  <p class="kx-muted kx-small">Running in Docker? This is the folder you mounted —
    with the standard compose that's /data/documents.</p>
  {% endif %}
</form>
{% endblock %}
{% block banner_class %} kx-banner-slot-md{% endblock %}
{% block banner %}
<span id="scan-indicator" class="kx-indicator kx-muted" aria-busy="true">Scanning…</span>
<div id="scan-result"></div>
{% endblock %}
{% block actions %}
<a href="/setup/key" class="kx-btn-secondary">Back</a>
<button type="button" class="kx-btn-outline"
        hx-post="/setup/folder/scan"
        hx-target="#scan-result"
        hx-swap="innerHTML"
        hx-include="#folder-form"
        hx-indicator="#scan-indicator">
  Scan folder
</button>
<button type="submit" form="folder-form" class="kx-btn-primary kx-btn-reveal" id="start-indexing-btn">Start indexing</button>
{% endblock %}
{% block scripts %}
<script>
  document.addEventListener('htmx:afterSwap', function () {
    if (document.querySelector('.kx-scan-result')) {
      document.getElementById('start-indexing-btn').classList.add('kx-revealed');
    }
  });
</script>
{% endblock %}