{% extends "base.html" %}

{% block title %}Settings — Courant{% endblock %}

{% block content %}
<div class="flex justify-center pt-12">
  <div class="panel panel-narrow w-full">
    <h1 class="display-1 mb-6">Settings</h1>

    <form method="post" action="/settings" class="space-y-4">
      <div>
        <label class="block mb-1">Snooze duration (minutes)</label>
        <input name="snooze_minutes" type="number" min="1" required value="{{ snooze_minutes }}">
        <p class="text-xs mt-1" style="color: var(--text-muted)">
          How long to delay a reminder when you click "Snooze" on a notification.
        </p>
      </div>

      <div>
        <label class="block mb-1">Ambient scene</label>
        <select name="current_scene"
                class="cozy-select w-full px-3 py-2 rounded-lg">
          {% for slug in available_scenes %}
            <option value="{{ slug }}" {% if slug == current_scene %}selected{% endif %}>
              {{ scenes_meta[slug].name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="pt-4 border-t border-white/10">
        <button type="submit" class="btn-cozy btn-cozy-primary">Save</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}