{% extends "base.html" %}
{% block title %}Appearance{% endblock %}
{% block content %}
<div class="hdr"><div><h1>Appearance</h1><p class="sub" style="margin:0">{% if is_owner %}Brand and layout for the whole workspace. Members can override theme, font, density and dashboard for themselves.{% else %}Your personal look. Colours, logo and status-page defaults are set by the workspace owner ({{ ws.email }}).{% endif %} Changes preview live; nothing is saved until you press Save.</p></div>
  <div class="actions"><div class="seg"><button type="button" class="on" id="tab-ui" onclick="mode('ui')">Interactive</button><button type="button" id="tab-json" onclick="mode('json')">JSON</button></div><a class="btn sm" href="/app/appearance.json">Export JSON</a></div></div>
<form method="post" action="/app/appearance" id="apf" class="grid g2" style="align-items:start">
<input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="action" id="action" value="save">
<div id="ui-panels">
  <div class="panel" style="margin-bottom:16px"><h2>Theme &amp; colours</h2>
    <div class="grid g3">
      <div class="row"><label>Theme</label><select name="theme" data-k="theme"><option value="dark" {% if cfg.theme == 'dark' %}selected{% endif %}>Dark</option><option value="light" {% if cfg.theme == 'light' %}selected{% endif %}>Light</option><option value="system" {% if cfg.theme == 'system' %}selected{% endif %}>Follow system</option></select></div>
      <div class="row"><label>Font</label><select name="font" data-k="font">{% for f in fonts %}<option value="{{ f }}" {% if cfg.font == f %}selected{% endif %}>{{ f|capitalize }}</option>{% endfor %}</select></div>
      <div class="row"><label>Font size <span class="muted" id="fs-lbl">{{ cfg.font_size }}px</span></label><input type="range" name="font_size" min="12" max="18" step="0.5" value="{{ cfg.font_size }}" data-k="font_size" oninput="document.getElementById('fs-lbl').textContent=this.value+'px'"></div>
    </div>
    <div class="grid g3" {% if not is_owner %}style="opacity:.5;pointer-events:none"{% endif %}>
      <div class="row"><label>Accent</label><input type="color" name="accent" value="{{ cfg.accent }}" data-k="accent" style="height:38px;padding:2px"></div>
      <div class="row"><label>Accent 2 (gradient)</label><input type="color" name="accent2" value="{{ cfg.accent2 }}" data-k="accent2" style="height:38px;padding:2px"></div>
      <div class="row"><label>Dark background</label><input type="color" name="background" value="{{ cfg.background }}" data-k="background" style="height:38px;padding:2px"></div>
      <div class="row"><label>OK</label><input type="color" name="c_ok" value="{{ cfg.colors.ok }}" data-k="colors.ok" style="height:38px;padding:2px"></div>
      <div class="row"><label>Warning</label><input type="color" name="c_warn" value="{{ cfg.colors.warn }}" data-k="colors.warn" style="height:38px;padding:2px"></div>
      <div class="row"><label>Error</label><input type="color" name="c_err" value="{{ cfg.colors.err }}" data-k="colors.err" style="height:38px;padding:2px"></div>
      <div class="row"><label>Info</label><input type="color" name="c_info" value="{{ cfg.colors.info }}" data-k="colors.info" style="height:38px;padding:2px"></div>
    </div>
    <div class="grid g3">
      <div class="row"><label>Corner radius <span class="muted" id="rd-lbl">{{ cfg.radius }}px</span></label><input type="range" name="radius" min="0" max="20" value="{{ cfg.radius }}" data-k="radius" oninput="document.getElementById('rd-lbl').textContent=this.value+'px'"></div>
      <div class="row"><label>Density</label><select name="density" data-k="density"><option value="comfortable" {% if cfg.density == 'comfortable' %}selected{% endif %}>Comfortable</option><option value="compact" {% if cfg.density == 'compact' %}selected{% endif %}>Compact</option></select></div>
      <div class="row"><label>Navigation</label><select name="sidebar" data-k="sidebar"><option value="left" {% if cfg.sidebar == 'left' %}selected{% endif %}>Sidebar (left)</option><option value="top" {% if cfg.sidebar == 'top' %}selected{% endif %}>Top bar</option></select></div>
    </div>
  </div>
  <div class="panel" style="margin-bottom:16px"><h2>Dashboard</h2>
    <div class="row"><label>Stat tiles (in order)</label>{% for t in tiles %}<label class="check" style="display:inline-flex;margin-right:14px"><input type="checkbox" name="tiles" value="{{ t }}" {% if t in cfg.dashboard.tiles %}checked{% endif %}> {{ t|replace('_',' ')|capitalize }}</label>{% endfor %}</div>
    <div class="row"><label>Monitor table columns</label>{% for c in columns %}<label class="check" style="display:inline-flex;margin-right:14px"><input type="checkbox" name="columns" value="{{ c }}" {% if c in cfg.dashboard.columns %}checked{% endif %}> {{ c|replace('_',' ')|capitalize }}</label>{% endfor %}</div>
    <div class="grid g3">
      <div class="row"><label>Page after login</label><select name="landing">{% for l in landings %}<option value="{{ l }}" {% if cfg.dashboard.landing == l %}selected{% endif %}>{{ {'/app':'Monitors','/app/dashboards':'Dashboards','/app/servers':'Servers','/app/incidents':'Incidents','/app/status':'Status pages','/app/reports':'Reports'}[l] }}</option>{% endfor %}</select></div>
      <div class="row"><label>Default chart range</label><select name="default_range">{% for r in ranges %}<option value="{{ r }}" {% if cfg.dashboard.default_range == r %}selected{% endif %}>{{ r }}</option>{% endfor %}</select></div>
      <div class="row"><label style="margin-top:26px" class="check"><input type="checkbox" name="show_recent_alerts" value="1" {% if cfg.dashboard.show_recent_alerts %}checked{% endif %}> Show recent alerts under monitors</label></div>
    </div>
  </div>
  {% if is_owner %}
  <div class="panel" style="margin-bottom:16px"><h2>Brand &amp; white-label {% if not plan.hide_branding %}<span class="pill brand">Pro</span>{% endif %}</h2>
    <div class="grid g2">
      <div class="row"><label>Product name shown in the app</label><input type="text" name="brand_name" value="{{ cfg.brand.name }}" placeholder="{{ app_name }}" maxlength="40" data-k="brand.name"></div>
      <div class="row"><label>Logo URL (https, PNG/SVG, ~22px tall)</label><input type="text" name="brand_logo" value="{{ cfg.brand.logo_url }}" placeholder="https://…/logo.svg"></div>
    </div>
    <label class="check"><input type="checkbox" name="brand_hide" value="1" {% if cfg.brand.hide_powered_by %}checked{% endif %}> Hide "a PuzariCloud product" in the app footer</label>
    <h3 style="margin-top:14px">Public status page defaults</h3><p class="small muted">Per-page logo and custom CSS still win; these apply to pages that don't set their own.</p>
    <div class="grid g3">
      <div class="row"><label>Accent</label><input type="color" name="sp_accent" value="{{ cfg.status_pages.accent or cfg.accent }}" style="height:38px;padding:2px"></div>
      <div class="row"><label>Font</label><select name="sp_font"><option value="">Same as app</option>{% for f in fonts %}<option value="{{ f }}" {% if cfg.status_pages.font == f %}selected{% endif %}>{{ f|capitalize }}</option>{% endfor %}</select></div>
      <div class="row"><label style="margin-top:26px" class="check"><input type="checkbox" name="sp_hide" value="1" {% if cfg.status_pages.hide_powered_by %}checked{% endif %}> Hide "Powered by Vigil"</label></div>
    </div>
  </div>
  <div class="panel" style="margin-bottom:16px"><h2>Custom CSS</h2><p class="small muted">Appended to every app page for everyone in the workspace. Use the variables: <code class="k">--bg --panel --line --text --muted --brand --ok --warn --err --radius --font</code>.</p>
    <textarea name="custom_css" rows="6" class="mono" data-k="custom_css" placeholder=".side { background: #000 }&#10;.stat .v { font-weight: 500 }">{{ cfg.custom_css }}</textarea></div>
  {% endif %}
</div>
<div id="json-panel" hidden class="panel"><h2>Appearance as JSON</h2><p class="small muted">Edit and apply, paste a saved file, or copy this to reuse on another workspace. Unknown keys are ignored; invalid values fall back to defaults.{% if not is_owner %} Only theme, font, font_size, density, sidebar and dashboard apply to members.{% endif %}</p>
  <textarea name="json" id="json-text" rows="26" class="mono">{{ cfg_json }}</textarea>
  <div class="actions" style="margin-top:8px"><button type="button" class="btn sm" onclick="document.getElementById('json-text').value=document.getElementById('defaults').textContent">Load defaults</button><button type="button" class="btn sm" onclick="previewJson()">Preview</button></div>
  <script type="application/json" id="defaults">{{ defaults_json }}</script></div>
<div>
  <div class="panel" style="position:sticky;top:16px"><h2>Preview</h2>
    <div id="pv" style="border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--bg)">
      <div style="display:flex;gap:8px;align-items:center;margin-bottom:10px"><span class="dot ok"></span><b id="pv-name">{{ cfg.brand.name or app_name }}</b><span class="pill brand">Pro plan</span></div>
      <div class="grid g3" style="gap:8px;margin-bottom:10px"><div class="stat"><div class="k">Uptime</div><div class="v" style="color:var(--ok)">99.98%</div></div><div class="stat"><div class="k">Down</div><div class="v" style="color:var(--err)">1</div></div><div class="stat"><div class="k">Alerts</div><div class="v">4</div></div></div>
      <div class="panel" style="padding:10px"><table><tr><td><b>Checkout API</b> <span class="pill">api</span></td><td><span class="dot ok"></span>up · 120 ms</td></tr><tr><td><b>Nightly backup</b> <span class="pill">heartbeat</span></td><td><span class="dot err"></span><span class="err">down</span></td></tr><tr><td><b>Marketing site</b> <span class="pill">uptime</span></td><td><span class="pill warn">slow</span></td></tr></table></div>
      <div class="actions" style="margin-top:10px"><span class="btn primary sm">Primary action</span><span class="btn sm">Secondary</span><span class="flash" style="margin:0;padding:6px 10px;font-size:12px">Saved</span></div>
    </div>
    <div class="actions" style="margin-top:14px"><button class="btn primary">Save</button>{% if is_owner %}<button class="btn danger" onclick="document.getElementById('action').value='reset';return confirm('Reset all appearance settings to defaults?')">Reset to defaults</button>{% else %}<button class="btn danger" onclick="document.getElementById('action').value='reset';return confirm('Reset your personal settings?')">Reset mine</button>{% endif %}</div>
  </div>
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
var isOwner = {{ 'true' if is_owner else 'false' }}, FONTS = {"system": '-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif', "inter": '"Inter","Segoe UI",Roboto,sans-serif', "serif": 'Georgia,"Times New Roman",serif', "mono": 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace'};
function mode(m){var j=m==='json';document.getElementById('json-panel').hidden=!j;document.getElementById('ui-panels').hidden=j;document.getElementById('action').value=j?'json':'save';document.getElementById('tab-ui').classList.toggle('on',!j);document.getElementById('tab-json').classList.toggle('on',j);if(j){document.getElementById('json-text').value=JSON.stringify(collect(),null,2)}}
function mix(h,t,a){var p=function(x){return [parseInt(x.substr(1,2),16),parseInt(x.substr(3,2),16),parseInt(x.substr(5,2),16)]},A=p(h),B=p(t);return '#'+A.map(function(x,i){return Math.round(x+(B[i]-x)*a).toString(16).padStart(2,'0')}).join('')}
function collect(){var f=document.getElementById('apf'),g=function(n){var e=f.querySelector('[name='+n+']');return e?e.value:undefined},c=function(n){var e=f.querySelector('[name='+n+']');return e?e.checked:undefined},l=function(n){return Array.from(f.querySelectorAll('[name='+n+']:checked')).map(function(e){return e.value})};
  var o={theme:g('theme'),font:g('font'),font_size:+g('font_size'),radius:+g('radius'),density:g('density'),sidebar:g('sidebar'),dashboard:{tiles:l('tiles'),columns:l('columns'),landing:g('landing'),default_range:g('default_range'),show_recent_alerts:!!c('show_recent_alerts')}};
  if(isOwner){o.accent=g('accent');o.accent2=g('accent2');o.background=g('background');o.colors={ok:g('c_ok'),warn:g('c_warn'),err:g('c_err'),info:g('c_info')};o.brand={name:g('brand_name'),logo_url:g('brand_logo'),hide_powered_by:!!c('brand_hide')};o.status_pages={accent:g('sp_accent'),font:g('sp_font'),hide_powered_by:!!c('sp_hide')};o.custom_css=g('custom_css')}
  return o}
function apply(o){var r=document.documentElement.style,light=o.theme==='light'||(o.theme==='system'&&window.matchMedia('(prefers-color-scheme: light)').matches),bg=o.background||'#0a0e16';
  if(light){r.setProperty('--bg','#f4f6fb');r.setProperty('--bg2','#ffffff');r.setProperty('--panel','#ffffff');r.setProperty('--panel2','#f1f4fa');r.setProperty('--line','#dfe4ee');r.setProperty('--line2','#cbd3e1');r.setProperty('--text','#131a2a');r.setProperty('--muted','#5b667d');r.setProperty('--dim','#8a94a8')}
  else{r.setProperty('--bg',bg);r.setProperty('--bg2',mix(bg,'#ffffff',.03));r.setProperty('--panel',mix(bg,'#ffffff',.05));r.setProperty('--panel2',mix(bg,'#ffffff',.08));r.setProperty('--line',mix(bg,'#ffffff',.14));r.setProperty('--line2',mix(bg,'#ffffff',.2));r.setProperty('--text','#e8edf7');r.setProperty('--muted','#8d99b4');r.setProperty('--dim','#5f6b85')}
  if(o.accent)r.setProperty('--brand',o.accent);if(o.accent2)r.setProperty('--brand2',o.accent2);if(o.colors){r.setProperty('--ok',o.colors.ok);r.setProperty('--warn',o.colors.warn);r.setProperty('--err',o.colors.err);r.setProperty('--info',o.colors.info)}
  r.setProperty('--radius',o.radius+'px');r.setProperty('--font',FONTS[o.font]||FONTS.system);r.setProperty('--fs',o.font_size+'px');document.body.style.fontFamily='var(--font)';document.body.style.fontSize='var(--fs)';
  document.querySelector('.shell').classList.toggle('compact',o.density==='compact');var n=document.getElementById('pv-name');if(n)n.textContent=(o.brand&&o.brand.name)||'{{ app_name }}';
  var cs=document.getElementById('live-css');if(!cs){cs=document.createElement('style');cs.id='live-css';document.head.appendChild(cs)}cs.textContent=(o.density==='compact'?'.content{padding:16px 20px 40px}.panel,.card{padding:14px}td,th{padding:7px 10px}.stat{padding:10px 12px}.stat .v{font-size:22px}':'')+(isOwner?(o.custom_css||''):'')}
function previewJson(){try{apply(JSON.parse(document.getElementById('json-text').value))}catch(e){alert('JSON error: '+e.message)}}
document.getElementById('apf').addEventListener('input',function(e){if(e.target.name!=='json')apply(collect())});
document.getElementById('apf').addEventListener('change',function(e){if(e.target.name!=='json')apply(collect())});
</script>
{% endblock %}