<section class="preset-manager-layout">
  <div class="preset-list-panel">
    <div class="preset-list">
      {{#each presets}}
        <div class="preset-list-item {{#if this.selected}}active{{/if}} {{#if this.isDefault}}is-default{{/if}}"
          data-preset-id="{{this.id}}" data-action="selectPreset">
          <span class="preset-label">{{this.label}}</span>
          <button type="button" class="preset-icon-btn" data-action="editIcon" data-preset-id="{{this.id}}"
            style="color: {{this.color}}" data-tooltip="{{localize 'CALENDARIA.SettingsPanel.Preset.EditIconColor'}}">
            <i class="{{this.icon}}"></i>
          </button>
        </div>
      {{/each}}
    </div>
    {{#if hasHiddenBuiltins}}
      <button type="button" class="restore-presets-link" data-action="restorePresets">
        {{localize "CALENDARIA.PresetManager.RestorePresets"}}
      </button>
    {{/if}}
  </div>
  <div class="preset-editor-panel standard-form">
    {{#if selected}}
      <fieldset data-section="content">
        <legend>{{localize "CALENDARIA.Common.Content"}}</legend>
        <div class="form-group">
          <label for="preset-name">{{localize "CALENDARIA.Common.Name"}}</label>
          <div class="form-fields">
            <input type="text" id="preset-name" name="selected.label" value="{{selected.label}}"
              {{#if selected.isDefault}}disabled{{/if}}>
          </div>
          <p class="hint">{{localize "CALENDARIA.PresetManager.NameHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.Note.Emblem"}}</label>
          <div class="form-fields">
            <button type="button" class="preset-icon-btn" data-action="editIcon" data-preset-id="{{selected.id}}"
              style="color: {{selected.color}}"
              data-tooltip="{{localize 'CALENDARIA.SettingsPanel.Preset.EditIconColor'}}">
              <i class="{{selected.icon}}"></i>
            </button>
          </div>
        </div>
        <div class="form-group">
          <label for="preset-player-usable">{{localize "CALENDARIA.PresetManager.PlayerUsable"}}</label>
          <div class="form-fields">
            <input type="checkbox" id="preset-player-usable" name="selected.playerUsable"
              {{#if selected.isDefault}}checked disabled{{else}}{{#if selected.playerUsable}}checked{{/if}}{{/if}}>
          </div>
          <p class="hint">{{localize "CALENDARIA.PresetManager.PlayerUsableHint"}}</p>
        </div>
        {{#each contentFields}}
          <div class="form-group">
            <label for="cat-def-{{this.key}}">{{this.label}}</label>
            <div class="form-fields">
              {{{this.inputHtml}}}
            </div>
            <p class="hint">{{this.hint}}</p>
          </div>
        {{/each}}
        <div class="form-group stacked">
          <label>{{localize "CALENDARIA.Common.Content"}}</label>
          <p class="hint">{{localize "CALENDARIA.PresetManager.ContentTemplateFieldHint"}}</p>
          <prose-mirror name="selected.defaults.content" value="{{selected.defaults.content}}"
            aria-label="{{localize 'CALENDARIA.Common.Content'}}" compact></prose-mirror>
        </div>
      </fieldset>
      <fieldset data-section="schedule">
        <legend>{{localize "CALENDARIA.Note.Tab.Schedule"}}</legend>
        {{#each scheduleFields}}
          <div class="form-group">
            <label for="cat-def-{{this.key}}">{{this.label}}</label>
            <div class="form-fields">
              {{{this.inputHtml}}}
            </div>
            <p class="hint">{{this.hint}}</p>
          </div>
        {{/each}}
      </fieldset>
      <fieldset data-section="settings">
        <legend>{{localize "CALENDARIA.Common.Settings"}}</legend>
        {{#each settingsFields}}
          <div class="form-group">
            <label for="cat-def-{{this.key}}">{{this.label}}</label>
            <div class="form-fields">
              {{{this.inputHtml}}}
            </div>
            <p class="hint">{{this.hint}}</p>
          </div>
        {{/each}}
      </fieldset>
    {{else}}
      <div class="empty-editor">
        <p>{{localize "CALENDARIA.PresetManager.NoSelection"}}</p>
      </div>
    {{/if}}
  </div>
</section>
