<!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">
      <div>
        <h2 class="h6 mb-0">{{UNFOLD_SETTINGS_TITLE}}</h2>
        <p class="text-muted small mb-0">{{UNFOLD_SETTINGS_SUBTITLE}}</p>
      </div>
      <span id="unfold-save-status" class="small text-success" style="min-width:60px;text-align:right;"></span>
    </div>

    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{UNFOLD_SETTINGS_MODE_SECTION}}</div>
        <div class="d-flex gap-3">
          <label class="form-check form-check-inline mb-0">
            <input class="form-check-input" type="radio" name="unfold_mode" value="pocket" {{UNFOLD_MODE_POCKET_CHECKED}}>
            <span class="form-check-label">{{UNFOLD_HUD_POCKET}}</span>
          </label>
          <label class="form-check form-check-inline mb-0">
            <input class="form-check-input" type="radio" name="unfold_mode" value="zigzag" {{UNFOLD_MODE_ZIGZAG_CHECKED}}>
            <span class="form-check-label">{{UNFOLD_HUD_ZIGZAG}}</span>
          </label>
        </div>
      </div>
    </div>

    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{UNFOLD_SETTINGS_PARAMS_SECTION}}</div>
        <div class="row g-2">
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_ANG}}</label>
            <input type="number" step="1" min="1" class="form-control form-control-sm js-unfold-num" data-unfold-key="strip_angle_deg" value="{{STRIP_ANGLE_DEG}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_TOOL}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="tool_diameter_mm" value="{{TOOL_DIAMETER_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_MEAT}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="meat_clearance_mm" value="{{MEAT_CLEARANCE_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_KERF}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="kerf_extend_mm" value="{{KERF_EXTEND_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_HOLD}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="hold_offset_mm" value="{{HOLD_OFFSET_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_THICK}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="board_thickness_mm" value="{{BOARD_THICKNESS_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_BONEW}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="backbone_width_mm" value="{{BACKBONE_WIDTH_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_MIDOFF}}</label>
            <input type="number" step="0.1" class="form-control form-control-sm js-unfold-num" data-unfold-key="bone_middle_offset_mm" value="{{BONE_MIDDLE_OFFSET_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_OUTEROFF}}</label>
            <input type="number" step="0.1" class="form-control form-control-sm js-unfold-num" data-unfold-key="bone_outer_offset_mm" value="{{BONE_OUTER_OFFSET_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_INNEROFF}}</label>
            <input type="number" step="0.1" class="form-control form-control-sm js-unfold-num" data-unfold-key="bone_inner_offset_mm" value="{{BONE_INNER_OFFSET_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_MIDTRIM}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="bone_middle_trim_mm" value="{{BONE_MIDDLE_TRIM_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_CURVT}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="curved_segment_thickness_mm" value="{{CURVED_SEGMENT_THICKNESS_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{UNFOLD_HUD_FILLERTRIM}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm js-unfold-num" data-unfold-key="filler_trim_mm" value="{{FILLER_TRIM_MM}}">
          </div>
        </div>
      </div>
    </div>

    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{UNFOLD_SETTINGS_TAGS_SECTION}}</div>
        <div class="row g-2">
          <div class="col-12">
            <label class="form-label small mb-1">{{UNFOLD_HUD_PATHTAG}}</label>
            <input type="text" class="form-control form-control-sm js-unfold-str" data-unfold-key="boustrophedon_path_group_name" value="{{BOUSTROPHEDON_PATH_GROUP_NAME}}">
          </div>
          <div class="col-12">
            <label class="form-label small mb-1">{{UNFOLD_HUD_HOLDTAG}}</label>
            <input type="text" class="form-control form-control-sm js-unfold-str" data-unfold-key="hold_group_name" value="{{HOLD_GROUP_NAME}}">
          </div>
          <div class="col-12">
            <label class="form-label small mb-1">{{UNFOLD_HUD_FLESHTAG}}</label>
            <input type="text" class="form-control form-control-sm js-unfold-str" data-unfold-key="fleshing_group_name" value="{{FLESHING_GROUP_NAME}}">
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-end gap-2 mt-2 mb-1">
      <button type="button" id="unfold-reset-btn" class="btn btn-outline-secondary btn-sm">{{UNFOLD_SETTINGS_RESET}}</button>
      <button type="button" id="unfold-save-btn" class="btn btn-primary btn-sm">{{UNFOLD_SETTINGS_SAVE}}</button>
    </div>
  </div>
  <script>
  (function () {
    var GG_UNFOLD_STRINGS = {
      saved: {{UNFOLD_SAVED_JSON}},
      save_failed: {{UNFOLD_SAVE_FAILED_JSON}}
    };
    function showStatus(ok, key) {
      var st = document.getElementById('unfold-save-status');
      if (!st) return;
      st.className = ok ? 'small text-success' : 'small text-danger';
      st.textContent = ok ? GG_UNFOLD_STRINGS.saved : GG_UNFOLD_STRINGS.save_failed;
      if (key) st.textContent += ' (' + key + ')';
    }
    document.querySelectorAll('input[name="unfold_mode"]').forEach(function (el) {
      el.addEventListener('change', function () {
        if (!el.checked) return;
        sketchup.on_unfold_mode_changed(el.value === 'pocket');
        showStatus(true, 'mode');
      });
    });
    document.querySelectorAll('.js-unfold-bool').forEach(function (el) {
      el.addEventListener('change', function () {
        sketchup.on_unfold_setting_changed(el.dataset.unfoldKey, el.checked);
        showStatus(true, el.dataset.unfoldKey);
      });
    });
    document.querySelectorAll('.js-unfold-num').forEach(function (el) {
      el.addEventListener('change', function () {
        sketchup.on_unfold_setting_changed(el.dataset.unfoldKey, el.value);
        showStatus(true, el.dataset.unfoldKey);
      });
    });
    document.querySelectorAll('.js-unfold-str').forEach(function (el) {
      el.addEventListener('change', function () {
        sketchup.on_unfold_setting_changed(el.dataset.unfoldKey, el.value);
        showStatus(true, el.dataset.unfoldKey);
      });
    });

    // Gather every field's current value so "Save settings" persists them in
    // one call (even values typed but not yet blurred/changed).
    function collectSettings() {
      var out = {};
      document.querySelectorAll('.js-unfold-num, .js-unfold-str').forEach(function (el) {
        out[el.dataset.unfoldKey] = el.value;
      });
      document.querySelectorAll('.js-unfold-bool').forEach(function (el) {
        out[el.dataset.unfoldKey] = el.checked;
      });
      var modeEl = document.querySelector('input[name="unfold_mode"]:checked');
      if (modeEl) out.fleshing_enabled = (modeEl.value === 'pocket');
      return out;
    }

    var saveBtn = document.getElementById('unfold-save-btn');
    if (saveBtn) {
      saveBtn.addEventListener('click', function () {
        sketchup.on_unfold_save_all(JSON.stringify(collectSettings()));
        showStatus(true, 'all');
      });
    }
    var resetBtn = document.getElementById('unfold-reset-btn');
    if (resetBtn) {
      resetBtn.addEventListener('click', function () {
        sketchup.on_unfold_reset_defaults(); // Ruby re-renders the dialog with defaults
      });
    }
  })();
  </script>
</body>
</html>
