{{define "body-colors"}}
<div class="color-themer">
  <div class="editor-list color-list" id="colorList">
    <div class="search-bar"><input type="search" id="colorFilter" placeholder="Filter categories..." oninput="filterColorRows(this.value)"></div>
    <div id="colorRows"></div>
    <div class="color-list-actions">
      <button class="btn btn-sm" id="colorExportBtn" onclick="colorExport()">Export JSON</button>
      <button class="btn btn-sm" id="colorImportBtn" onclick="colorImportPrompt()">Import JSON</button>
      <button class="btn btn-sm" id="colorResetBtn" onclick="colorResetAll()">Reset all to defaults</button>
    </div>
    <div class="color-save-bar">
      <button class="btn btn-primary" id="colorSaveBtn" onclick="colorSave()">Save Colors</button>
      <span id="colorSaveStatus" class="color-save-status"></span>
    </div>
  </div>
  <div class="editor-main color-preview-main">
    <div class="color-preview-toolbar">
      <label for="colorMode">Color mode:</label>
      <select id="colorMode" onchange="renderColorPreview()">
        <option value="xterm256">xterm256 (full color)</option>
        <option value="ansi16">ansi16 (16-color nearest)</option>
        <option value="none">none (uncolored)</option>
      </select>
      <span class="color-preview-hint">Right side updates live as you edit colors.</span>
    </div>
    <div class="color-preview-scroll">
      <pre id="colorPreview" class="color-preview-pre"></pre>
    </div>
  </div>
</div>
<input type="hidden" id="colorImportInput">
<script src="/static/coloreditor.js"></script>
<script>
initColorEditor();
</script>
{{end}}
</content>