{% extends "base.html" %}
{% block title_suffix %} — Settings{% endblock %}
{% block container_style %} style="max-width: 880px;"{% endblock %}
{% block content %}

  <section class="hero">
    <div class="hero-left">
      <div class="eyebrow"><span class="bar"></span>Preferences</div>
      <h1>Your <span class="ember">settings</span>.</h1>
      <p class="lede">Mirrors <code>gitstow config show</code>. All values persist to <code>{{ settings.config_path }}</code>.</p>
    </div>
  </section>

  <form method="POST" action="/settings">

    {% if saved %}<p class="form-flash">Preferences saved.</p>{% endif %}
    {% if error %}<p class="form-error">{{ error }}</p>{% endif %}

    <section>
      <h4>Defaults</h4>
      <dl class="settings-grid">
        <dt>Default host</dt>
        <dd>
          <select name="default_host" style="max-width: 320px;">
            <option value="github.com"{% if settings.default_host == "github.com" %} selected{% endif %}>github.com</option>
            <option value="gitlab.com"{% if settings.default_host == "gitlab.com" %} selected{% endif %}>gitlab.com</option>
            <option value="bitbucket.org"{% if settings.default_host == "bitbucket.org" %} selected{% endif %}>bitbucket.org</option>
            <option value="codeberg.org"{% if settings.default_host == "codeberg.org" %} selected{% endif %}>codeberg.org</option>
            {% if settings.default_host not in ["github.com", "gitlab.com", "bitbucket.org", "codeberg.org"] %}
            <option value="{{ settings.default_host }}" selected>{{ settings.default_host }}</option>
            {% endif %}
          </select>
          <span class="form-hint">Used when you provide <code>owner/repo</code> shorthand without a full URL.</span>
        </dd>

        <dt>SSH preference</dt>
        <dd>
          <label style="display: inline-flex; align-items: center; margin: 0.55rem 0 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-soft); font-size: 0.9rem;">
            <input type="checkbox" name="prefer_ssh"{% if settings.prefer_ssh %} checked{% endif %}>
            Convert https:// URLs to SSH on clone
          </label>
          <span class="form-hint">Applies when cloning via the add-repo form. Direct git URLs are never rewritten.</span>
        </dd>

        <dt>Parallel limit</dt>
        <dd>
          <input type="number" name="parallel_limit" min="1" max="32" value="{{ parallel_limit }}">
          <span class="form-hint">Max concurrent git operations for pulls, fetches, and clones.</span>
        </dd>

        <dt>Clone timeout</dt>
        <dd>
          <input type="number" name="clone_timeout" min="30" step="30" value="{{ clone_timeout }}">
          <span class="form-hint">Seconds before a clone is abandoned. Raise it for very large repos.</span>
        </dd>
      </dl>
    </section>

    <div style="display: flex; gap: 0.5rem; margin-top: 2rem;">
      <button type="submit" class="btn btn-primary">Save preferences</button>
      <a href="/" class="btn btn-ghost">Cancel</a>
    </div>
  </form>

    <section class="section">
      <h4>Paths</h4>
      <dl class="settings-grid">
        <dt>Config file</dt>
        <dd><code class="path-code">{{ settings.config_path }}</code></dd>
        <dt>Registry</dt>
        <dd><code class="path-code">{{ settings.repos_path }}</code></dd>
      </dl>
      <small style="display: block; margin-top: 1rem; color: var(--muted); font-size: 0.84rem;">
        Read-only here — edit YAML directly, or run <code>gitstow config path</code> to locate the files.
      </small>
    </section>

    <section class="section">
      <h4>Collection</h4>
      <dl class="settings-grid">
        <dt>Export</dt>
        <dd>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <a href="/collection/export?fmt=yaml" class="btn btn-outline btn-sm">↓ YAML</a>
            <a href="/collection/export?fmt=json" class="btn btn-outline btn-sm">↓ JSON</a>
            <a href="/collection/export?fmt=urls" class="btn btn-outline btn-sm">↓ URLs</a>
          </div>
          <span class="form-hint">Download your collection. YAML is the canonical format — fully round-trippable via Import.</span>
        </dd>
        <dt>Import</dt>
        <dd>
          <form method="POST" action="/collection/import" enctype="multipart/form-data" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
            <label class="file-label btn btn-outline btn-sm">Choose file…
              <input type="file" name="file" accept=".yaml,.yml,.json,.txt" required>
            </label>
            <span class="file-name muted" id="file-name">no file chosen</span>
            <button type="submit" class="btn btn-primary btn-sm">Upload & clone</button>
          </form>
          <span class="form-hint">Upload YAML / JSON / plain URLs. Repos clone into their recorded workspace when it's configured — otherwise the first workspace. Already-tracked repos are skipped.</span>
        </dd>
      </dl>
    </section>

    <section class="section">
      <h4>Integrations</h4>
      <dl class="settings-grid">
        <dt>Claude Code skill</dt>
        <dd>
          <code class="path-code">{{ settings.skill_path }}</code>
          <span class="form-hint">Auto-updates on every CLI invocation when the package version changes.</span>
        </dd>
        <dt>MCP server</dt>
        <dd>
          <code>gitstow-mcp</code> <span style="color: var(--muted);">— install with</span> <code>pip install gitstow[mcp]</code>
          <span class="form-hint">Optional. For non-Claude-Code AI tools like Claude Desktop, Cursor, Windsurf.</span>
        </dd>
      </dl>
    </section>

    <article class="version-card">
      <strong>gitstow v{{ version }}</strong><br>
      <small style="color: var(--muted); font-size: 0.82rem;">Run <code>gitstow doctor</code> from the CLI for a full environment report.</small>
    </article>

  <script>
    (function () {
      var fileInput = document.querySelector('.file-label input[type="file"]');
      var fileName = document.getElementById('file-name');
      if (!fileInput || !fileName) return;
      fileInput.addEventListener('change', function () {
        fileName.textContent = fileInput.files.length ? fileInput.files[0].name : 'no file chosen';
      });
    })();
  </script>

{% endblock %}