{{ template "header" . }}
<div class="card bg-base-100 shadow max-w-2xl">
    <div class="card-body">
        <h1 class="card-title">Settings</h1>
        <p class="text-sm opacity-70">
            Leave a field empty to remove its override and use the environment or default value.
            PORT, FFMPEG_BIN, FFPROBE_BIN, MUSIC_PATH, and DB_PATH are not editable here.
        </p>

        {{ if .Saved }}
        <div class="alert alert-success">
            <span>Settings saved successfully</span>
        </div>
        {{ end }}

        <form method="POST" action="/settings" class="flex flex-col gap-3">
            {{ range $key, $value := .Editable }}
            <div class="flex flex-col sm:flex-row sm:items-start gap-2">
                <label class="w-48 shrink-0 pt-2">
                    <span class="text-sm font-semibold">{{ $key }}</span>
                </label>
                <div class="flex-1">
                    <input type="text" name="{{ $key }}" value="{{ $value }}" class="input input-bordered input-sm w-full" />
                    {{ if index $.Errors $key }}
                    <span class="text-xs text-error block mt-1">{{ index $.Errors $key }}</span>
                    {{ end }}
                </div>
            </div>
            {{ end }}

            <div class="pt-2">
                <button type="submit" class="btn btn-primary">Save Settings</button>
            </div>
        </form>
    </div>
</div>
{{ template "footer" . }}