{% extends "base.html" %}
{% block title %}Settings · {{ app_name }}{% endblock %}
{% block body %}
<h1>⚙ Settings <small class="hint">every rule and every editor lives here — the play pages stay clean</small></h1>
<div class="chips settings-nav">
  {% for gid, gtitle, _ in groups %}<a class="chip" href="#{{ gid }}">{{ gtitle }}</a>{% endfor %}
  <a class="chip" href="#activities">🐾 Activities</a>
  {% for m, p in panels %}<a class="chip" href="#{{ m.name }}">{{ m.icon }} {{ m.title }}</a>{% endfor %}
  <a class="chip" href="#system">System</a>
</div>

{% for gid, gtitle, keys in groups %}
<section class="card settings" id="{{ gid }}">
  <form method="post" action="/settings">
    <h2>{{ gtitle }} <a class="doc" href="/guide/{{ group_doc(gid) }}" title="the guide on this">📖</a></h2>
    <div class="fields">
    {% for key, label, default in keys %}
      <label>{{ label }} <input name="{{ key }}" value="{{ values[key] }}" placeholder="{{ default }}"></label>
    {% endfor %}
    </div>
    <button class="primary">Save</button>
  </form>
</section>
{% endfor %}


{#
  🔴 ACTIVITIES ARE LENSES, NOT LOGS. Every row here is a saved query over `events` —
  which is why a new one is populated from the whole existing log the moment it is
  saved, and why deleting one destroys nothing. Changing a matcher RE-READS history; it
  does not rewrite it.

  🔴 ONE <form> PER ROW, AND THE ROWS ARE DIVS, NOT A <table>. A <form> is not a legal
  child of <tr>: the parser hoists it out of the table and every input inside it stops
  being submitted — a broken editor that looks perfectly fine. Rows-as-divs also survive
  a phone, which is where this app is actually used.
#}
<section class="card settings" id="activities">
  <h2>🐾 Activities <a class="doc" href="/guide/customise#activities" title="the guide on this">📖</a></h2>
  <p class="hint">A thing you want to count. It <strong>selects events you already have</strong> —
    so a new one fills in from your whole log straight away, and removing one deletes nothing.
    Each gets five stats you can put on a share card: <code>since_</code>, <code>days_</code>,
    <code>streak_</code>, <code>total_</code>, <code>count_</code> + its slug.</p>

  {% macro act_form(a, is_new) %}
  <div class="act-row{{ ' off' if a and not a.enabled }}{{ ' new' if is_new }}">
    <form method="post" action="/activities/save" class="act-fields">
      {% if a %}<input type="hidden" name="id" value="{{ a.id }}">{% endif %}
      <input type="hidden" name="sort" value="{{ a.sort if a else 900 }}">
      <label class="f-ico">icon
        <input name="icon" value="{{ a.icon if a else '🐾' }}" maxlength="4"></label>
      <label class="f-col">colour
        <input type="color" name="color" value="{{ a.color if a else '#00e5ff' }}"></label>
      <label class="f-title">name
        <input name="title" value="{{ a.title if a else '' }}" placeholder="Walkies" required></label>
      <label class="f-slug">slug
        <input name="slug" value="{{ a.slug if a else '' }}" placeholder="walkies"
               pattern="[a-z][a-z0-9_]{0,30}" required
               title="lower-case letters, digits, underscores — it becomes an event kind and a stat-token id"></label>
      <label class="f-mod">match module
        <input name="match_module" value="{{ a.match_module if a else 'activity' }}" placeholder="any"></label>
      <label class="f-kind">match kind(s)
        <input name="match_kind" value="{{ a.match_kind if a else '' }}" placeholder="kind,kind"></label>
      <label class="f-cad">streak
        <select name="cadence">{% for c in cadences %}<option value="{{ c }}" {{ 'selected' if a and a.cadence == c }}>{{ c }}</option>{% endfor %}</select></label>
      <label class="f-tgt">target
        <input type="number" name="target_n" value="{{ a.target_n if a else 0 }}" min="0"
               title="per week for weekly_n; the biggest allowed gap in days for every_n_days"></label>
      <label class="f-dur">time from
        <select name="duration_src"><option value="">—</option>
          {% for d in duration_srcs if d %}<option value="{{ d }}" {{ 'selected' if a and a.duration_src == d }}>{{ d }}</option>{% endfor %}</select></label>
      <label class="f-xp">xp
        <input type="number" name="xp" value="{{ a.xp if a else 5 }}" min="0" title="xp for a one-tap log"></label>
      <label class="check f-tap"><input type="checkbox" name="emits" value="1"
        {{ 'checked' if (a.emits if a else true) }}> one-tap button</label>
      <label class="check f-on"><input type="checkbox" name="enabled" value="1"
        {{ 'checked' if (a.enabled if a else true) }}> on</label>
      <button class="{{ 'primary' if is_new else '' }} f-save">{{ 'Add' if is_new else 'Save' }}</button>
    </form>
    {% if a %}
    <form method="post" action="/activities/delete" class="act-del"
          onsubmit="return confirm('Remove “{{ a.title }}”? This deletes the lens only — every event it was counting stays exactly where it is.')">
      <input type="hidden" name="id" value="{{ a.id }}"><button class="chip danger" title="remove">✕</button></form>
    {% endif %}
  </div>
  {% endmacro %}

  {% for a in acts_all %}{{ act_form(a, false) }}{% endfor %}
  {{ act_form(none, true) }}

  <p class="hint"><strong>Your own thing?</strong> Leave <em>match module</em> as
    <code>activity</code> and <em>match kind</em> as your slug, tick <em>one-tap button</em>, and it
    gets a button on the dashboard that it then counts.
    <strong>Counting something a module already does?</strong> Put that module's kind in
    <em>match kind</em> and untick <em>one-tap button</em>.</p>
  <p class="hint"><strong>streak</strong> · <code>daily</code> every day ·
    <code>weekly_n</code> counts whole <em>weeks</em> carrying <em>target</em> or more ·
    <code>every_n_days</code> allows a gap of <em>target</em> days ·
    <code>none</code> means this has <em>no streak</em>, and none is shown — a counter has no run to
    break, so a 0 there would claim one was.
    <strong>time from</strong> is where “time doing this” is read: <code>entry</code> (headspace),
    <code>media</code> (recordings), <code>trance</code> (sits). Blank means this has no duration and
    none is shown.</p>

  <details class="fold">
    <summary>every stat id you can put in a share / stamp / recap token list ({{ token_ref|length }})</summary>
    <p class="hint">Paste any of these, comma-separated, into the token fields under
      <a href="#stamps">Stamps &amp; recap</a>. Unknown ids are ignored, and a stat with nothing to
      say at that moment is left out rather than printed as a zero.</p>
    <p class="tokref">{% for t in token_ref %}<code>{{ t }}</code> {% endfor %}</p>
  </details>
</section>

{% for m, p in panels %}
<section class="card settings" id="{{ m.name }}">
  <h2>{{ m.icon }} {{ m.title }} <a class="doc" href="/guide/{{ m.name }}" title="the guide on this module">📖</a></h2>
  {% if m.settings_keys %}
  <form method="post" action="/settings">
    <div class="fields">
    {% for key, label, default in m.settings_keys %}
      <label>{{ label }} <input name="{{ key }}" value="{{ values[key] }}" placeholder="{{ default }}"></label>
    {% endfor %}
    </div>
    <button class="primary">Save</button>
  </form>
  {% endif %}
  {% if p %}{% set c = p %}{% include p.template %}{% endif %}
</section>
{% endfor %}

<section class="card" id="system">
  <h2>System <a class="doc" href="/guide/install" title="self-hosting guide">📖</a></h2>
  <dl class="facts">
    <div><dt>API</dt><dd>{% if api_enabled %}<span class="badge ok">enabled</span> bearer token · <code>/api/v1</code>{% else %}<span class="badge">disabled</span> set <code>LATCH_API_TOKEN</code>{% endif %}</dd></div>
    <div><dt>data</dt><dd><code>{{ data_dir }}</code></dd></div>
    <div><dt>timezone</dt><dd>{{ tz }}</dd></div>
    <div><dt>modules</dt><dd>{% for m in modules %}<span class="badge mod-{{ m.name }}">{{ m.icon }} {{ m.name }}</span> {% endfor %}</dd></div>
    <div><dt>version</dt><dd>{{ version }}</dd></div>
  </dl>
  <p class="hint">Local only. No outbound calls. Exports strip EXIF. <a href="/guide/privacy">How that is enforced →</a></p>
  <p><a class="btn primary" href="/export">Export your data →</a></p>
</section>
{% endblock %}