{% extends "base.html" %}
{% block title %}Appearance settings · NEXXVU{% endblock %}
{% block content %}
<div class="page-heading"><div><p class="eyebrow">Settings</p><h1>Appearance</h1><p class="muted">Choose how NEXXVU looks for your account.</p></div><a class="button button-secondary button-compact" href="/settings">All settings</a></div>
<div class="settings-workspace">
  {% include "_settings_navigation.html" %}
  <section class="settings-main" aria-labelledby="appearance-settings-title">
    <h2 id="appearance-settings-title">Theme and accent</h2>
    {% if saved %}<div class="alert alert-success" role="status">Appearance preference saved.</div>{% endif %}
    {% if error %}<div class="alert alert-danger" role="alert">{{ error }}</div>{% endif %}
    <form class="panel settings-form" method="post" action="/settings/appearance" data-appearance-form>
      <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
      <fieldset class="form-group"><legend>Theme</legend><p class="field-help">System automatically follows your device’s light or dark setting.</p><div class="choice-grid">{% for theme in themes %}<label class="choice-card"><input type="radio" name="theme" value="{{ theme }}"{% if appearance.theme == theme %} checked{% endif %}><span><strong>{{ theme|capitalize }}</strong>{% if theme == 'system' %}<small>Follow this device</small>{% else %}<small>Always use {{ theme }}</small>{% endif %}</span></label>{% endfor %}</div></fieldset>
      <div class="form-divider" aria-hidden="true"></div>
      <fieldset class="form-group"><legend>Accent</legend><p class="field-help">Applied to navigation, focus, and primary actions.</p><div class="accent-grid">{% for accent in accents %}<label class="accent-choice accent-{{ accent }}"><input type="radio" name="accent" value="{{ accent }}"{% if appearance.accent == accent %} checked{% endif %}><span class="accent-swatch" aria-hidden="true"></span><span>{{ accent|capitalize }}</span></label>{% endfor %}</div></fieldset>
      <div class="form-actions"><button class="button button-primary" type="submit">Save appearance</button><a class="button button-secondary" href="/settings">Cancel</a></div>
    </form>
  </section>
</div>
{% endblock %}
{% block scripts %}<script src="/static/portal.js" defer></script>{% endblock %}