{% extends "base.html" %}
{% block title %}Factcat — User Preferences{% endblock %}
{% block extra_head %}
    <script src="/static/save.js"></script>
{% endblock %}
{% block extra_css %}
    .prefs-page {
      flex: 1;
      min-height: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 1.5rem 1.75rem 2rem;
      overflow-y: auto;
    }
    .prefs-form {
      background: var(--fc-snow);
      border: 1px solid var(--fc-line);
      border-radius: 0.75rem;
      padding: 1.4rem 1.5rem 1.6rem;
      max-width: 42rem;
    }
    .prefs-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin: 0 0 0.35rem;
    }
    .prefs-head h1 { margin: 0; }
    #theme-btn {
      margin: 0;
      width: 2rem;
      height: 2rem;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--fc-snow);
      color: var(--fc-ink);
      border: 1px solid var(--fc-line);
      border-radius: 0.25rem;
    }
    #theme-btn svg { width: 1.1rem; height: 1.1rem; display: block; }
    #theme-btn .icon-moon { display: none; }
    #theme-btn[data-theme="dark"] .icon-sun { display: none; }
    #theme-btn[data-theme="dark"] .icon-moon { display: block; }
    .hour-clock {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
      margin: 0.15rem 0 0.65rem;
    }
    .hour-clock-btn {
      margin: 0;
      padding: 0.4rem 0.5rem;
      background: var(--fc-paper);
      color: var(--fc-ink);
      border: 1px solid var(--fc-line);
      border-radius: 0.35rem;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
    }
    .hour-clock-btn:hover { border-color: var(--fc-ochre); }
    .hour-clock-btn[aria-pressed="true"] {
      border-color: var(--fc-ochre);
      box-shadow: 0 0 0 1px var(--fc-ochre);
      background: var(--fc-snow);
    }
    .hour-panel[hidden] { display: none !important; }
    .hour-row {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 0.55rem;
      margin: 0 0 0.2rem;
      padding: 0.35rem 0.45rem;
      border: 1px solid var(--fc-line);
      border-radius: 0.35rem;
      cursor: pointer;
      font-weight: 400;
    }
    .hour-row:has(input:checked) {
      border-color: var(--fc-ochre);
      box-shadow: 0 0 0 1px var(--fc-ochre);
    }
    .hour-row input { width: auto; margin: 0; }
    .hour-ticks {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.35rem;
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
      font-size: 0.8rem;
    }
    .vocab-lede {
      margin: 0 0 0.75rem;
      font-size: 0.85rem;
      color: var(--fc-ink-soft);
    }
    #sql-options-wrap[hidden] { display: none !important; }
    #sql-options-wrap {
      margin: 0.85rem 0 0;
    }
    .vocab-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    .vocab-card {
      margin: 0;
      padding: 0.9rem 0.7rem 1rem;
      border: 1px solid var(--fc-line);
      border-radius: 0.65rem;
      background: var(--fc-paper);
      color: var(--fc-ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
      cursor: pointer;
      font: inherit;
      text-align: center;
      box-shadow: 0 1px 0 rgba(28, 25, 23, 0.04);
    }
    .vocab-card img {
      width: 8rem;
      height: 8rem;
      object-fit: contain;
      border-radius: 0.4rem;
    }
    .vocab-card span {
      font-size: 0.78rem;
      line-height: 1.35;
      font-weight: 600;
    }
    .vocab-card:hover {
      border-color: var(--fc-ochre);
    }
    .vocab-card[aria-pressed="true"] {
      border-color: var(--fc-ochre);
      box-shadow: 0 0 0 1px var(--fc-ochre);
      background: var(--fc-snow);
    }
{% endblock %}
{% block body %}
<div class="prefs-page">
<form id="f" class="prefs-form">
  <div class="prefs-head">
    <h1>User Preferences</h1>
    <button type="button" id="theme-btn" data-theme="{{ prefs.theme or 'light' }}" title="Theme" aria-label="Theme">
      <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
      </svg>
      <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 14.3A8.5 8.5 0 1 1 9.7 3a7 7 0 0 0 11.3 11.3z"/>
      </svg>
    </button>
  </div>
  <input type="hidden" name="theme" id="theme" value="{{ prefs.theme or 'light' }}">
  <input type="hidden" name="vocab" id="vocab" value="{{ prefs.vocab or 'plain' }}">

  <h2>Wording</h2>
  <p class="vocab-lede">Factcat will tailor its wording for you.</p>
  <div class="vocab-cards" role="radiogroup" aria-label="Wording">
    <button type="button" class="vocab-card" data-vocab="plain" aria-pressed="{{ 'true' if prefs.vocab != 'sql' else 'false' }}">
      <img src="/static/cat-business.jpg" alt="" width="256" height="256">
      <span>I'm a business user</span>
    </button>
    <button type="button" class="vocab-card" data-vocab="sql" aria-pressed="{{ 'true' if prefs.vocab == 'sql' else 'false' }}">
      <img src="/static/cat-analyst.jpg" alt="" width="256" height="256">
      <span>I'm an analyst familiar with SQL</span>
    </button>
  </div>
  <div id="sql-options-wrap" {% if prefs.vocab != 'sql' %}hidden{% endif %}>
    <label for="sql_case">SQL letter case</label>
    <select id="sql_case" name="sql_case">
      <option value="upper" {% if prefs.sql_case != "lower" %}selected{% endif %}>Uppercase (COUNT(*), WHERE)</option>
      <option value="lower" {% if prefs.sql_case == "lower" %}selected{% endif %}>Lowercase (count(*), where)</option>
    </select>
    <label for="sql_neq">Not equal</label>
    <select id="sql_neq" name="sql_neq">
      <option value="<>" {% if prefs.sql_neq != "!=" %}selected{% endif %}>&lt;&gt;</option>
      <option value="!=" {% if prefs.sql_neq == "!=" %}selected{% endif %}>!=</option>
    </select>
  </div>

  <h2>Numbers</h2>
  <label for="thousand_sep">Thousand separator</label>
  <select id="thousand_sep" name="thousand_sep">
    <option value="comma" {% if prefs.thousand_sep == "comma" or not prefs.thousand_sep %}selected{% endif %}>Comma (1,234)</option>
    <option value="period" {% if prefs.thousand_sep == "period" %}selected{% endif %}>Period (1.234)</option>
    <option value="space" {% if prefs.thousand_sep == "space" %}selected{% endif %}>Space (1 234)</option>
    <option value="none" {% if prefs.thousand_sep == "none" %}selected{% endif %}>None (1234)</option>
  </select>
  <label for="decimal_sep">Decimal separator</label>
  <select id="decimal_sep" name="decimal_sep">
    <option value="period" {% if prefs.decimal_sep == "period" or not prefs.decimal_sep %}selected{% endif %}>Period (1.23)</option>
    <option value="comma" {% if prefs.decimal_sep == "comma" %}selected{% endif %}>Comma (1,23)</option>
  </select>
  <span class="hint" id="num-example">Example: 1,234.56</span>

  <h2>Calendar</h2>
  <span class="hint">Unlike everything else here, these two change the query: they decide which day
  and which week each event falls in. They are yours — a colleague working in this project keeps
  their own.</span>
  <label for="week_start">Week starts on</label>
  <select id="week_start" name="week_start">
    <option value="monday" {% if prefs.week_start != "sunday" %}selected{% endif %}>Monday</option>
    <option value="sunday" {% if prefs.week_start == "sunday" %}selected{% endif %}>Sunday</option>
  </select>
  <label for="reporting_timezone">Reporting timezone</label>
  <select id="reporting_timezone" name="reporting_timezone">
    {% for tz in reporting_timezones %}
    <option value="{{ tz }}" {% if (prefs.reporting_timezone or "UTC") == tz %}selected{% endif %}>{{ tz }}</option>
    {% endfor %}
  </select>
  <span class="hint">Applied after the stored instant is converted; not the warehouse default.</span>
  <h2>Dates</h2>
  <label for="weekday_style">Weekday</label>
  <select id="weekday_style" name="weekday_style">
    <option value="long" {% if prefs.weekday_style != "short" %}selected{% endif %}>Monday</option>
    <option value="short" {% if prefs.weekday_style == "short" %}selected{% endif %}>Mon</option>
  </select>
  <label for="month_style">Month</label>
  <select id="month_style" name="month_style">
    <option value="long" {% if prefs.month_style != "short" %}selected{% endif %}>January</option>
    <option value="short" {% if prefs.month_style == "short" %}selected{% endif %}>Jan</option>
  </select>
  <label for="pad_day">Day of month</label>
  <select id="pad_day" name="pad_day">
    <option value="false" {% if not prefs.pad_day %}selected{% endif %}>1–31</option>
    <option value="true" {% if prefs.pad_day %}selected{% endif %}>01–31</option>
  </select>
  <label id="hour-style-label">Time of day</label>
  <div class="hour-clock" role="radiogroup" aria-label="12-hour or 24-hour">
    <button type="button" class="hour-clock-btn" data-clock="12" aria-pressed="{{ 'true' if hour_clock == '12' else 'false' }}">12-hour</button>
    <button type="button" class="hour-clock-btn" data-clock="24" aria-pressed="{{ 'true' if hour_clock != '12' else 'false' }}">24-hour</button>
  </div>
  {% for clock, styles in hour_styles %}
  <div class="hour-panel" data-clock="{{ clock }}" role="radiogroup" aria-labelledby="hour-style-label" {% if clock != hour_clock %}hidden{% endif %}>
    {% for value in styles %}
    <label class="hour-row">
      <input type="radio" name="hour_style" value="{{ value }}" {% if prefs.hour_style == value %}checked{% endif %}>
      <span class="hour-ticks">
        {% for tick in hour_previews[value] %}
        <span>{{ tick }}</span>
        {% endfor %}
      </span>
    </label>
    {% endfor %}
  </div>
  {% endfor %}

  <p id="error"></p>
  <div id="status" class="save-toast" role="status" aria-live="polite" hidden></div>
</form>
</div>
<script>
const form = document.getElementById("f");
const vocabEl = document.getElementById("vocab");
const themeEl = document.getElementById("theme");
const themeBtn = document.getElementById("theme-btn");
let suppressChange = true;
function setError(text) {
  document.getElementById("error").textContent = text || "";
  if (text) showToast(text, "fail");
}
function setStatus(text) {
  showToast(text || "Saved", "saved");
}
function thousandChar() {
  const v = document.getElementById("thousand_sep").value;
  if (v === "none") return "";
  if (v === "space") return " ";
  if (v === "period") return ".";
  return ",";
}
function decimalChar() {
  return document.getElementById("decimal_sep").value === "comma" ? "," : ".";
}
function syncNumExample() {
  const thou = thousandChar();
  const dec = decimalChar();
  const el = document.getElementById("num-example");
  if ((thou === "." || thou === ",") && thou === dec) {
    el.textContent = "Thousand and decimal separators must differ.";
    return false;
  }
  el.textContent = "Example: 1" + (thou || "") + "234" + dec + "56";
  return true;
}
["thousand_sep", "decimal_sep"].forEach((id) => {
  document.getElementById(id).addEventListener("change", syncNumExample);
});
syncNumExample();
const HOUR_CLOCK_DEFAULT = {{ hour_clock_default|tojson }};
function setHourClock(clock) {
  document.querySelectorAll(".hour-clock-btn").forEach((btn) => {
    btn.setAttribute("aria-pressed", btn.getAttribute("data-clock") === clock ? "true" : "false");
  });
  document.querySelectorAll(".hour-panel").forEach((panel) => {
    panel.hidden = panel.getAttribute("data-clock") !== clock;
  });
  const panel = document.querySelector('.hour-panel[data-clock="' + clock + '"]');
  const checked = document.querySelector('input[name="hour_style"]:checked');
  if (!panel || (checked && panel.contains(checked))) return;
  const pick = panel.querySelector('input[value="' + HOUR_CLOCK_DEFAULT[clock] + '"]')
    || panel.querySelector('input[name="hour_style"]');
  if (pick) pick.checked = true;
}
document.querySelectorAll(".hour-clock-btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    setHourClock(btn.getAttribute("data-clock"));
    scheduleSave();
  });
});
const sqlOptionsWrap = document.getElementById("sql-options-wrap");
function syncSqlOptions() {
  sqlOptionsWrap.hidden = vocabEl.value !== "sql";
}
document.querySelectorAll(".vocab-card").forEach((btn) => {
  btn.addEventListener("click", () => {
    vocabEl.value = btn.getAttribute("data-vocab");
    document.querySelectorAll(".vocab-card").forEach((el) => {
      el.setAttribute("aria-pressed", el === btn ? "true" : "false");
    });
    syncSqlOptions();
    scheduleSave();
  });
});
syncSqlOptions();
function applyTheme(next) {
  themeEl.value = next;
  themeBtn.setAttribute("data-theme", next);
  themeBtn.setAttribute("aria-label", next === "dark" ? "Dark" : "Light");
  document.documentElement.setAttribute("data-theme", next);
}
themeBtn.addEventListener("click", () => {
  applyTheme(themeEl.value === "dark" ? "light" : "dark");
  scheduleSave();
});
themeBtn.setAttribute("aria-label", themeEl.value === "dark" ? "Dark" : "Light");
const autosave = fcAutosave({
  save: async (init) => {
    const body = Object.fromEntries(new FormData(form).entries());
    body.pad_day = body.pad_day === "true";
    return post("/api/preferences", body, init);
  },
  onSaved: (data) => {
    setError("");
    setStatus("Saved");
    if (data.prefs && data.prefs.theme) {
      document.documentElement.setAttribute("data-theme", data.prefs.theme);
    }
    if (data.prefs && data.prefs.vocab) {
      document.documentElement.setAttribute("data-vocab", data.prefs.vocab);
    }
  },
  onFail: (msg) => setError(msg || "Could not save preferences"),
  suppressed: () => suppressChange,
  gate: () => syncNumExample(),
});
function scheduleSave() {
  autosave.schedule();
}
form.addEventListener("submit", (e) => {
  e.preventDefault();
  autosave.flush();
});
form.addEventListener("change", scheduleSave);
form.addEventListener("input", (e) => {
  const tag = (e.target && e.target.tagName) || "";
  if (tag === "INPUT" || tag === "TEXTAREA") scheduleSave();
});
suppressChange = false;
</script>
{% endblock %}