<!DOCTYPE html>
<html lang="{{HTML_LANG}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{BOOTSTRAP_CSS}}
  <style>{{DIALOG_CSS}}</style>
  <style>
    body { font-size: 13px; }
    .swatch { width: 34px; height: 28px; padding: 0; border: 1px solid #ced4da; border-radius: 4px; }
    .preset-name { font-weight: 600; }
    .section-title { font-weight: 600; font-size: 12px; text-transform: uppercase; color: #6c757d; letter-spacing: .03em; }
  </style>
</head>
<body class="p-3">
  <div class="container-fluid">
    <h2 class="h6 mb-1">Cut-layer settings</h2>
    <p class="text-muted small mb-3">Auto-layout band sizes and the cut-layer presets.</p>

    <div class="card border mb-3">
      <div class="card-body py-2 px-3">
        <div class="section-title mb-2">Auto bands (mm)</div>
        <div class="row g-2">
          <div class="col-4">
            <label class="form-label small mb-1">Top</label>
            <input id="top" type="number" min="0" step="10" class="form-control form-control-sm" value="{{CUT_TOP_MM}}" onchange="saveBands()">
          </div>
          <div class="col-4">
            <label class="form-label small mb-1">Bottom</label>
            <input id="bottom" type="number" min="0" step="10" class="form-control form-control-sm" value="{{CUT_BOTTOM_MM}}" onchange="saveBands()">
          </div>
          <div class="col-4">
            <label class="form-label small mb-1">Right</label>
            <input id="right" type="number" min="0" step="10" class="form-control form-control-sm" value="{{CUT_RIGHT_MM}}" onchange="saveBands()">
          </div>
        </div>
        <p class="text-muted small mb-0 mt-2">A part is assigned to a band only when it lies fully within it. "Auto-set cut layers after nesting" is in the ABF Extra Nesting run dialog.</p>
      </div>
    </div>

    <div class="card border mb-3">
      <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="section-title">Presets</div>
          <button class="btn btn-sm btn-outline-secondary py-0" onclick="sketchup.on_cut_reset_presets()">Reset</button>
        </div>
        <div id="presets"></div>
        <hr class="my-2">
        <div class="d-flex align-items-center gap-2">
          <input id="newcolor" type="color" class="swatch" value="#c8c8c8">
          <input id="newname" type="text" maxlength="3" placeholder="Name" class="form-control form-control-sm" style="width:90px">
          <button class="btn btn-sm btn-primary" onclick="addPreset()">Add preset</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    var PRESETS = {{CUT_PRESETS_JSON}};
    function clamp(v){ v = v|0; return v < 0 ? 0 : (v > 255 ? 255 : v); }
    function rgbOf(hex){ return [parseInt(hex.substr(1,2),16), parseInt(hex.substr(3,2),16), parseInt(hex.substr(5,2),16)]; }
    function hexOf(c){ return '#' + c.map(function(v){ return ('0'+clamp(v).toString(16)).slice(-2); }).join(''); }
    function saveBands(){
      sketchup.on_cut_bands(+document.getElementById('top').value,
                            +document.getElementById('bottom').value,
                            +document.getElementById('right').value);
    }
    function renderPresets(){
      var box = document.getElementById('presets'); box.innerHTML = '';
      PRESETS.forEach(function(p){
        var row = document.createElement('div'); row.className = 'd-flex align-items-center gap-2 mb-2';
        var col = document.createElement('input'); col.type = 'color'; col.className = 'swatch'; col.value = hexOf(p.color);
        col.onchange = function(){ var c = rgbOf(col.value); sketchup.on_cut_update_color(p.name, c[0], c[1], c[2]); };
        var nm = document.createElement('span'); nm.className = 'preset-name flex-grow-1'; nm.textContent = p.name;
        var del = document.createElement('button'); del.className = 'btn btn-sm btn-outline-danger py-0'; del.textContent = '✕';
        del.onclick = function(){ sketchup.on_cut_delete_preset(p.name); };
        row.appendChild(col); row.appendChild(nm); row.appendChild(del); box.appendChild(row);
      });
    }
    function addPreset(){
      var nm = document.getElementById('newname').value.trim(); if(!nm) return;
      var c = rgbOf(document.getElementById('newcolor').value);
      sketchup.on_cut_add_preset(nm, c[0], c[1], c[2]);
    }
    document.addEventListener('DOMContentLoaded', renderPresets);
  </script>
</body>
</html>
