<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.Moons'}}">
      {{localize "CALENDARIA.Common.Moons"}}
    </legend>
    {{#if moonsWithNav.length}}
      <div class="items-list moons-list">
        <div class="list-header flexrow">
          <span class="col-name" data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MoonName'}}">
            {{localize "CALENDARIA.Common.Name"}}
          </span>
          <span class="col-cycle" data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CycleLength'}}">
            {{localize "CALENDARIA.Editor.Field.CycleLength"}}
          </span>
          <span class="col-color" data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MoonColor'}}">
            {{localize "CALENDARIA.Common.Color"}}
          </span>
          <span class="col-controls"></span>
        </div>
        {{#each moonsWithNav}}
          <div class="item moon-item" data-key="{{this.key}}">
            <div class="item-fields moon-header flexrow">
              <input type="text" id="editor-moon-{{this.index}}-name" name="moons.{{this.key}}.name"
                value="{{this.name}}" class="col-name">
              <input type="number" id="editor-moon-{{this.index}}-cycle" name="moons.{{this.key}}.cycleLength"
                value="{{this.cycleLength}}" min="1" step="0.01" class="col-cycle">
              <div class="col-color color-input-wrapper">
                <color-picker name="moons.{{this.key}}.color"
                  value="{{#if this.color}}{{this.color}}{{else}}#b8b8b8{{/if}}"></color-picker>
                <span class="moon-color-preview{{#if this.color}} tinted{{/if}}"
                  style="--moon-color: {{#if this.color}}{{this.color}}{{else}}#b8b8b8{{/if}}">
                  <img src="modules/calendaria/assets/moon-phases/07_lastquarter.svg"
                    alt="{{localize 'CALENDARIA.Common.Preview'}}">
                </span>
              </div>
              <div class="col-controls item-controls">
                <button type="button" data-action="addMoon" data-key="{{this.key}}" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddMoon'}}">
                  <i class="fas fa-plus"></i>
                </button>
                <button type="button" data-action="removeMoon" data-key="{{this.key}}" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveMoon'}}">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>

            <div class="moon-fields">
              <div class="form-group">
                <label
                  for="editor-moon-{{this.index}}-hide">{{localize "CALENDARIA.Editor.Field.MoonVisibility"}}</label>
                <div class="form-fields">
                  <input type="checkbox" id="editor-moon-{{this.index}}-hide" name="moons.{{this.key}}.hideFromPlayers"
                    {{#if this.isHidden}}checked{{/if}}>
                </div>
                <p class="hint">{{localize "CALENDARIA.Editor.Hint.MoonVisibility"}}</p>
              </div>
              <fieldset class="moon-brightness standard-form">
                <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.MoonBrightness'}}">
                  {{localize "CALENDARIA.Editor.Section.MoonBrightness"}}
                </legend>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-brightness" data-tooltip
                    aria-label="{{localize 'CALENDARIA.Editor.Hint.MoonBrightnessMax'}}">
                    {{localize "CALENDARIA.Editor.Field.MoonBrightnessMax"}}
                  </label>
                  <div class="form-fields range-field">
                    <input type="range" id="editor-moon-{{this.index}}-brightness"
                      name="moons.{{this.key}}.moonBrightnessMax" value="{{this.brightnessDisplay}}" min="0" max="0.3"
                      step="0.01">
                    <span class="range-value">{{this.brightnessDisplay}}</span>
                  </div>
                  <p class="hint">{{localize "CALENDARIA.Editor.Hint.MoonBrightnessMax"}}</p>
                </div>
              </fieldset>

              <fieldset class="phase-mode standard-form">
                <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.PhaseMode'}}">
                  {{localize "CALENDARIA.Editor.Section.PhaseMode"}}
                </legend>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-phase-mode">
                    {{localize "CALENDARIA.Editor.Field.PhaseMode"}}
                  </label>
                  <div class="form-fields">
                    <select id="editor-moon-{{this.index}}-phase-mode" name="moons.{{this.key}}.phaseMode">
                      {{#each this.phaseModeOptions}}
                        <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
                      {{/each}}
                    </select>
                  </div>
                  <p class="hint">{{localize "CALENDARIA.Editor.Hint.PhaseMode"}}</p>
                </div>
                {{#if this.isRandomized}}
                  <div class="form-group">
                    <label for="editor-moon-{{this.index}}-seed" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Hint.PhaseSeed'}}">
                      {{localize "CALENDARIA.Editor.Field.PhaseSeed"}}
                    </label>
                    <div class="form-fields">
                      <input type="number" id="editor-moon-{{this.index}}-seed" name="moons.{{this.key}}.phaseSeed"
                        value="{{this.phaseSeed}}" step="1">
                      <button type="button" data-action="randomizeSeed" data-moon-key="{{this.key}}" data-tooltip
                        aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RandomizeSeed'}}">
                        <i class="fas fa-dice"></i>
                      </button>
                    </div>
                    <p class="hint">{{localize "CALENDARIA.Editor.Hint.PhaseSeed"}}</p>
                  </div>
                  <div class="form-group">
                    <label for="editor-moon-{{this.index}}-variance" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Hint.CycleVariance'}}">
                      {{localize "CALENDARIA.Editor.Field.CycleVariance"}}
                    </label>
                    <div class="form-fields range-field">
                      <input type="range" id="editor-moon-{{this.index}}-variance"
                        name="moons.{{this.key}}.cycleVariance" value="{{this.cycleVariance}}" min="0" max="1"
                        step="0.05">
                      <span class="range-value">{{this.cycleVariance}}</span>
                    </div>
                    <p class="hint">{{localize "CALENDARIA.Editor.Hint.CycleVariance"}}</p>
                  </div>
                {{/if}}

                <fieldset class="anchor-phases">
                  <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.AnchorPhases'}}">
                    {{localize "CALENDARIA.Editor.Section.AnchorPhases"}}
                  </legend>
                  <p class="hint">{{localize "CALENDARIA.Editor.Hint.AnchorPhases"}}</p>
                  <div class="items-list anchors-list">
                    {{#if this.anchorPhasesWithIndex.length}}
                      <div class="list-header flexrow">
                        <span class="col-year">{{localize "CALENDARIA.Common.Year"}}</span>
                        <span class="col-month">{{localize "CALENDARIA.Common.Month"}}</span>
                        <span class="col-day">{{localize "CALENDARIA.Common.Day"}}</span>
                        <span class="col-phase">{{localize "CALENDARIA.Editor.Column.Phase"}}</span>
                        <span class="col-reset" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Hint.AnchorResetCycle'}}">{{localize "CALENDARIA.Editor.Column.Reset"}}</span>
                        <span class="col-controls"></span>
                      </div>
                      {{#each this.anchorPhasesWithIndex}}
                        <div class="item anchor-item flexrow" data-anchor-key="{{this.anchorKey}}">
                          <input type="number" name="moons.{{this.moonKey}}.anchorPhases.{{this.anchorKey}}.year"
                            value="{{this.year}}" class="col-year" placeholder="{{localize 'CALENDARIA.Common.Any'}}">
                          <select name="moons.{{this.moonKey}}.anchorPhases.{{this.anchorKey}}.month" class="col-month">
                            {{#each this.anchorMonthOptions}}
                              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}
                              </option>
                            {{/each}}
                          </select>
                          <input type="number" name="moons.{{this.moonKey}}.anchorPhases.{{this.anchorKey}}.dayOfMonth"
                            value="{{this.displayDay}}" min="1" class="col-day">
                          <select name="moons.{{this.moonKey}}.anchorPhases.{{this.anchorKey}}.phaseIndex"
                            class="col-phase">
                            {{#each this.anchorPhaseOptions}}
                              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}
                              </option>
                            {{/each}}
                          </select>
                          <label class="col-reset" data-tooltip
                            aria-label="{{localize 'CALENDARIA.Editor.Hint.AnchorResetCycle'}}">
                            <input type="checkbox"
                              name="moons.{{this.moonKey}}.anchorPhases.{{this.anchorKey}}.resetCycle"
                              {{#if this.resetCycle}}checked{{/if}}>
                          </label>
                          <div class="col-controls item-controls">
                            <button type="button" data-action="removeAnchorPhase" data-moon-key="{{this.moonKey}}"
                              data-anchor-key="{{this.anchorKey}}" data-tooltip
                              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveAnchor'}}">
                              <i class="fas fa-trash"></i>
                            </button>
                          </div>
                        </div>
                      {{/each}}
                    {{/if}}
                    <button type="button" data-action="addAnchorPhase" data-moon-key="{{this.key}}"
                      class="add-anchor-btn">
                      <i class="fas fa-plus"></i>
                      {{localize "CALENDARIA.Editor.AddAnchor"}}
                    </button>
                  </div>
                </fieldset>
              </fieldset>

              <fieldset class="reference-date standard-form">
                <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.ReferenceDate'}}">
                  {{localize "CALENDARIA.Common.ReferenceDate"}}
                </legend>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-ref-year">{{localize "CALENDARIA.Common.Year"}}</label>
                  <div class="form-fields">
                    <input type="number" id="editor-moon-{{this.index}}-ref-year"
                      name="moons.{{this.key}}.referenceDate.year" value="{{this.referenceDate.year}}" step="1">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-ref-month">{{localize "CALENDARIA.Common.Month"}}</label>
                  <div class="form-fields">
                    <select id="editor-moon-{{this.index}}-ref-month" name="moons.{{this.key}}.referenceDate.month">
                      {{#each this.refMonthOptions}}
                        <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>
                          {{this.label}}
                        </option>
                      {{/each}}
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-ref-day">{{localize "CALENDARIA.Common.Day"}}</label>
                  <div class="form-fields">
                    <input type="number" id="editor-moon-{{this.index}}-ref-day"
                      name="moons.{{this.key}}.referenceDate.dayOfMonth" value="{{this.displayRefDay}}" min="1"
                      step="1">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-ref-phase" data-tooltip
                    aria-label="{{localize 'CALENDARIA.Editor.Tooltip.ReferencePhase'}}">
                    {{localize "CALENDARIA.Common.Phase"}}
                  </label>
                  <div class="form-fields">
                    <select id="editor-moon-{{this.index}}-ref-phase" name="moons.{{this.key}}.referencePhase">
                      {{#each this.referencePhaseOptions}}
                        <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
                      {{/each}}
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-adjust" data-tooltip
                    aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CycleDayAdjust'}}">
                    {{localize "CALENDARIA.Editor.Field.CycleDayAdjust"}}
                  </label>
                  <div class="form-fields">
                    <input type="number" id="editor-moon-{{this.index}}-adjust" name="moons.{{this.key}}.cycleDayAdjust"
                      value="{{this.cycleDayAdjust}}" step="1">
                  </div>
                </div>
              </fieldset>

              <fieldset class="eclipse-settings standard-form">
                <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.Eclipse'}}">
                  {{localize "CALENDARIA.Editor.Section.Eclipse"}}
                </legend>
                <div class="form-group">
                  <label for="editor-moon-{{this.index}}-eclipse-mode">
                    {{localize "CALENDARIA.Editor.Field.EclipseMode"}}
                  </label>
                  <div class="form-fields">
                    <select id="editor-moon-{{this.index}}-eclipse-mode" name="moons.{{this.key}}.eclipseMode">
                      {{#each this.eclipseModeOptions}}
                        <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
                      {{/each}}
                    </select>
                  </div>
                  <p class="hint">{{localize "CALENDARIA.Editor.Hint.EclipseMode"}}</p>
                </div>
                {{#if this.isCustomEclipse}}
                  <div class="form-group">
                    <label for="editor-moon-{{this.index}}-nodal-period" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Hint.NodalPeriod'}}">
                      {{localize "CALENDARIA.Editor.Field.NodalPeriod"}}
                    </label>
                    <div class="form-fields">
                      <input type="number" id="editor-moon-{{this.index}}-nodal-period"
                        name="moons.{{this.key}}.nodalPeriod" value="{{this.nodalPeriod}}" min="1" step="1">
                    </div>
                    <p class="hint">{{localize "CALENDARIA.Editor.Hint.NodalPeriod"}}</p>
                  </div>
                {{/if}}
                {{#unless this.isNoEclipse}}
                  <div class="form-group">
                    <label for="editor-moon-{{this.index}}-apparent-size" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Hint.ApparentSize'}}">
                      {{localize "CALENDARIA.Editor.Field.ApparentSize"}}
                    </label>
                    <div class="form-fields range-field">
                      <input type="range" id="editor-moon-{{this.index}}-apparent-size"
                        name="moons.{{this.key}}.apparentSize" value="{{this.apparentSizeDisplay}}" min="0.1" max="2.0"
                        step="0.1">
                      <span class="range-value">{{this.apparentSizeDisplay}}</span>
                    </div>
                    <p class="hint">{{localize "CALENDARIA.Editor.Hint.ApparentSize"}}</p>
                  </div>
                {{/unless}}
              </fieldset>

              <fieldset class="moon-phases-section">
                <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MoonPhases'}}">
                  {{localize "CALENDARIA.MoonPhases.Title"}}
                </legend>

                {{! Phase slider visualization (hidden for randomized moons) }}
                {{#unless this.isRandomized}}
                  {{#if this.phasesWithIndex.length}}
                    <div class="moon-phase-slider" data-moon-key="{{this.key}}">
                      <div class="slider-track">
                        {{#each this.phasesWithIndex}}
                          <div class="slider-segment{{#if this.moonColor}} tinted{{/if}}"
                            data-phase-key="{{this.phaseKey}}"
                            style="left: {{this.startPercent}}%; width: {{this.widthPercent}}%; --moon-color: {{#if this.moonColor}}{{this.moonColor}}{{else}}#b8b8b8{{/if}};"
                            data-tooltip aria-label="{{this.name}}">
                            {{#if this.isImagePath}}
                              <span class="phase-icon-wrapper">
                                <img src="{{this.icon}}" alt="{{this.name}}" class="phase-icon">
                              </span>
                            {{else}}
                              <span class="phase-emoji">{{this.icon}}</span>
                            {{/if}}
                            {{#if (gte this.widthPercent 3)}}<span
                                class="phase-percent">{{this.widthFormatted}}%</span>{{/if}}
                          </div>
                          {{#unless @last}}
                            <div class="slider-handle" data-moon-key="{{this.moonKey}}"
                              data-phase-key="{{this.phaseKey}}" style="left: {{this.endPercent}}%;" data-tooltip
                              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.DragToAdjust'}}"></div>
                          {{/unless}}
                        {{/each}}
                      </div>
                    </div>
                  {{/if}}
                {{/unless}}

                <div class="items-list phases-list{{#if this.isRandomized}} randomized-phases{{/if}}">
                  <div class="list-header flexrow">
                    <span class="col-icon" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseIcon'}}">{{localize "CALENDARIA.Common.Icon"}}</span>
                    <span class="col-name" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseName'}}">{{localize "CALENDARIA.Editor.Column.Phase"}}</span>
                    <span class="col-rising" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RisingName'}}">{{localize "CALENDARIA.Common.Rising"}}</span>
                    <span class="col-fading" data-tooltip
                      aria-label="{{localize 'CALENDARIA.Editor.Tooltip.FadingName'}}">{{localize "CALENDARIA.Common.Fading"}}</span>
                    {{#if this.isRandomized}}
                      <span class="col-weight" data-tooltip
                        aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseWeight'}}">{{localize "CALENDARIA.Editor.Column.Weight"}}</span>
                    {{else}}
                      <span class="col-start" data-tooltip
                        aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseStart'}}">{{localize "CALENDARIA.Editor.Column.StartPercent"}}</span>
                      <span class="col-end" data-tooltip
                        aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseEnd'}}">{{localize "CALENDARIA.Editor.Column.EndPercent"}}</span>
                    {{/if}}
                    <span class="col-controls"></span>
                  </div>

                  {{#each this.phasesWithIndex}}
                    <div class="item phase-item flexrow" data-phase-key="{{this.phaseKey}}">
                      <div class="col-icon">
                        <button type="button" class="phase-icon-btn{{#if this.moonColor}} tinted{{/if}}"
                          style="--moon-color: {{#if this.moonColor}}{{this.moonColor}}{{else}}#b8b8b8{{/if}}"
                          data-action="pickMoonPhaseIcon" data-moon-key="{{this.moonKey}}"
                          data-phase-key="{{this.phaseKey}}" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseIcon'}}">
                          {{#if this.isImagePath}}
                            <img src="{{this.icon}}" alt="{{this.name}}">
                          {{else}}
                            <span class="phase-emoji">{{this.icon}}</span>
                          {{/if}}
                        </button>
                        <input type="hidden" name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.icon"
                          value="{{this.icon}}">
                      </div>
                      <input type="text" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-name"
                        name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.name" value="{{this.name}}"
                        class="col-name" placeholder="{{localize 'CALENDARIA.Editor.Placeholder.PhaseName'}}">
                      <input type="text" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-rising"
                        name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.rising" value="{{this.rising}}"
                        class="col-rising" placeholder="{{localize 'CALENDARIA.Common.Rising'}}">
                      <input type="text" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-fading"
                        name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.fading" value="{{this.fading}}"
                        class="col-fading" placeholder="{{localize 'CALENDARIA.Common.Fading'}}">
                      {{#if ../isRandomized}}
                        <input type="number" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-weight"
                          name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.weight" value="{{this.weight}}" min="1"
                          step="1" class="col-weight" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.PhaseWeight'}}">
                      {{else}}
                        <input type="number" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-start"
                          name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.startPercent"
                          value="{{this.startPercent}}" min="0" max="100" step="0.01" class="col-start">
                        <input type="number" id="editor-moon-{{this.moonKey}}-phase-{{this.phaseKey}}-end"
                          name="moons.{{this.moonKey}}.phases.{{this.phaseKey}}.endPercent" value="{{this.endPercent}}"
                          min="0" max="100" step="0.01" class="col-end">
                      {{/if}}
                      <div class="col-controls item-controls">
                        <button type="button" data-action="addMoonPhase" data-moon-key="{{this.moonKey}}" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddPhase'}}">
                          <i class="fas fa-plus"></i>
                        </button>
                        <button type="button" data-action="removeMoonPhase" data-moon-key="{{this.moonKey}}"
                          data-phase-key="{{this.phaseKey}}" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemovePhase'}}">
                          <i class="fas fa-trash"></i>
                        </button>
                      </div>
                    </div>
                  {{else}}
                    <div class="empty-phases">
                      <button type="button" data-action="addMoonPhase" data-moon-key="{{../key}}">
                        <i class="fas fa-plus"></i>
                        {{localize "CALENDARIA.Editor.AddPhase"}}
                      </button>
                    </div>
                  {{/each}}
                </div>

              </fieldset>
            </div>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoMoons"}}</p>
        <button type="button" data-action="addMoon" data-key="">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddMoon"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
</section>
