{{- template "document.html" . }}

{{- define "document-title" }}{{ if .PresetForm.IsNew }}Add preset{{ else }}Edit preset — {{ .PresetForm.Key }}{{ end }} - {{ .App.Config.Branding.AppName }}{{ end }}

{{- define "document-body" }}
<div class="flex flex-column body-content">
    <main class="content-bounds" style="padding-block: 2rem;">
        <div class="margin-bottom-15">
            <a class="color-subdue" href="{{ .App.Config.Server.BaseURL }}/edit/theme-settings">← Theme settings</a>
        </div>
        <h1 class="size-h1 margin-bottom-15">{{ if .PresetForm.IsNew }}Add preset{{ else }}Edit preset <code>{{ .PresetForm.Key }}</code>{{ end }}</h1>

        {{ if .PresetForm.ErrorMessage }}
        <p class="color-negative margin-bottom-15">{{ .PresetForm.ErrorMessage }}</p>
        {{ end }}

        {{ if .PresetForm.IsNew }}
        <form method="post" action="{{ .App.Config.Server.BaseURL }}/edit/api/theme-presets"
              style="display:flex;flex-direction:column;gap:1rem;max-width:36rem;">
        {{ else }}
        <form method="post" action="{{ .App.Config.Server.BaseURL }}/edit/api/theme-presets/{{ .PresetForm.Key }}"
              style="display:flex;flex-direction:column;gap:1rem;max-width:36rem;">
        {{ end }}

            {{ if .PresetForm.IsNew }}
            <label class="form-label widget-header">
                Preset name (key)
                <input type="text" name="name" class="input" value="{{ .PresetForm.Key }}" placeholder="my-dark-theme" required
                       pattern="[^\s:{}&#91;&#93;|>&amp;*]+" title="No spaces or special characters">
                <small class="color-subdue size-h5">Used as the key in YAML and in the theme picker. Lowercase kebab-case recommended.</small>
            </label>
            {{ end }}

            <fieldset style="border:1px solid var(--color-widget-content-border);border-radius:4px;padding:1rem;">
                <legend class="color-subdue size-h5">Colors</legend>
                <div style="display:grid;grid-template-columns:1fr auto;gap:0.75rem;align-items:center;">
                    <label for="bg">Background</label>
                    <input id="bg" type="color" name="background-color"
                           value="{{ if .PresetForm.BackgroundColorHex }}{{ .PresetForm.BackgroundColorHex }}{{ else }}#151823{{ end }}">

                    <label for="pc">Primary (accent)</label>
                    <input id="pc" type="color" name="primary-color"
                           value="{{ if .PresetForm.PrimaryColorHex }}{{ .PresetForm.PrimaryColorHex }}{{ else }}#e4cf8d{{ end }}">

                    <label for="ps">Positive</label>
                    <input id="ps" type="color" name="positive-color"
                           value="{{ if .PresetForm.PositiveColorHex }}{{ .PresetForm.PositiveColorHex }}{{ else }}#7fbf7f{{ end }}">

                    <label for="ng">Negative</label>
                    <input id="ng" type="color" name="negative-color"
                           value="{{ if .PresetForm.NegativeColorHex }}{{ .PresetForm.NegativeColorHex }}{{ else }}#e07f7f{{ end }}">
                </div>
            </fieldset>

            <fieldset style="border:1px solid var(--color-widget-content-border);border-radius:4px;padding:1rem;">
                <legend class="color-subdue size-h5">Tweaks</legend>

                <label class="form-label widget-header" style="display:flex;flex-direction:row;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
                    <input type="checkbox" name="light" {{ if .PresetForm.Light }}checked{{ end }}>
                    <span>Light mode</span>
                </label>

                <label class="form-label widget-header">
                    Contrast multiplier
                    <input type="number" step="0.05" min="0.5" max="2.0" name="contrast-multiplier" class="input"
                           value="{{ if .PresetForm.ContrastMultiplier }}{{ .PresetForm.ContrastMultiplier }}{{ end }}" placeholder="1.0">
                </label>

                <label class="form-label widget-header" style="margin-top:0.75rem;">
                    Text saturation multiplier
                    <input type="number" step="0.05" min="0" max="2.0" name="text-saturation-multiplier" class="input"
                           value="{{ if .PresetForm.TextSaturationMultiplier }}{{ .PresetForm.TextSaturationMultiplier }}{{ end }}" placeholder="1.0">
                </label>
            </fieldset>

            <div class="flex gap-10 margin-top-10">
                <button type="submit">{{ if .PresetForm.IsNew }}Add preset{{ else }}Save{{ end }}</button>
                <a class="color-subdue" style="align-self:center;" href="{{ .App.Config.Server.BaseURL }}/edit/theme-settings">Cancel</a>
            </div>
        </form>
    </main>
    {{ template "footer.html" . }}
</div>
{{- end }}