<!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>

    <!-- PRESETS: the list + a "+" add button. The input form below stays HIDDEN
         until the user clicks "+" (new) or a preset row (edit). -->
    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="unfold-section-title mb-0">{{IM_SECTION_PRESETS}}</div>
          <button id="im-add" type="button" class="btn btn-sm btn-success py-0 px-2" title="{{IM_PRESET_ADD}}">+</button>
        </div>
        <ul id="im-preset-list" class="list-group list-group-flush">{{PRESET_ROWS}}</ul>
      </div>
    </div>

    <!-- FORM: create / edit a preset. Hidden by default; revealed by openForm. -->
    <div class="card border mb-2" id="im-form-card" style="display:none;">
      <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="unfold-section-title mb-0" id="im-form-title"></div>
          <button id="im-form-close" type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" title="{{IM_PRESET_CANCEL}}">&times;</button>
        </div>
        <div class="row g-2">
          <div class="col-6" id="im-width-offset-col">
            <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" id="im-extend-col">
            <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-6">
            <label class="form-label small mb-1">{{IM_MODE}}</label>
            <select class="form-select form-select-sm" id="im-mode">
              <option value="area">{{IM_MODE_AREA}}</option>
              <option value="line">{{IM_MODE_LINE}}</option>
            </select>
          </div>
          <div class="col-6">
            <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-12">
            <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 d-flex gap-2">
          <button id="im-preset-save" type="button" class="btn btn-sm btn-success">{{IM_PRESET_SAVE}}</button>
          <button id="im-reset" type="button" class="btn btn-sm btn-outline-secondary">{{IM_RESET}}</button>
        </div>
      </div>
    </div>
  </div>

  <script>
  (function () {
    var STRINGS = {
      saved: {{IM_SAVED_JSON}},
      formNew: {{IM_FORM_NEW_JSON}},
      formEdit: {{IM_FORM_EDIT_JSON}}
    };
    var PRESETS = {{PRESETS_JSON}};
    var ACTIVE_MODE = {{IM_MODE_JSON}};
    // Starting values for a brand-new preset (the current active config).
    var DEFAULTS = {
      width_offset_mm: {{WIDTH_OFFSET_JSON}},
      extend_mm: {{EXTEND_JSON}},
      tag: {{TAG_JSON}},
      mode: ACTIVE_MODE
    };

    function el(id) { return document.getElementById(id); }
    function val(id) { var e = el(id); return e ? e.value : ''; }
    function setVal(id, v) { var e = el(id); if (e) e.value = v; }
    function show(id, on) { var e = el(id); if (e) e.style.display = on ? '' : 'none'; }

    function showStatus(text) {
      var e = el('im-status');
      if (!e) return;
      e.textContent = text;
      setTimeout(function () { e.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;
    }

    // LINE mode has NO offset (it's a single mid-line of the section), so hide
    // the width/extend inputs whenever the mode is "line".
    function syncModeFields() {
      var line = val('im-mode') === 'line';
      show('im-width-offset-col', !line);
      show('im-extend-col', !line);
    }

    function fill(p) {
      setVal('im-width-offset', p.width_offset_mm);
      setVal('im-extend', p.extend_mm);
      setVal('im-mode', p.mode || 'area');
      setVal('im-tag', p.tag);
      setVal('im-preset-name', p.name || '');
      syncModeFields();
    }

    // Reveal the form: pre-filled for an existing preset (edit), or seeded with
    // the defaults for a new one. Hidden until this is called.
    function openForm(preset) {
      var title = el('im-form-title');
      if (preset) {
        fill(preset);
        if (title) title.textContent = STRINGS.formEdit;
      } else {
        fill({ width_offset_mm: DEFAULTS.width_offset_mm, extend_mm: DEFAULTS.extend_mm,
               mode: DEFAULTS.mode, tag: DEFAULTS.tag, name: '' });
        if (title) title.textContent = STRINGS.formNew;
      }
      show('im-form-card', true);
    }
    function closeForm() { show('im-form-card', false); }

    var addBtn = el('im-add');
    if (addBtn) addBtn.addEventListener('click', function () { openForm(null); });
    var closeBtn = el('im-form-close');
    if (closeBtn) closeBtn.addEventListener('click', closeForm);
    var modeSel = el('im-mode');
    if (modeSel) modeSel.addEventListener('change', syncModeFields);

    el('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'),
        mode: val('im-mode'),
        tag: val('im-tag')
      };
      if (window.sketchup && sketchup.on_im_preset_save) {
        sketchup.on_im_preset_save(JSON.stringify(payload));
        showStatus(STRINGS.saved);
      }
    });

    var resetBtn = el('im-reset');
    if (resetBtn) {
      resetBtn.addEventListener('click', function () {
        if (window.sketchup && sketchup.on_im_reset_defaults) sketchup.on_im_reset_defaults('');
      });
    }

    // Per-row: the × button deletes; clicking elsewhere on the row opens the
    // edit form pre-filled with that preset.
    var list = el('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;
        }
        openForm(presetById(id));
      });
    }
  })();
  </script>
</body>
</html>
