<div class="sls-config">

  {{!-- LEFT: players + cut settings --}}
  <div class="sls-left">
    <div class="sls-left-header">
      <h3>{{localize "SLS.Cuts"}}</h3>
      {{#unless isGrid}}
      <button type="button" data-action="addCut" class="sls-add-cut-btn" title="{{localize 'SLS.AddCut'}}">
        <i class="fas fa-plus"></i>
      </button>
      {{/unless}}
    </div>
    <div class="sls-cut-list">
      {{#each layout.cuts as |cut i|}}
      <div class="sls-cut-row" data-index="{{i}}">
        <span class="sls-cut-dot"></span>
        <span class="sls-cut-name">
          {{#if cut.userId}}{{lookup @root.userChoices cut.userId}}{{else}}<em>{{localize "SLS.Unassigned"}}</em>{{/if}}
        </span>
        {{#unless @root.isGrid}}
        <button type="button" data-action="removeCut" data-index="{{i}}" title="{{localize 'SLS.Remove'}}">
          <i class="fas fa-trash"></i>
        </button>
        {{/unless}}
      </div>
      {{/each}}
      {{#unless layout.cuts.length}}
      <p class="sls-empty-msg">{{localize "SLS.NoCuts"}}</p>
      {{/unless}}
    </div>

    <div class="sls-cut-forms">
      {{#each layout.cuts as |cut i|}}
      <fieldset class="sls-cut-fieldset" data-index="{{i}}">
        <legend>{{localize "SLS.CutSettings"}}</legend>

        <div class="form-group">
          <label>{{localize "SLS.User"}}</label>
          <select name="cuts.{{i}}.userId">
            {{selectOptions @root.userChoices selected=cut.userId blank="—"}}
          </select>
        </div>

        <div class="form-group sls-image-row">
          <label>{{localize "SLS.Image"}}</label>
          <input type="text" name="cuts.{{i}}.image" value="{{cut.image}}" placeholder="path/to/image.png" />
          <button type="button" data-action="pickImage" data-index="{{i}}" title="{{localize 'SLS.Browse'}}">
            <i class="fas fa-folder-open"></i>
          </button>
        </div>

        <div class="form-group sls-image-row">
          <label>{{localize "SLS.Sound"}}</label>
          <input type="text" name="cuts.{{i}}.sound" value="{{cut.sound}}" placeholder="path/to/sound.mp3" />
          <button type="button" data-action="pickSound" data-index="{{i}}" title="{{localize 'SLS.Browse'}}">
            <i class="fas fa-folder-open"></i>
          </button>
        </div>

        <div class="form-group sls-range-row">
          <label>{{localize "SLS.SoundVolume"}} <span class="sls-range-val" data-val="soundVolume">{{cut.soundVolume}}%</span></label>
          <input type="range" name="cuts.{{i}}.soundVolume" value="{{cut.soundVolume}}" min="0" max="100" step="1" />
        </div>

        <div class="form-group sls-range-row">
          <label>X <span class="sls-range-val" data-val="x">{{cut.x}}%</span></label>
          <input type="range" name="cuts.{{i}}.x" value="{{cut.x}}" min="0" max="100" step="1" />
        </div>

        <div class="form-group sls-range-row">
          <label>Y <span class="sls-range-val" data-val="y">{{cut.y}}%</span></label>
          <input type="range" name="cuts.{{i}}.y" value="{{cut.y}}" min="0" max="100" step="1" />
        </div>

        <div class="form-group sls-range-row">
          <label>{{localize "SLS.Zoom"}} <span class="sls-range-val" data-val="zoom">{{cut.zoom}}%</span></label>
          <input type="range" name="cuts.{{i}}.zoom" value="{{cut.zoom}}" min="40" max="400" step="5" />
        </div>

        {{#unless @root.isCustom}}
        <div class="form-group sls-range-row">
          <label>{{localize "SLS.CornerRadius"}} <span class="sls-range-val" data-val="cornerRadius">{{#if cut.cornerRadius}}{{cut.cornerRadius}}{{else}}0{{/if}}%</span></label>
          <input type="range" name="cuts.{{i}}.cornerRadius" value="{{#if cut.cornerRadius}}{{cut.cornerRadius}}{{else}}0{{/if}}" min="0" max="50" step="1" />
        </div>
        {{/unless}}

        {{#if @root.isBackground}}
        <div class="form-group sls-label-toggle">
          <label>
            <input type="checkbox" name="cuts.{{i}}.showBorder" {{#if cut.showBorder}}checked{{/if}} />
            {{localize "SLS.ShowBorder"}}
          </label>
        </div>
        {{/if}}

        <div class="form-group sls-label-toggle">
          <label>
            <input type="checkbox" name="cuts.{{i}}.labelShow" {{#if cut.labelShow}}checked{{/if}} />
            {{localize "SLS.ShowLabel"}}
          </label>
        </div>

        <div class="sls-name-style-block">
          <div class="sls-name-style-title">{{localize "SLS.HoverSettings"}}</div>

          <div class="form-group sls-label-toggle">
            <label>
              <input type="checkbox" name="cuts.{{i}}.noHover" {{#if cut.noHover}}checked{{/if}} />
              {{localize "SLS.DisableHover"}}
            </label>
          </div>

          <div class="form-group sls-hover-override">
            <label>
              <input type="checkbox" name="cuts.{{i}}.hoverOverride" {{#if cut.hoverColor}}checked{{/if}} />
              {{localize "SLS.OverrideHover"}}
            </label>
            <input type="color" name="cuts.{{i}}.hoverColor" value="{{#if cut.hoverColor}}{{cut.hoverColor}}{{else}}#f0c040{{/if}}" {{#unless cut.hoverColor}}disabled{{/unless}} />
          </div>

          <div class="form-group sls-label-toggle">
            <label>
              <input type="checkbox" name="cuts.{{i}}.silhouette" {{#if cut.silhouette}}checked{{/if}} />
              {{localize "SLS.Silhouette"}}
              <span class="sls-hint-icon">?<span class="sls-hint-bubble">{{localize "SLS.SilhouetteHint"}}</span></span>
            </label>
          </div>

          <div class="form-group sls-image-row">
            <label>{{localize "SLS.HoverImage"}}</label>
            <input type="text" name="cuts.{{i}}.hoverImage" value="{{cut.hoverImage}}" placeholder="path/to/hover.png" />
            <button type="button" data-action="pickHoverImage" data-index="{{i}}" title="{{localize 'SLS.Browse'}}">
              <i class="fas fa-folder-open"></i>
            </button>
          </div>

          <div class="sls-hoverpos-controls" {{#unless cut.silhouette}}{{#unless cut.hoverImage}}hidden{{/unless}}{{/unless}}>
            <div class="form-group sls-range-row">
              <label>{{localize "SLS.HoverImageX"}} <span class="sls-range-val" data-val="hoverX">{{#if cut.hoverX}}{{cut.hoverX}}{{else}}50{{/if}}%</span></label>
              <input type="range" name="cuts.{{i}}.hoverX" value="{{#if cut.hoverX}}{{cut.hoverX}}{{else}}50{{/if}}" min="0" max="100" step="1" />
            </div>
            <div class="form-group sls-range-row">
              <label>{{localize "SLS.HoverImageY"}} <span class="sls-range-val" data-val="hoverY">{{#if cut.hoverY}}{{cut.hoverY}}{{else}}50{{/if}}%</span></label>
              <input type="range" name="cuts.{{i}}.hoverY" value="{{#if cut.hoverY}}{{cut.hoverY}}{{else}}50{{/if}}" min="0" max="100" step="1" />
            </div>
            <div class="form-group sls-range-row">
              <label>{{localize "SLS.HoverImageZoom"}} <span class="sls-range-val" data-val="hoverZoom">{{#if cut.hoverZoom}}{{cut.hoverZoom}}{{else}}100{{/if}}%</span></label>
              <input type="range" name="cuts.{{i}}.hoverZoom" value="{{#if cut.hoverZoom}}{{cut.hoverZoom}}{{else}}100{{/if}}" min="40" max="400" step="5" />
            </div>
          </div>

          <div class="form-group sls-hover-transition-row">
            <label>{{localize "SLS.HoverTransition"}}</label>
            <select name="cuts.{{i}}.hoverTransition">
              {{selectOptions @root.hoverTransitionChoices selected=cut.hoverTransition}}
            </select>
          </div>

          <div class="form-group sls-image-row">
            <label>{{localize "SLS.HoverSound"}}</label>
            <input type="text" name="cuts.{{i}}.hoverSound" value="{{cut.hoverSound}}" placeholder="path/to/hover.mp3" />
            <button type="button" data-action="pickHoverSound" data-index="{{i}}" title="{{localize 'SLS.Browse'}}">
              <i class="fas fa-folder-open"></i>
            </button>
          </div>
          <p class="sls-entry-hint">{{localize "SLS.HoverSoundHint"}}</p>

          <div class="form-group sls-range-row">
            <label>{{localize "SLS.HoverSoundVolume"}} <span class="sls-range-val" data-val="hoverSoundVolume">{{#if cut.hoverSoundVolume}}{{cut.hoverSoundVolume}}{{else}}50{{/if}}%</span></label>
            <input type="range" name="cuts.{{i}}.hoverSoundVolume" value="{{#if cut.hoverSoundVolume}}{{cut.hoverSoundVolume}}{{else}}50{{/if}}" min="0" max="100" step="1" />
          </div>
        </div>

        <div class="sls-name-style-block">
          <div class="sls-name-style-title">{{localize "SLS.NameStyle"}}</div>

          <div class="form-group">
            <label>{{localize "SLS.NameFont"}}</label>
            <select class="sls-font-select" name="cuts.{{i}}.nameStyle.font">
              <option value="">{{localize "SLS.NameFontDefault"}}</option>
              {{#each @root.fontChoices}}
              <option value="{{this}}" style="font-family: '{{this}}', sans-serif;">{{this}}</option>
              {{/each}}
            </select>
          </div>

          <div class="form-group">
            <label>{{localize "SLS.NameColor"}}</label>
            <input type="color" name="cuts.{{i}}.nameStyle.color" value="{{cut.nameStyle.color}}" />
          </div>

          <div class="form-group">
            <label>{{localize "SLS.NameBackground"}}</label>
            <select name="cuts.{{i}}.nameStyle.bg">
              {{selectOptions @root.nameBgChoices selected=cut.nameStyle.bg}}
            </select>
          </div>

          <div class="form-group sls-image-row">
            <label>{{localize "SLS.NameBgImageField"}}</label>
            <input type="text" name="cuts.{{i}}.nameStyle.bgImage" value="{{cut.nameStyle.bgImage}}" placeholder="path/to/background.png" />
            <button type="button" data-action="pickNameBgImage" data-index="{{i}}" title="{{localize 'SLS.Browse'}}">
              <i class="fas fa-folder-open"></i>
            </button>
          </div>

          <div class="form-group sls-name-bg-image-only">
            <label>
              <input type="checkbox" name="cuts.{{i}}.nameStyle.useImage" {{#if cut.nameStyle.useImage}}checked{{/if}} />
              {{localize "SLS.UseOnlyBgImage"}}
            </label>
          </div>

          <div class="form-group">
            <label>
              <input type="checkbox" name="cuts.{{i}}.nameStyle.glow" {{#if cut.nameStyle.glow}}checked{{/if}} />
              {{localize "SLS.NameGlow"}}
            </label>
          </div>

          <div class="form-group sls-range-row">
            <label>{{localize "SLS.NameSize"}} <span class="sls-range-val" data-val="nameSize">{{cut.nameStyle.size}}%</span></label>
            <input type="range" name="cuts.{{i}}.nameStyle.size" value="{{cut.nameStyle.size}}" min="25" max="400" step="5" />
          </div>

          <div class="form-group sls-range-row sls-name-bg-image-only">
            <label>{{localize "SLS.NameBgImageSize"}} <span class="sls-range-val" data-val="nameBgSize">{{cut.nameStyle.bgImageSize}}%</span></label>
            <input type="range" name="cuts.{{i}}.nameStyle.bgImageSize" value="{{cut.nameStyle.bgImageSize}}" min="25" max="400" step="5" />
          </div>

          <div class="form-group sls-range-row">
            <label>{{localize "SLS.LabelX"}} <span class="sls-range-val" data-val="labelX">{{cut.labelX}}%</span></label>
            <input type="range" name="cuts.{{i}}.labelX" value="{{cut.labelX}}" min="0" max="100" step="1" />
          </div>

          <div class="form-group sls-range-row">
            <label>{{localize "SLS.LabelY"}} <span class="sls-range-val" data-val="labelY">{{cut.labelY}}%</span></label>
            <input type="range" name="cuts.{{i}}.labelY" value="{{cut.labelY}}" min="0" max="100" step="1" />
          </div>
        </div>
      </fieldset>
      {{/each}}
    </div>
  </div>

  {{!-- CENTER: preview only --}}
  <div class="sls-center">
    {{#if isEditing}}
    <div class="sls-edit-bar">
      <span>{{localize "SLS.EditLayout"}}</span>
      <span class="sls-edit-spacer"></span>
      <button type="button" data-action="resetLayout"><i class="fas fa-trash"></i> {{localize "SLS.ResetLayout"}}</button>
      <button type="button" data-action="exitEdit" class="primary"><i class="fas fa-check"></i> {{localize "SLS.ExitEdit"}}</button>
    </div>
    <p class="sls-edit-hint">{{localize "SLS.EditHint"}}</p>
    {{/if}}
    <div class="sls-live-preview-wrap">
      <div class="sls-entry-preview" hidden></div>
      <div class="sls-live-preview {{#if isCustom}}sls-custom{{/if}} {{#if isBackground}}sls-background{{/if}} {{#if isEditing}}sls-editing{{/if}}"
           {{#unless isCustom}}{{#unless isBackground}}style="grid-template-columns: repeat({{layout.cols}}, 1fr); grid-template-rows: repeat({{layout.rows}}, 1fr);"{{/unless}}{{/unless}}>
        {{#each layout.cuts as |cut i|}}
        <div class="sls-live-cell" data-index="{{i}}">
          <div class="sls-live-img-wrap">
            <img class="sls-live-img" alt="" />
          </div>
          <div class="sls-live-label">
            {{#if cut.userId}}{{lookup @root.userChoices cut.userId}}{{/if}}
          </div>
        </div>
        {{/each}}
        {{#if isCustom}}
        <svg class="sls-edit-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
          {{#each layout.lines as |line|}}
          <line class="sls-committed-line sls-line-main" x1="{{line.x1}}" y1="{{line.y1}}" x2="{{line.x2}}" y2="{{line.y2}}" />
          <line class="sls-committed-line sls-line-inner" x1="{{line.x1}}" y1="{{line.y1}}" x2="{{line.x2}}" y2="{{line.y2}}" />
          {{/each}}
          {{#if isEditing}}
          <line class="sls-ghost-line" x1="0" y1="0" x2="0" y2="0" />
          {{/if}}
        </svg>
        {{/if}}
      </div>
    </div>
    {{#if isEditing}}
    <p class="sls-edge-hint">{{localize "SLS.EdgeStartHint"}}</p>
    {{else}}
    <p class="sls-live-hint">{{localize "SLS.LiveHint"}}</p>
    {{/if}}
    <div class="sls-footer">
      <button type="button" data-action="preview">
        <i class="fas fa-eye"></i> {{localize "SLS.SaveAsPreview"}}
      </button>
      <button type="submit">
        <i class="fas fa-save"></i> {{localize "SLS.Save"}}
      </button>
      <p class="sls-footer-hint">{{localize "SLS.SavePresetHint"}}</p>
    </div>
  </div>

  {{!-- RIGHT: all layout/style options --}}
  <div class="sls-right">

    <div class="sls-community-panel" {{#unless showCommunityView}}hidden{{/unless}}>
      <div class="sls-community-top-row">
        <button type="button" data-action="communityBack" class="sls-back-btn">
          <i class="fas fa-arrow-left"></i> {{localize "SLS.Back"}}
        </button>
        <button type="button" data-action="communityRefresh" class="sls-refresh-btn" title="Refresh">
          <i class="fas fa-sync-alt"></i>
        </button>
      </div>
      <div class="sls-section-header">{{localize "SLS.CommunityTitle"}}</div>
      <div class="sls-community-filters">
        <select class="sls-filter-mode">
          <option value="">{{localize "SLS.FilterModeAll"}}</option>
          <option value="grid">{{localize "SLS.FilterModeGrid"}}</option>
          <option value="custom">{{localize "SLS.FilterModeCustom"}}</option>
          <option value="background">{{localize "SLS.FilterModeBg"}}</option>
        </select>
        <select class="sls-filter-players">
          <option value="">{{localize "SLS.FilterPlayersAll"}}</option>
        </select>
      </div>
      <div class="sls-community-list"></div>
      <button type="button" data-action="communityImport" class="sls-community-import-btn" disabled>
        <i class="fas fa-download"></i> {{localize "SLS.CommunityImport"}}
      </button>
      <hr class="sls-community-divider" />
      <div class="sls-section-header">{{localize "SLS.SharePresetTitle"}}</div>
      <div class="sls-submit-fields">
        <label>{{localize "SLS.SubmitName"}}</label>
        <input type="text" class="sls-submit-name" placeholder="My cool layout" />
        <label>{{localize "SLS.SubmitAuthor"}}</label>
        <input type="text" class="sls-submit-author" placeholder="Your name" />
        <label>{{localize "SLS.SubmitDesc"}}</label>
        <input type="text" class="sls-submit-desc" placeholder="Short description..." />
      </div>
      <button type="button" data-action="communitySubmit" class="sls-submit-btn">
        <i class="fas fa-upload"></i> {{localize "SLS.SubmitBtn"}}
      </button>
    </div>

    <div class="sls-entry-text-panel" {{#unless showEntryTextView}}hidden{{/unless}}>
      <button type="button" data-action="backToMain" class="sls-back-btn">
        <i class="fas fa-arrow-left"></i> {{localize "SLS.Back"}}
      </button>
      <div class="sls-section-header">{{localize "SLS.EditEntryBg"}}</div>

      {{!-- background controls --}}
      <div class="sls-entry-bg-controls">
        <label>{{localize "SLS.EntryImage"}}</label>
        <div class="sls-image-row">
          <input type="text" name="entryImage" value="{{layout.entryImage}}" placeholder="path/to/image.png" />
          <button type="button" data-action="pickEntryImage" title="{{localize 'SLS.Browse'}}">
            <i class="fas fa-folder-open"></i>
          </button>
        </div>
        <label>{{localize "SLS.EntryImageFit"}}</label>
        <select name="entryImageFit">
          {{selectOptions entryFitChoices selected=layout.entryImageFit}}
        </select>
        <label>X <span class="sls-range-val" data-val="entryImageX">{{layout.entryImageX}}%</span></label>
        <input type="range" name="entryImageX" min="0" max="100" step="1" value="{{layout.entryImageX}}" />
        <label>Y <span class="sls-range-val" data-val="entryImageY">{{layout.entryImageY}}%</span></label>
        <input type="range" name="entryImageY" min="0" max="100" step="1" value="{{layout.entryImageY}}" />
        <label>{{localize "SLS.Zoom"}} <span class="sls-range-val" data-val="entryImageZoom">{{layout.entryImageZoom}}%</span></label>
        <input type="range" name="entryImageZoom" min="100" max="300" step="1" value="{{layout.entryImageZoom}}" />
      </div>

      <hr class="sls-entry-editor-divider" />

      {{!-- text controls --}}
      <div class="sls-section-header">{{localize "SLS.CustomizeEntryTextHeader"}}</div>

      <div class="form-group">
        <label>{{localize "SLS.EntryText"}}</label>
        <input type="text" name="entryText" value="{{layout.entryText}}" placeholder="{{localize 'SLS.EntryTextPlaceholder'}}" />
      </div>

      <div class="form-group">
        <label>{{localize "SLS.EntryFont"}}</label>
        <select name="entryFont" class="sls-font-select sls-entry-font-select">
          <option value="">(default)</option>
          {{#each fontChoices}}
          <option value="{{this}}" style="font-family: '{{this}}', sans-serif;">{{this}}</option>
          {{/each}}
        </select>
      </div>

      <div class="form-group">
        <label>{{localize "SLS.EntryTextColor"}}</label>
        <input type="color" name="entryTextStyle.color" value="{{layout.entryTextStyle.color}}" />
      </div>

      <div class="form-group">
        <label>{{localize "SLS.EntryTextBackground"}}</label>
        <select name="entryTextStyle.bg" class="sls-entry-text-bg-select">
          {{selectOptions nameBgChoices selected=layout.entryTextStyle.bg}}
        </select>
      </div>

      <div class="form-group sls-image-row sls-entry-text-image-only">
        <label>{{localize "SLS.EntryTextBgImage"}}</label>
        <input type="text" name="entryTextStyle.bgImage" value="{{layout.entryTextStyle.bgImage}}" placeholder="path/to/background.png" />
        <button type="button" data-action="pickEntryTextBgImage" title="{{localize 'SLS.Browse'}}">
          <i class="fas fa-folder-open"></i>
        </button>
      </div>

      <div class="form-group sls-entry-text-image-only">
        <label>
          <input type="checkbox" name="entryTextStyle.useImage" {{#if layout.entryTextStyle.useImage}}checked{{/if}} />
          {{localize "SLS.EntryTextUseImage"}}
        </label>
      </div>

      <div class="form-group">
        <label>
          <input type="checkbox" name="entryTextStyle.glow" {{#if layout.entryTextStyle.glow}}checked{{/if}} />
          {{localize "SLS.EntryTextGlow"}}
        </label>
      </div>

      <div class="form-group sls-range-row">
        <label>{{localize "SLS.EntryTextSize"}} <span class="sls-range-val" data-val="entrySize">{{layout.entryTextStyle.size}}%</span></label>
        <input type="range" name="entryTextStyle.size" value="{{layout.entryTextStyle.size}}" min="25" max="400" step="5" />
      </div>

      <div class="form-group sls-range-row sls-entry-text-image-only">
        <label>{{localize "SLS.EntryTextBgImageSize"}} <span class="sls-range-val" data-val="entryBgImageSize">{{layout.entryTextStyle.bgImageSize}}%</span></label>
        <input type="range" name="entryTextStyle.bgImageSize" value="{{layout.entryTextStyle.bgImageSize}}" min="25" max="400" step="5" />
      </div>

      <div class="form-group sls-range-row">
        <label>{{localize "SLS.EntryTextX"}} <span class="sls-range-val" data-val="entryX">{{layout.entryTextStyle.x}}%</span></label>
        <input type="range" name="entryTextStyle.x" value="{{layout.entryTextStyle.x}}" min="0" max="100" step="1" />
      </div>

      <div class="form-group sls-range-row">
        <label>{{localize "SLS.EntryTextY"}} <span class="sls-range-val" data-val="entryY">{{layout.entryTextStyle.y}}%</span></label>
        <input type="range" name="entryTextStyle.y" value="{{layout.entryTextStyle.y}}" min="0" max="100" step="1" />
      </div>
    </div>

    <div class="sls-main-panel" {{#unless showMainView}}hidden{{/unless}}>

    <div class="sls-preset-bar">
      <div class="sls-preset-row">
        <label>{{localize "SLS.Presets"}}</label>
        <select class="sls-preset-select">
          {{selectOptions presetChoices selected=presetSlot}}
        </select>
      </div>
      <div class="sls-preset-row">
        <input type="text" class="sls-preset-name" placeholder="{{localize 'SLS.PresetName'}}" value="{{currentPresetName}}" />
        <button type="button" data-action="savePreset" title="{{localize 'SLS.SavePreset'}}"><i class="fas fa-floppy-disk"></i></button>
        <button type="button" data-action="loadPreset" title="{{localize 'SLS.LoadPreset'}}"><i class="fas fa-rotate-left"></i></button>
        <button type="button" data-action="clearPreset" title="{{localize 'SLS.ClearPreset'}}"><i class="fas fa-trash"></i></button>
      </div>
      <div class="sls-preset-community-row">
        <button type="button" data-action="browseCommunity" title="{{localize 'SLS.BrowseCommunity'}}"><i class="fas fa-globe"></i> {{localize "SLS.BrowseCommunity"}}</button>
      </div>
    </div>

    <fieldset class="sls-right-group">
      <legend>{{localize "SLS.LayoutMode"}}</legend>
      {{#unless isBackground}}
      <div class="sls-fit-row">
        <label>
          {{localize "SLS.Fit"}}
          <span class="sls-hint-icon">?<span class="sls-hint-bubble">{{localize "SLS.FitHint"}}</span></span>
        </label>
        <select name="fit">
          {{selectOptions fitChoices selected=layout.fit}}
        </select>
      </div>
      {{/unless}}

      <div class="sls-grid-size">
        <select class="sls-mode-select">
          <option value="grid" {{#if isGrid}}selected{{/if}}>{{localize "SLS.FilterModeGrid"}}</option>
          <option value="custom" {{#if isCustom}}selected{{/if}}>{{localize "SLS.FilterModeCustom"}}</option>
          <option value="background" {{#if isBackground}}selected{{/if}}>{{localize "SLS.FilterModeBg"}}</option>
        </select>
        {{#if isGrid}}
        <label>{{localize "SLS.Columns"}}</label>
        <input type="number" name="cols" value="{{layout.cols}}" min="1" max="8" />
        <label>{{localize "SLS.Rows"}}</label>
        <input type="number" name="rows" value="{{layout.rows}}" min="1" max="8" />
        {{/if}}
        <label class="sls-logo-toggle">
          <input type="checkbox" name="showLogo" {{#if layout.showLogo}}checked{{/if}} />
          {{localize "SLS.ShowLogo"}}
        </label>
      </div>

      {{#if isBackground}}
      <div class="sls-bg-picker">
        <label>{{localize "SLS.BackgroundImage"}}</label>
        <input type="text" name="bgImage" value="{{layout.bgImage}}" placeholder="path/to/background.png" />
        <div class="sls-bg-picker-btns">
          <button type="button" data-action="pickBgImage" title="{{localize 'SLS.Browse'}}">
            <i class="fas fa-folder-open"></i> {{localize "SLS.Browse"}}
          </button>
        </div>
        <div class="form-group sls-label-toggle">
          <label>
            <input type="checkbox" name="muteBackground" {{#if layout.muteBackground}}checked{{/if}} />
            {{localize "SLS.MuteBackground"}}
          </label>
        </div>
      </div>
      <p class="sls-fit-hint">{{localize "SLS.BackgroundHint"}}</p>
      {{/if}}
    </fieldset>

    <fieldset class="sls-right-group">
      <legend>{{localize "SLS.Music"}}</legend>
      <div class="sls-music-row">
        <div class="sls-image-row">
          <input type="text" name="music" value="{{layout.music}}" placeholder="path/to/music.mp3" />
          <button type="button" data-action="pickMusic" title="{{localize 'SLS.Browse'}}">
            <i class="fas fa-folder-open"></i>
          </button>
        </div>
        <div class="sls-volume-row">
          <label>{{localize "SLS.MusicVolume"}} <span class="sls-range-val" data-val="musicVolume">{{layout.musicVolume}}%</span></label>
          <input type="range" name="musicVolume" min="0" max="100" step="1" value="{{layout.musicVolume}}" />
        </div>
      </div>
    </fieldset>

    <fieldset class="sls-right-group">
      <legend>{{localize "SLS.EntryScreen"}}</legend>
      <div class="sls-entry-row">
        <label>
          <input type="checkbox" name="entryScreen" {{#if layout.entryScreen}}checked{{/if}} />
          {{localize "SLS.EntryScreen"}}
        </label>
        <p class="sls-entry-hint">{{localize "SLS.EntryScreenHint"}}</p>

        <div class="sls-entry-sub" {{#unless layout.entryScreen}}hidden{{/unless}}>
          <label>{{localize "SLS.EntrySound"}}</label>
          <div class="sls-image-row">
            <input type="text" name="entrySound" value="{{layout.entrySound}}" placeholder="path/to/click.mp3" />
            <button type="button" data-action="pickEntrySound" title="{{localize 'SLS.Browse'}}">
              <i class="fas fa-folder-open"></i>
            </button>
          </div>

          <div class="sls-volume-row">
            <label>{{localize "SLS.SoundVolume"}} <span class="sls-range-val" data-val="entrySoundVolume">{{layout.entrySoundVolume}}%</span></label>
            <input type="range" name="entrySoundVolume" value="{{layout.entrySoundVolume}}" min="0" max="100" step="1" />
          </div>

          <label>{{localize "SLS.EntryAnimation"}}</label>
          <select name="entryAnimation">
            {{selectOptions entryAnimChoices selected=layout.entryAnimation}}
          </select>

          <button type="button" data-action="editEntryBg" class="sls-edit-entry-bg-btn">
            <i class="fas fa-paint-brush"></i> {{localize "SLS.EditEntryBg"}}
          </button>
        </div>
      </div>
    </fieldset>

    <fieldset class="sls-right-group">
      <legend>{{localize "SLS.StyleHeader"}}</legend>
      <div class="sls-style-bar">
        <label>{{localize "SLS.LoginAnimation"}}</label>
        <select name="loginAnimation">
          {{selectOptions loginAnimChoices selected=layout.loginAnimation}}
        </select>
        {{#if isCustom}}
        <label>{{localize "SLS.LineStyle"}}</label>
        <select name="lineStyle">
          {{selectOptions lineStyleChoices selected=layout.lineStyle}}
        </select>
        {{/if}}
        <label>{{localize "SLS.LineColor"}}</label>
        <input type="color" name="lineColor" value="{{layout.lineColor}}" />
        <label>{{localize "SLS.LineThick"}}</label>
        <input type="number" name="lineThick" value="{{layout.lineThick}}" min="0" max="30" step="1" />
        <label>{{localize "SLS.HoverColor"}}</label>
        <input type="color" name="hoverColor" value="{{layout.hoverColor}}" />
        <label>{{localize "SLS.GlowStrength"}}</label>
        <input type="number" name="glowStrength" value="{{layout.glowStrength}}" min="0" max="200" step="5" />
        <label>{{localize "SLS.HoverZoom"}}</label>
        <input type="number" name="hoverZoom" value="{{layout.hoverZoom}}" min="0" max="50" step="1" />
        <button type="button" data-action="resetStyle" title="{{localize 'SLS.ResetStyle'}}">
          <i class="fas fa-rotate-left"></i> {{localize "SLS.ResetStyle"}}
        </button>
      </div>
    </fieldset>
    </div>

  </div>

</div>
