<!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" min="0" 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_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>
  <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);
      });
    });
  })();
  </script>
</body>
</html>
