<!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">{{CAM_SETTINGS_TITLE}}</h2>
        <p class="text-muted small mb-0">{{CAM_SETTINGS_SUBTITLE}}</p>
      </div>
      <span id="cam-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">{{CAM_SECTION_CAM}}</div>
        <div class="row g-2">
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{CAM_LOCK_D}}</label>
            <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-lock-d" value="{{LOCK_D_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{CAM_PIN_D}}</label>
            <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-pin-d" value="{{PIN_D_MM}}">
          </div>
          <div class="col-6 col-md-4">
            <label class="form-label small mb-1">{{CAM_LOCK_EDGE}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="cam-lock-edge" value="{{LOCK_EDGE_MM}}">
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label small mb-1">{{CAM_LOCK_LAYER}}</label>
            <input type="text" class="form-control form-control-sm" id="cam-lock-layer" value="{{LOCK_LAYER}}">
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label small mb-1">{{CAM_PIN_LAYER}}</label>
            <input type="text" class="form-control form-control-sm" id="cam-pin-layer" value="{{PIN_LAYER}}">
          </div>
        </div>
      </div>
    </div>

    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{CAM_SECTION_DOWEL}}</div>
        <div class="row g-2 align-items-end">
          <div class="col-12">
            <label class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="cam-dowel-enabled" {{DOWEL_ENABLED_CHECKED}}>
              <span class="form-check-label small">{{CAM_DOWEL_ENABLED}}</span>
            </label>
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_DOWEL_D}}</label>
            <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-dowel-d" value="{{DOWEL_D_MM}}">
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_DOWEL_SPACING}}</label>
            <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="cam-dowel-spacing" value="{{DOWEL_SPACING_MM}}">
          </div>
          <div class="col-12">
            <label class="form-label small mb-1">{{CAM_DOWEL_LAYER}}</label>
            <input type="text" class="form-control form-control-sm" id="cam-dowel-layer" value="{{DOWEL_LAYER}}">
          </div>
        </div>
      </div>
    </div>

    <div class="card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="unfold-section-title">{{CAM_SECTION_SCREW}}</div>
        <div class="row g-2">
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_SCREW_D}}</label>
            <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-screw-d" value="{{SCREW_D_MM}}">
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_CAP_D}}</label>
            <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-cap-d" value="{{CAP_D_MM}}">
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_SCREW_LAYER}}</label>
            <input type="text" class="form-control form-control-sm" id="cam-screw-layer" value="{{SCREW_LAYER}}">
          </div>
          <div class="col-6">
            <label class="form-label small mb-1">{{CAM_CAP_LAYER}}</label>
            <input type="text" class="form-control form-control-sm" id="cam-cap-layer" value="{{CAP_LAYER}}">
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-sm btn-primary" id="cam-save-btn">{{CAM_SAVE}}</button>
    </div>
  </div>

  <script>
  (function () {
    var STRINGS = { saved: {{CAM_SAVED_JSON}} };

    function val(id) {
      var el = document.getElementById(id);
      return el ? el.value : '';
    }
    function checked(id) {
      var el = document.getElementById(id);
      return !!(el && el.checked);
    }
    function showStatus(text) {
      var el = document.getElementById('cam-save-status');
      if (!el) return;
      el.textContent = text;
      setTimeout(function () { el.textContent = ''; }, 1500);
    }

    document.getElementById('cam-save-btn').addEventListener('click', function () {
      var payload = {
        lock_diameter_mm: val('cam-lock-d'),
        pin_diameter_mm: val('cam-pin-d'),
        lock_edge_offset_mm: val('cam-lock-edge'),
        dowel_enabled: checked('cam-dowel-enabled'),
        dowel_diameter_mm: val('cam-dowel-d'),
        dowel_spacing_mm: val('cam-dowel-spacing'),
        screw_diameter_mm: val('cam-screw-d'),
        screw_cap_diameter_mm: val('cam-cap-d'),
        lock_layer: val('cam-lock-layer'),
        pin_layer: val('cam-pin-layer'),
        dowel_layer: val('cam-dowel-layer'),
        screw_layer: val('cam-screw-layer'),
        cap_layer: val('cam-cap-layer')
      };
      if (window.sketchup && sketchup.on_cam_settings_save) {
        sketchup.on_cam_settings_save(JSON.stringify(payload));
        showStatus(STRINGS.saved);
      }
    });
  })();
  </script>
</body>
</html>
