{% extends '_layout.html' %}
{% from 'components.html' import field %}
{% block title %}Settings · BP Tracker{% endblock %}
{% block content %}<div class="form-page settings-page"><div class="page-heading"><div><p class="eyebrow">MAKE IT YOURS</p><h1>Settings</h1><p class="muted">Your profile, display and personal thresholds.</p></div></div><form method="post" enctype="multipart/form-data" class="card entry-form" novalidate>{{ form.hidden_tag() }}
{% if form.errors %}<div class="notice notice-error" role="alert">Please check the highlighted fields.</div>{% endif %}
<fieldset><legend>Profile</legend>{% if profile.profile_pic %}<img class="profile-photo" src="{{ url_for('user.profile_image', user_id=current_user.id) }}" width="64" height="64" alt="Your profile picture">{% endif %}{{ field(form.name, autocomplete='name') }}{{ field(form.email, autocomplete='email') }}{{ field(form.profile_pic) }}</fieldset>
<fieldset><legend>Personal thresholds</legend><p class="muted small">Readings at or above either value are labelled in History. These are your saved reference values.</p><div class="two-columns">{{ field(form.systolic_threshold, true) }}{{ field(form.diastolic_threshold, true) }}</div></fieldset>
<fieldset><legend>Display</legend>{{ field(form.timezone) }}<div class="checkbox-field">{{ form.dark_mode }}{{ form.dark_mode.label }}</div></fieldset>
<div class="form-actions"><button class="button primary" type="submit">Save settings</button><a href="{{ url_for('main.dashboard') }}">Back to overview</a></div></form></div>{% endblock %}