<div class="standard-form bwlp-form bwlp-builder bwlp-designer">
  <p class="notes bwlp-pa-hint">{{localize "BWLP.DesignerApplyHint"}}</p>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SceneBaseTitle"}}</summary>
    <p class="notes">{{localize "BWLP.SceneBaseHint"}}</p>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.SceneImage"}}</label>
      <div class="bwlp-file-row"><input type="text" name="sbImage" value="{{sbImage}}" placeholder="path/to/image.webp"/><button type="button" data-action="browseSceneImage"><i class="fas fa-folder-open"></i> {{localize "BWLP.Browse"}}</button></div>
      <label>{{localize "BWLP.SceneBgColor"}}</label>
      <input type="color" name="sbColor" value="{{sbColor}}"/>
      <label>{{localize "BWLP.SceneMode"}}</label>
      <div class="bwlp-radio-row">
        <label class="bwlp-check"><input type="radio" name="sbMode" value="background" {{#if modeBackground}}checked{{/if}}/> {{localize "BWLP.SceneModeBackground"}}</label>
        <label class="bwlp-check"><input type="radio" name="sbMode" value="backdrop" {{#unless modeBackground}}checked{{/unless}}/> {{localize "BWLP.SceneModeBackdrop"}} <i class="fas fa-circle-info bwlp-info" data-tooltip="{{localize 'BWLP.SceneBackdropTip'}}"></i></label>
      </div>
    </div>
    <div class="bwlp-backdrop-only" {{#if modeBackground}}style="display:none"{{/if}}>
      <div class="bwlp-grid">
        <label>{{localize "BWLP.BackdropShape"}}</label>
        <select name="bdShape">{{#each backdropShapes}}<option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}</select>
        <label>{{localize "BWLP.BackdropScaleX"}}</label><input type="number" name="bdScaleX" value="{{bdScaleX}}" step="0.05"/>
        <label>{{localize "BWLP.BackdropScaleY"}}</label><input type="number" name="bdScaleY" value="{{bdScaleY}}" step="0.05"/>
        <label>{{localize "BWLP.BackdropTransX"}}</label><input type="number" name="bdTransX" value="{{bdTransX}}" step="0.01"/>
        <label>{{localize "BWLP.BackdropTransY"}}</label><input type="number" name="bdTransY" value="{{bdTransY}}" step="0.01"/>
        <label>{{localize "BWLP.BackdropAlpha"}}</label><input type="number" name="bdAlpha" value="{{bdAlpha}}" min="0" max="1" step="0.05"/>
        <label>{{localize "BWLP.BackdropRotation"}}</label><input type="number" name="bdRotation" value="{{bdRotation}}" step="1"/>
      </div>
      <label class="bwlp-check"><input type="checkbox" name="bdAspect" {{#if bdAspect}}checked{{/if}}/> {{localize "BWLP.BackdropAspect"}}</label>
      <label class="bwlp-check"><input type="checkbox" name="bdRepeat" {{#if bdRepeat}}checked{{/if}}/> {{localize "BWLP.BackdropRepeat"}}</label>
      <label class="bwlp-check"><input type="checkbox" name="bdThumb" {{#if bdThumb}}checked{{/if}}/> {{localize "BWLP.BackdropThumb"}}</label>
    </div>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="applySceneBase"><i class="fas fa-check"></i> {{localize "BWLP.SceneApply"}}</button>
      {{#if backdropExists}}<button type="button" data-action="removeBackdrop"><i class="fas fa-trash"></i> {{localize "BWLP.BackdropRemove"}}</button>{{/if}}
    </div>
  </details>
  <details class="bwlp-sec">
    <summary>{{localize "BWLP.LockTitle"}}</summary>
    <p class="notes">{{localize "BWLP.LockHint"}}</p>
    <label class="bwlp-check"><input type="checkbox" name="lockAdaptive" {{#if lockAdaptive}}checked{{/if}}/> {{localize "BWLP.LockAdaptive"}}</label>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="setInitialView"><i class="fas fa-crop-simple"></i> {{localize "BWLP.LockSetInitial"}}</button>
    </div>
    <p class="notes bwlp-initial-hint">{{#if lockHasInitial}}{{localize "BWLP.LockInitialSet"}}{{else}}{{localize "BWLP.LockNoInitial"}}{{/if}}</p>
    <label class="bwlp-check"><input type="checkbox" name="lockPan" {{#if lockPan}}checked{{/if}}/> {{localize "BWLP.LockPan"}}</label>
    <label class="bwlp-check"><input type="checkbox" name="lockZoom" {{#if lockZoom}}checked{{/if}}/> {{localize "BWLP.LockZoom"}}</label>
    <hr class="bwlp-subsep"/>
    <label class="bwlp-check"><input type="checkbox" name="unpause" {{#if unpause}}checked{{/if}}/> {{localize "BWLP.Unpause"}}</label>
    <p class="notes">{{localize "BWLP.UnpauseHint"}}</p>
    <label class="bwlp-check"><input type="checkbox" name="immersive" {{#if immersive}}checked{{/if}}/> {{localize "BWLP.Immersive"}}</label>
    <p class="notes">{{localize "BWLP.ImmersiveHint"}}</p>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="applyLockScreen"><i class="fas fa-check"></i> {{localize "BWLP.LockApply"}}</button>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SecButtons"}}</summary>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.BuilderLayout"}}</label>
      <select name="layout">{{#each layouts}}<option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}</select>
      <label>{{localize "BWLP.MenuOffset"}}</label>
      <div class="bwlp-offset"><input type="number" name="menuX" value="{{menuX}}" step="1" placeholder="X"/><input type="number" name="menuY" value="{{menuY}}" step="1" placeholder="Y"/></div>
    </div>
    <p class="notes">{{localize "BWLP.MenuOffsetHint"}}</p>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="applyMenuOffset"><i class="fas fa-up-down-left-right"></i> {{localize "BWLP.MenuOffsetApplyBtn"}}</button>
    </div>
    <fieldset class="bwlp-cats">
      <legend>{{localize "BWLP.BuilderCategories"}}</legend>
      {{#each categories}}<div class="bwlp-cat-row"><label class="bwlp-check"><input type="checkbox" name="cats.{{key}}" {{#if checked}}checked{{/if}}/> {{label}} <span class="notes">({{actionLabel}})</span></label><button type="button" class="bwlp-catlock{{#if locked}} locked{{/if}}" data-action="toggleCatLock" data-cat="{{key}}" data-tooltip="{{localize 'BWLP.CatLockTip'}}"><i class="fas {{#if locked}}fa-lock{{else}}fa-lock-open{{/if}}"></i></button></div>{{/each}}
      <p class="notes">{{localize "BWLP.CatLockHint"}}</p>
    </fieldset>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.BuilderCustom"}}</label>
      <input type="text" name="custom" value="{{custom}}" placeholder="{{localize 'BWLP.BuilderCustomPlaceholder'}}"/>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SecAppearance"}}</summary>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.BuilderStyle"}}</label>
      <div class="bwlp-style-pick">
        <input type="hidden" name="style" value="{{styleKey}}"/>
        <button type="button" class="bwlp-style-choose" data-action="chooseStyle"><img data-style-thumb src="{{styleArt}}" alt=""/><span data-style-label>{{styleLabel}}</span><i class="fas fa-chevron-down"></i></button>
      </div>
      <label>{{localize "BWLP.BuilderScheme"}}</label>
      <div>
        <select name="scheme">{{#each schemes}}<option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}<option value="custom" {{#if customSelected}}selected{{/if}}>{{localize "BWLP.SchemeCustom"}}</option></select>
        <div class="bwlp-custom-color" data-custom-row {{#unless customSelected}}style="display:none"{{/unless}}>
          <input type="color" name="customColor" value="{{customColor}}"/>
          <button type="button" class="bwlp-eyedropper" data-eyedropper title="{{localize 'BWLP.SchemeDropper'}}"><i class="fas fa-eye-dropper"></i></button>
        </div>
      </div>
    </div>
    <div class="bwlp-applyrow">
      <button type="button" data-action="previewAppearance"><i class="fas fa-eye"></i> {{localize "BWLP.Preview"}}</button>
      <button type="button" class="bwlp-apply" data-action="applyAppearance"><i class="fas fa-check"></i> {{localize "BWLP.SDApplyStyleBtn"}}</button>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SecLabels"}}</summary>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.BuilderFont"}}</label>
      <select name="font">{{#each fonts}}<option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}</select>
      <label>{{localize "BWLP.LabelColor"}}</label>
      <input type="color" name="labelColor" value="{{labelColor}}"/>
      <label>{{localize "BWLP.LabelSize"}}</label>
      <input type="number" name="labelSize" value="{{labelSize}}" min="6" step="1" placeholder="{{localize 'BWLP.FontAuto'}}"/>
      <label>{{localize "BWLP.LabelOpacity"}}</label>
      <div class="bwlp-range-row"><input type="range" name="labelAlpha" min="0" max="100" value="{{labelAlpha}}"/><span class="bwlp-range-val">{{labelAlpha}}%</span></div>
      <label>{{localize "BWLP.LabelOutline"}} <i class="fas fa-circle-info bwlp-info" data-tooltip="{{localize 'BWLP.LabelOutlineTip'}}"></i></label>
      <div class="bwlp-offset"><input type="number" name="labelOutlineWidth" value="{{labelOutlineWidth}}" min="0" step="0.5" placeholder="{{localize 'BWLP.FontAuto'}}"/><input type="color" name="labelOutlineColor" value="{{labelOutlineColor}}"/></div>
      <label>{{localize "BWLP.LabelOffset"}}</label>
      <div class="bwlp-offset"><input type="number" name="labelX" value="{{labelX}}" step="1" placeholder="X"/><input type="number" name="labelY" value="{{labelY}}" step="1" placeholder="Y"/></div>
    </div>
    <label class="bwlp-check"><input type="checkbox" name="hoverLabels" {{#if hoverLabels}}checked{{/if}}/> {{localize "BWLP.BuilderHoverLabels"}}</label>
    <div class="bwlp-applyrow">
      <button type="button" data-action="previewLabels"><i class="fas fa-eye"></i> {{localize "BWLP.Preview"}}</button>
      <button type="button" class="bwlp-apply" data-action="applyLabels"><i class="fas fa-check"></i> {{localize "BWLP.SDApplyLabelsBtn"}}</button>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.BuilderHover"}}</summary>
    <button type="button" class="bwlp-apply" data-action="editHover"><i class="fas fa-wand-magic-sparkles"></i> {{localize "BWLP.DesignerEditHover"}}</button>
    <p class="notes">{{localize "BWLP.DesignerHoverHint"}}</p>
    <button type="button" class="bwlp-apply" data-action="editLabelHover"><i class="fas fa-font"></i> {{localize "BWLP.DesignerEditLabelHover"}}</button>
    <p class="notes">{{localize "BWLP.DesignerLabelHoverHint"}}</p>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="applyHover"><i class="fas fa-check"></i> {{localize "BWLP.HoverApplyBtn"}}</button>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.Marker"}}</summary>
    <label class="bwlp-check"><input type="checkbox" name="markerOn" {{#if markerOn}}checked{{/if}}/> {{localize "BWLP.MarkerBuilderOn"}}</label>
    <label class="bwlp-check"><input type="checkbox" name="markerCustom" {{#if markerCustom}}checked{{/if}}/> {{localize "BWLP.MarkerCustom"}}</label>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.MarkerShape"}}</label>
      <select name="markerShape">{{#each markers}}<option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}</select>
      <label>{{localize "BWLP.MarkerTint"}}</label>
      <input type="color" name="markerTint" value="{{markerTint}}"/>
    </div>
    <p class="notes">{{localize "BWLP.MarkerBuilderHint"}}</p>
    <div class="bwlp-applyrow">
      <button type="button" class="bwlp-apply" data-action="applyMarker"><i class="fas fa-check"></i> {{localize "BWLP.MarkerApplyBtn"}}</button>
    </div>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SDAudio"}}</summary>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.DefSoundVolume"}}</label>
      <div class="bwlp-range-row"><input type="range" name="soundVolume" min="0" max="100" value="{{soundVolume}}"/><span class="bwlp-range-val">{{soundVolume}}%</span></div>
      <label>{{localize "BWLP.DefHoverSound"}}</label>
      <div><div class="bwlp-sound-row">
      <input type="hidden" name="defHoverSoundPreset" value="{{defHoverSoundValue}}"/><span class="bwlp-sound-current" data-sound-current>{{defHoverSoundDisplay}}</span><button type="button" data-action="chooseDefHoverSound"><i class="fas fa-list-ul"></i> {{localize "BWLP.SoundChoose"}}</button>
      <button type="button" class="bwlp-preview" data-action="previewDefHoverSound" data-tooltip="{{localize 'BWLP.SoundPreview'}}"><i class="fas fa-volume-high"></i></button>
    </div>
    <div class="bwlp-file-row"><input type="text" name="defHoverSoundPath" value="{{defHoverSoundPath}}" placeholder="{{localize 'BWLP.SoundCustomPath'}}"/><button type="button" data-action="browseDefHoverSound"><i class="fas fa-folder-open"></i></button></div></div>
      <label>{{localize "BWLP.DefClickSound"}}</label>
      <div><div class="bwlp-sound-row">
      <input type="hidden" name="defClickSoundPreset" value="{{defClickSoundValue}}"/><span class="bwlp-sound-current" data-sound-current>{{defClickSoundDisplay}}</span><button type="button" data-action="chooseDefClickSound"><i class="fas fa-list-ul"></i> {{localize "BWLP.SoundChoose"}}</button>
      <button type="button" class="bwlp-preview" data-action="previewDefClickSound" data-tooltip="{{localize 'BWLP.SoundPreview'}}"><i class="fas fa-volume-high"></i></button>
    </div>
    <div class="bwlp-file-row"><input type="text" name="defClickSoundPath" value="{{defClickSoundPath}}" placeholder="{{localize 'BWLP.SoundCustomPath'}}"/><button type="button" data-action="browseDefClickSound"><i class="fas fa-folder-open"></i></button></div></div>
    </div>
    <p class="notes">{{localize "BWLP.DefSoundHint"}}</p>
    <hr class="bwlp-subsep"/>
    <div class="bwlp-grid">
      <label>{{localize "BWLP.SDPlaylist"}}</label>
      <select name="playlist"><option value="">{{localize "BWLP.SDNone"}}</option>{{#each playlists}}<option value="{{id}}" {{#if selected}}selected{{/if}}>{{name}}</option>{{/each}}</select>
      <label>{{localize "BWLP.SDTrack"}}</label>
      <select name="track"><option value="">{{localize "BWLP.SDPlaylistAll"}}</option>{{#each tracks}}<option value="{{id}}" {{#if selected}}selected{{/if}}>{{name}}</option>{{/each}}</select>
      <label>{{localize "BWLP.SDSoundFile"}}</label>
      <div class="bwlp-file-row"><input type="text" name="soundSrc" value="{{soundSrc}}" placeholder="path/to/sound.ogg"/><button type="button" data-action="browseSound"><i class="fas fa-folder-open"></i> {{localize "BWLP.Browse"}}</button></div>
    </div>
    <label class="bwlp-check"><input type="checkbox" name="soundLoop" {{#if soundLoop}}checked{{/if}}/> {{localize "BWLP.SDSoundLoop"}}</label>
    <p class="notes">{{localize "BWLP.SDSoundHint"}}</p>
    <button type="button" class="bwlp-apply" data-action="applyAudio"><i class="fas fa-check"></i> {{localize "BWLP.SDApplyAudioBtn"}}</button>
  </details>

  <details class="bwlp-sec">
    <summary>{{localize "BWLP.SecExtras"}}</summary>
    <label class="bwlp-check"><input type="checkbox" name="dropShadow" {{#if dropShadow}}checked{{/if}}/> {{localize "BWLP.BuilderDropShadow"}}</label>
  </details>

  <footer class="bwlp-footer">
    <button type="submit"><i class="fas fa-table-cells-large"></i> {{localize "BWLP.DesignerBuild"}}</button>
  </footer>
</div>
