{% extends "base.html" %}

{% block title %}Settings · Steady{% endblock %}

{% block content %}
<div class="page-heading">
    <div>
        <p class="eyebrow">Make Steady feel easier</p>
        <h1>Settings</h1>
        <p>Choose what supports you. Every preference can be changed again.</p>
    </div>
</div>

<form class="settings-form" method="post" novalidate>
    {{ form.hidden_tag() }}

    <fieldset class="settings-section">
        <legend>Appearance and reading</legend>
        <div class="field">
            {{ form.theme.label }}
            {{ form.theme() }}
            <p class="field__help">Auto follows your device's light or dark setting.</p>
        </div>
        <div class="preference-row">
            <div>
                {{ form.dyslexia_font.label }}
                <p>Uses an installed accessible font when available, with a spacious local fallback and no external font request.</p>
            </div>
            {{ form.dyslexia_font(role="switch") }}
        </div>
    </fieldset>

    <fieldset class="settings-section">
        <legend>Feedback</legend>
        <div class="preference-row">
            <div>
                {{ form.completion_chime.label }}
                <p>Visual completion feedback remains available when sound is off.</p>
            </div>
            {{ form.completion_chime(role="switch") }}
        </div>
    </fieldset>

    <fieldset class="settings-section">
        <legend>Reminders</legend>
        <div class="field">
            {{ form.notification_frequency.label }}
            {{ form.notification_frequency() }}
            <p class="field__help">This prepares your preference for a future reminder service. Quiet is the default.</p>
        </div>
        <div class="reminder-placeholder"
             data-reminder-capability
             data-feature-enabled="{{ 'true' if config.FEATURE_BROWSER_REMINDERS else 'false' }}">
            <strong>Browser reminders are not active yet</strong>
            <p data-reminder-status>No notifications are scheduled, and Steady has not requested browser permission.</p>
            <button class="button button--quiet" type="button" data-check-reminders>Check browser support</button>
            <p class="field__help">This check does not request permission or subscribe your browser.</p>
        </div>
    </fieldset>

    {{ form.submit(class="button") }}
</form>
{% endblock %}