<!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>
</head>
<body class="p-3">
  <div class="container-fluid">
    <div class="mb-2 d-flex justify-content-between align-items-start">
      <h2 class="h6 mb-0">{{IM_TITLE}}</h2>
      <span id="im-status" class="small text-success" style="min-width:60px;text-align:right;"></span>
    </div>

    <!-- TOP: inputs + Save -->
    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="row g-2">
          <div class="col-6">
            <label class="form-label small mb-1">{{IM_WIDTH_OFFSET}}</label>
            <input type="number" step="0.1" class="form-control form-control-sm" id="im-width-offset" value="{{WIDTH_OFFSET_MM}}">
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{IM_EXTEND}}</label>
            <input type="number" step="0.5" class="form-control form-control-sm" id="im-extend" value="{{EXTEND_MM}}">
          </div>
          <div class="col-7">
            <label class="form-label small mb-1">{{IM_TAG}}</label>
            <input type="text" class="form-control form-control-sm" id="im-tag" value="{{TAG}}">
          </div>
          <div class="col-5">
            <label class="form-label small mb-1">{{IM_PRESET_NAME}}</label>
            <input type="text" class="form-control form-control-sm" id="im-preset-name" placeholder="{{IM_PRESET_NAME}}">
          </div>
        </div>
        <div class="mt-2">
          <button id="im-preset-save" class="btn btn-sm btn-success">{{IM_PRESET_SAVE}}</button>
        </div>
      </div>
    </div>

    <!-- BOTTOM: preset list with per-row delete -->
    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{IM_SECTION_PRESETS}}</div>
        <ul id="im-preset-list" class="list-group list-group-flush">{{PRESET_ROWS}}</ul>
      </div>
    </div>
  </div>

  <script>
  (function () {
    var STRINGS = { saved: {{IM_SAVED_JSON}} };
    var PRESETS = {{PRESETS_JSON}};

    function val(id) { var el = document.getElementById(id); return el ? el.value : ''; }
    function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v; }
    function showStatus(text) {
      var el = document.getElementById('im-status');
      if (!el) return;
      el.textContent = text;
      setTimeout(function () { el.textContent = ''; }, 1500);
    }
    function presetById(id) {
      for (var i = 0; i < PRESETS.length; i++) { if (String(PRESETS[i].id) === String(id)) return PRESETS[i]; }
      return null;
    }

    document.getElementById('im-preset-save').addEventListener('click', function () {
      var name = val('im-preset-name').trim();
      if (!name) name = val('im-tag').trim() || 'Preset';
      var existing = null;
      for (var i = 0; i < PRESETS.length; i++) { if (PRESETS[i].name === name) { existing = PRESETS[i]; break; } }
      var payload = {
        id: existing ? existing.id : '',
        name: name,
        width_offset_mm: val('im-width-offset'),
        extend_mm: val('im-extend'),
        tag: val('im-tag')
      };
      if (window.sketchup && sketchup.on_im_preset_save) {
        sketchup.on_im_preset_save(JSON.stringify(payload));
        showStatus(STRINGS.saved);
      }
    });

    // Per-row: load fields on click, delete on the × button.
    var list = document.getElementById('im-preset-list');
    if (list) {
      list.addEventListener('click', function (e) {
        var li = e.target.closest('[data-preset-id]');
        if (!li) return;
        var id = li.getAttribute('data-preset-id');
        if (e.target.classList.contains('im-del')) {
          e.stopPropagation();
          if (window.sketchup && sketchup.on_im_preset_delete) sketchup.on_im_preset_delete(id);
          return;
        }
        var p = presetById(id);
        if (!p) return;
        setVal('im-width-offset', p.width_offset_mm);
        setVal('im-extend', p.extend_mm);
        setVal('im-tag', p.tag);
        setVal('im-preset-name', p.name);
      });
    }
  })();
  </script>
</body>
</html>
