<!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>
  <style>
    .gg-eye { border: none; background: none; padding: 1px 2px; cursor: pointer; color: #0d6efd; line-height: 0; }
    .gg-eye .eye-off { display: none; }
    .gg-eye.off { color: #9aa0a6; }
    .gg-eye.off .eye-on { display: none; }
    .gg-eye.off .eye-off { display: inline; }
  </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">{{CAM_SETTINGS_TITLE}}</h2>
      <span id="cam-save-status" class="small text-success" style="min-width:60px;text-align:right;"></span>
    </div>

    <ul class="nav nav-tabs mb-2" id="cam-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="cam-tab-cam-btn" data-bs-toggle="tab" data-bs-target="#cam-tab-cam" type="button" role="tab">{{CAM_TAB_CAM}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="cam-tab-screw-btn" data-bs-toggle="tab" data-bs-target="#cam-tab-screw" type="button" role="tab">{{CAM_TAB_SCREW}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="cam-tab-screwcap-btn" data-bs-toggle="tab" data-bs-target="#cam-tab-screwcap" type="button" role="tab">{{CAM_TAB_SCREW_CAP}}</button>
      </li>
    </ul>

    <div class="tab-content">
      <!-- ───────── Cam lock ───────── -->
      <div class="tab-pane fade show active" id="cam-tab-cam" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="row g-2 align-items-end">
              <div class="col-8">
                <label class="form-label small mb-1">{{CAM_HUD_NAME}}</label>
                <input type="text" class="form-control form-control-sm" id="cam-name" value="{{CAM_NAME}}">
              </div>
              <div class="col-4">
                <button type="button" id="cam-visible" class="gg-eye" data-on="{{CAM_VISIBLE_DATA}}" title="{{CAM_HUD_VISIBLE}}">
                  <span class="eye-on"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg></span>
                  <span class="eye-off"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line x1="3" y1="3" x2="21" y2="21"/></svg></span>
                </button>
              </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_LAYOUT}}</div>
            <div class="row g-2">
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="cam-slots" value="{{CAM_SLOTS_VAL}}">
              </div>
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_EDGE_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="cam-edge-offset" value="{{CAM_OFF_MM}}">
              </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_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>

      <!-- ───────── Screw ───────── -->
      <div class="tab-pane fade" id="cam-tab-screw" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="row g-2 align-items-end">
              <div class="col-5">
                <label class="form-label small mb-1">{{CAM_HUD_NAME}}</label>
                <input type="text" class="form-control form-control-sm" id="screw-name" value="{{SCREW_NAME}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1">{{CAM_SCREW_FACE}}</label>
                <select class="form-select form-select-sm" id="cam-screw-face">
                  <option value="front" {{SCREW_FACE_FRONT_SEL}}>{{CAM_FACE_FRONT}}</option>
                  <option value="back" {{SCREW_FACE_BACK_SEL}}>{{CAM_FACE_BACK}}</option>
                </select>
              </div>
              <div class="col-3">
                <button type="button" id="screw-visible" class="gg-eye" data-on="{{SCREW_VISIBLE_DATA}}" title="{{CAM_HUD_VISIBLE}}">
                  <span class="eye-on"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg></span>
                  <span class="eye-off"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line x1="3" y1="3" x2="21" y2="21"/></svg></span>
                </button>
              </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_LAYOUT}}</div>
            <div class="row g-2">
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="screw-slots" value="{{SCREW_SLOTS_VAL}}">
              </div>
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_EDGE_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="screw-edge-offset" value="{{SCREW_OFF_MM}}">
              </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_SCREW_LENGTH}}</label>
                <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-screw-length" value="{{SCREW_LENGTH_MM}}">
              </div>
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_SCREW_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="cam-screw-offset" value="{{SCREW_OFFSET_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>
          </div>
        </div>
      </div>

      <!-- ───────── Screw + cap (independent params) ───────── -->
      <div class="tab-pane fade" id="cam-tab-screwcap" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="row g-2 align-items-end">
              <div class="col-5">
                <label class="form-label small mb-1">{{CAM_HUD_NAME}}</label>
                <input type="text" class="form-control form-control-sm" id="screwcap-name" value="{{SCREWCAP_NAME}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1">{{CAM_SCREW_FACE}}</label>
                <select class="form-select form-select-sm" id="cam-screwcap-face">
                  <option value="front" {{SCREWCAP_FACE_FRONT_SEL}}>{{CAM_FACE_FRONT}}</option>
                  <option value="back" {{SCREWCAP_FACE_BACK_SEL}}>{{CAM_FACE_BACK}}</option>
                </select>
              </div>
              <div class="col-3">
                <button type="button" id="screwcap-visible" class="gg-eye" data-on="{{SCREWCAP_VISIBLE_DATA}}" title="{{CAM_HUD_VISIBLE}}">
                  <span class="eye-on"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg></span>
                  <span class="eye-off"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line x1="3" y1="3" x2="21" y2="21"/></svg></span>
                </button>
              </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_LAYOUT}}</div>
            <div class="row g-2">
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="screwcap-slots" value="{{SCREWCAP_SLOTS_VAL}}">
              </div>
              <div class="col-6">
                <label class="form-label small mb-1">{{CAM_EDGE_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="screwcap-edge-offset" value="{{SCREWCAP_OFF_MM}}">
              </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 col-md-3">
                <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-screwcap-screw-d" value="{{SCREWCAP_SCREW_D_MM}}">
              </div>
              <div class="col-6 col-md-3">
                <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 col-md-3">
                <label class="form-label small mb-1">{{CAM_SCREW_LENGTH}}</label>
                <input type="number" step="0.1" min="0.1" class="form-control form-control-sm" id="cam-screwcap-length" value="{{SCREWCAP_LENGTH_MM}}">
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small mb-1">{{CAM_SCREW_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" id="cam-screwcap-offset" value="{{SCREWCAP_OFFSET_MM}}">
              </div>
              <div class="col-12">
                <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>
    </div>

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

  {{BOOTSTRAP_JS}}
  <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 eyeOn(id) {
      var b = document.getElementById(id);
      return !b || b.getAttribute('data-on') === '1';
    }
    ['cam-visible', 'screw-visible', 'screwcap-visible'].forEach(function (id) {
      var b = document.getElementById(id);
      if (!b) return;
      b.classList.toggle('off', b.getAttribute('data-on') !== '1');
      b.addEventListener('click', function () {
        var on = b.getAttribute('data-on') !== '1';
        b.setAttribute('data-on', on ? '1' : '0');
        b.classList.toggle('off', !on);
      });
    });
    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 = {
        cam_slots: val('cam-slots'),
        cam_slot_offset_mm: val('cam-edge-offset'),
        screw_slots: val('screw-slots'),
        screw_slot_offset_mm: val('screw-edge-offset'),
        screw_cap_slots: val('screwcap-slots'),
        screw_cap_slot_offset_mm: val('screwcap-edge-offset'),
        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'),
        screw_length_mm: val('cam-screw-length'),
        screw_edge_offset_mm: val('cam-screw-offset'),
        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'),
        cam_name: val('cam-name'),
        screw_name: val('screw-name'),
        screw_cap_name: val('screwcap-name'),
        cam_visible: eyeOn('cam-visible'),
        screw_visible: eyeOn('screw-visible'),
        screw_cap_visible: eyeOn('screwcap-visible'),
        screw_mark_back_face: (val('cam-screw-face') === 'back'),
        screw_cap_shank_diameter_mm: val('cam-screwcap-screw-d'),
        screw_cap_length_mm: val('cam-screwcap-length'),
        screw_cap_edge_offset_mm: val('cam-screwcap-offset'),
        screw_cap_mark_back_face: (val('cam-screwcap-face') === 'back')
      };
      if (window.sketchup && sketchup.on_cam_settings_save) {
        sketchup.on_cam_settings_save(JSON.stringify(payload));
        showStatus(STRINGS.saved);
      }
    });

    var resetBtn = document.getElementById('cam-reset-btn');
    if (resetBtn) {
      resetBtn.addEventListener('click', function () {
        if (window.sketchup && sketchup.on_cam_settings_reset) {
          sketchup.on_cam_settings_reset('');
        }
      });
    }
  })();
  </script>
</body>
</html>
