<div class="ei-config-layout">
  <div class="ei-template-list">
    {{#each templates}}
    <div class="ei-template-entry {{#if active}}active{{/if}}" data-action="switchTemplate" data-template-key="{{key}}">
      {{name}}
    </div>
    {{/each}}
    <button type="button" data-action="newTemplate" class="ei-config-btn">
      <i class="fas fa-plus"></i> {{localize "EI.SlotConfig.NewTemplate"}}
    </button>
  </div>

  <div class="ei-template-editor">
    <div class="ei-config-header">
      <input type="text" class="ei-template-name-input" value="{{currentName}}" placeholder="Template name"/>
      <button type="button" data-action="addSlot" class="ei-config-btn">
        <i class="fas fa-plus-circle"></i> Add Slot
      </button>
      <button type="button" data-action="addSlotFolder" class="ei-config-btn">
        <i class="fas fa-folder-plus"></i> Add Slot Folder
      </button>
      <button type="button" data-action="saveTemplate" class="ei-config-btn ei-config-save">
        <i class="fas fa-save"></i> Save
      </button>
      <button type="button" data-action="resetTemplate" class="ei-config-btn ei-config-warn">
        <i class="fas fa-undo"></i> Reset
      </button>
      <button type="button" data-action="deleteTemplate" class="ei-config-btn ei-config-danger">
        <i class="fas fa-trash"></i> Delete
      </button>
    </div>
    <div class="ei-config-body-container"></div>
    <p class="ei-config-hint">Drag slots to position them. Right-click a slot to edit or delete it.</p>
  </div>
</div>
