<div class="background-config-container">
    <div class="bg-config-section">
        <label>{{localize "FANG.UI.Background.Mode"}}</label>
        <select name="bgMode">
            <option value="none" {{#if (eq background.mode "none")}}selected{{/if}}>{{localize "FANG.UI.Background.ModeNone"}}</option>
            <option value="palette" {{#if (eq background.mode "palette")}}selected{{/if}}>{{localize "FANG.UI.Background.ModePalette"}}</option>
            <option value="image" {{#if (eq background.mode "image")}}selected{{/if}}>{{localize "FANG.UI.Background.ModeImage"}}</option>
            <option value="preset" {{#if (eq background.mode "preset")}}selected{{/if}}>{{localize "FANG.UI.Background.ModePreset"}}</option>
        </select>
    </div>

    <hr>

    {{#if (eq background.mode "palette")}}
    <div class="bg-config-section">
        <label>{{localize "FANG.UI.Background.PaletteTitle"}}</label>
        <div class="color-palette-grid">
            {{#each colors}}
            <div class="color-patch {{#if (eq ../background.color this.hex)}}active{{/if}}" 
                 style="background-color: {{this.hex}};" 
                 data-color="{{this.hex}}"
                 title="{{this.name}}">
                {{#if (eq ../background.color this.hex)}}<i class="fas fa-check"></i>{{/if}}
            </div>
            {{/each}}
        </div>
    </div>
    {{/if}}

    {{#if (eq background.mode "image")}}
    <div class="bg-config-section">
        <label>{{localize "FANG.UI.Background.ImageTitle"}}</label>
        <div class="flexrow gap-5">
            <input type="text" name="bgImage" value="{{background.image}}" placeholder="path/to/image.webp">
            <button type="button" class="file-picker small-btn" data-type="image" data-target="bgImage" title="Browse">
                <i class="fas fa-file-import"></i>
            </button>
        </div>

        <div class="slider-group">
            <div class="slider-label">
                <span>{{localize "FANG.UI.Background.Blur"}}</span>
                <span id="bgBlurVal">{{background.blur}}px</span>
            </div>
            <input type="range" name="bgBlur" min="0" max="20" step="1" value="{{background.blur}}">
        </div>

        <div class="slider-group">
            <div class="slider-label">
                <span>{{localize "FANG.UI.Background.Opacity"}}</span>
                <span id="bgOpacityVal">{{background.opacityPercent}}%</span>
            </div>
            <input type="range" name="bgOpacity" min="0" max="1" step="0.05" value="{{background.opacity}}">
        </div>
    </div>
    {{/if}}

    {{#if (eq background.mode "preset")}}
    <div class="bg-config-section">
        <label>{{localize "FANG.UI.Background.PresetTitle"}}</label>
        <div class="preset-grid">
            <button type="button" class="preset-tile preset-parchment {{#if (eq background.preset "parchment")}}active{{/if}}" data-preset="parchment">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Parchment"}}</span>
            </button>
            <button type="button" class="preset-tile preset-dark {{#if (eq background.preset "dark")}}active{{/if}}" data-preset="dark">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Dark"}}</span>
            </button>
            <button type="button" class="preset-tile preset-starfield {{#if (eq background.preset "starfield")}}active{{/if}}" data-preset="starfield">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Starfield"}}</span>
            </button>
            <button type="button" class="preset-tile preset-ethereal {{#if (eq background.preset "ethereal")}}active{{/if}}" data-preset="ethereal">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Ethereal"}}</span>
            </button>
            <button type="button" class="preset-tile preset-stone {{#if (eq background.preset "stone")}}active{{/if}}" data-preset="stone">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Stone"}}</span>
            </button>
            <button type="button" class="preset-tile preset-stars {{#if (eq background.preset "stars")}}active{{/if}}" data-preset="stars">
                <span class="preset-name">{{localize "FANG.UI.Background.Preset.Stars"}}</span>
            </button>
        </div>
    </div>
    {{/if}}

    <div class="premium-notice">
        <div class="premium-badge">Premium Feature</div>
        <p>{{localize "FANG.UI.Background.PremiumHint"}}</p>
    </div>
</div>
