<!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>
    .tm-status { min-width: 60px; }
    .tm-guide-svg { width: 100%; height: auto; max-height: 330px; }
    .tm-svg-board      { fill: #f1f3f5; stroke: #adb5bd; stroke-width: 0.6; }
    .tm-svg-board-side { fill: #ced4da; stroke: #adb5bd; stroke-width: 0.6; }
    .tm-svg-cut        { fill: #f783ac; stroke: #a61e4d; stroke-width: 0.8; }
    .tm-svg-plus-w     { fill: #8ce99a; stroke: #2f9e44; stroke-width: 0.7; }
    .tm-svg-plus-l     { fill: #ffc078; stroke: #e8590c; stroke-width: 0.7; }
    .tm-svg-tenon      { fill: #f783ac; stroke: #a61e4d; stroke-width: 0.8; }
    .tm-svg-pocket     { fill: #ffd8a8; stroke: #e8590c; stroke-width: 0.8; }
    .tm-svg-tenon-side { fill: #d6558a; stroke: #a61e4d; stroke-width: 0.8; }
    .tm-svg-outline { fill: none; stroke: #0d6efd; stroke-width: 1.1; stroke-linejoin: round; }
    .tm-svg-marker  { fill: none; stroke: #1971c2; stroke-width: 1.6; stroke-linejoin: round;
                      stroke-linecap: round; }
    .tm-svg-guide   { fill: none; stroke: #6c757d; stroke-width: 0.4; stroke-dasharray: 2 2; }
    .tm-svg-mark    { fill: #0d6efd; }
    .tm-svg-mark-bg { fill: #ffffff; stroke: #0d6efd; stroke-width: 0.5; }
    .tm-mark {
      display: inline-block; min-width: 1.4em; text-align: center;
      border: 1px solid #0d6efd; border-radius: 50%; color: #0d6efd; font-weight: 600;
    }
    .tm-guide-table td { vertical-align: top; }
  </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">{{TENON_SETTINGS_TITLE}}</h2>
      <span id="tm-save-status" class="small text-success text-end tm-status"></span>
    </div>

    <ul class="nav nav-tabs mb-2" id="tm-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tm-tab-square-btn" data-bs-toggle="tab" data-bs-target="#tm-tab-square" data-joint="square" type="button" role="tab">{{TENON_TAB_SQUARE}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tm-tab-dogbone-btn" data-bs-toggle="tab" data-bs-target="#tm-tab-dogbone" data-joint="dogbone" type="button" role="tab">{{TENON_TAB_DOGBONE}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tm-tab-moccau-btn" data-bs-toggle="tab" data-bs-target="#tm-tab-moccau" data-joint="moccau" type="button" role="tab">{{TENON_TAB_MOCCAU}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tm-tab-ngam-btn" data-bs-toggle="tab" data-bs-target="#tm-tab-ngam" data-joint="ngam" type="button" role="tab">{{TENON_TAB_NGAM}}</button>
      </li>
    </ul>

    <div class="tab-content">
      <!-- ───────── Mộng vuông ───────── -->
      <div class="tab-pane fade show active" id="tm-tab-square" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_PARAMS}}</div>
            <div class="row g-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-slots">{{TENON_HUD_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="tm-square-slots" value="{{TM_SQUARE_SLOTS_VAL}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-length">{{TENON_HUD_LENGTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-square-length" value="{{TM_SQUARE_LENGTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-depth">{{TENON_HUD_DEPTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-square-depth" value="{{TM_SQUARE_DEPTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-offset">{{TENON_HUD_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-square-offset" value="{{TM_SQUARE_OFFSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-extend">{{TENON_HUD_EXTEND}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-square-extend" value="{{TM_SQUARE_EXTEND_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-width-plus">{{TENON_HUD_WIDTH_PLUS}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-square-width-plus" value="{{TM_SQUARE_WIDTH_PLUS_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-square-tag">{{TENON_HUD_TAG}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-square-tag" value="{{TM_SQUARE_TAG}}">
              </div>
              <div class="col-12">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="tm-square-mortise-enabled" {{TM_SQUARE_MORTISE_ENABLED_CHECKED}}>
                  <label class="form-check-label small" for="tm-square-mortise-enabled">{{TENON_HUD_MORTISE}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_GUIDE}}</div>
            <div id="tm-guide-fig-square">{{TM_GUIDE_SVG_SQUARE}}</div>
            <table class="table table-sm small tm-guide-table mb-0">
              <tbody id="tm-guide-rows-square">{{TM_GUIDE_ROWS_SQUARE}}</tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ───────── Mộng xương chó ───────── -->
      <div class="tab-pane fade" id="tm-tab-dogbone" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_PARAMS}}</div>
            <div class="row g-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-slots">{{TENON_HUD_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="tm-dogbone-slots" value="{{TM_DOGBONE_SLOTS_VAL}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-length">{{TENON_HUD_LENGTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-length" value="{{TM_DOGBONE_LENGTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-depth">{{TENON_HUD_DEPTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-depth" value="{{TM_DOGBONE_DEPTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-offset">{{TENON_HUD_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-offset" value="{{TM_DOGBONE_OFFSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-extend">{{TENON_HUD_EXTEND}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-extend" value="{{TM_DOGBONE_EXTEND_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-width-plus">{{TENON_HUD_WIDTH_PLUS}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-width-plus" value="{{TM_DOGBONE_WIDTH_PLUS_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-bit">{{TENON_HUD_BIT_DIA}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-dogbone-bit" value="{{TM_BIT_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-dogbone-tag">{{TENON_HUD_TAG}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-dogbone-tag" value="{{TM_DOGBONE_TAG}}">
              </div>
              <div class="col-12">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="tm-dogbone-mortise-enabled" {{TM_DOGBONE_MORTISE_ENABLED_CHECKED}}>
                  <label class="form-check-label small" for="tm-dogbone-mortise-enabled">{{TENON_HUD_MORTISE}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_GUIDE}}</div>
            <div id="tm-guide-fig-dogbone">{{TM_GUIDE_SVG_DOGBONE}}</div>
            <table class="table table-sm small tm-guide-table mb-0">
              <tbody id="tm-guide-rows-dogbone">{{TM_GUIDE_ROWS_DOGBONE}}</tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ───────── Mộng móc câu — 2 đoạn (đầu / đuôi) + dịch ───────── -->
      <div class="tab-pane fade" id="tm-tab-moccau" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_PARAMS}}</div>
            <div class="row g-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-slots">{{TENON_HUD_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="tm-moccau-slots" value="{{TM_MOCCAU_SLOTS_VAL}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-length">{{TENON_HUD_LENGTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-length" value="{{TM_MOCCAU_LENGTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-depth">{{TENON_HUD_DEPTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-depth" value="{{TM_MOCCAU_DEPTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-offset">{{TENON_HUD_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-offset" value="{{TM_MOCCAU_OFFSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-extend">{{TENON_HUD_EXTEND}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-extend" value="{{TM_MOCCAU_EXTEND_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-width-plus">{{TENON_HUD_WIDTH_PLUS}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-width-plus" value="{{TM_MOCCAU_WIDTH_PLUS_MM}}">
              </div>
              <div class="col-12">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="tm-moccau-mortise-enabled" {{TM_MOCCAU_MORTISE_ENABLED_CHECKED}}>
                  <label class="form-check-label small" for="tm-moccau-mortise-enabled">{{TENON_HUD_MORTISE}}</label>
                </div>
              </div>
            </div>
            <div class="row g-2 mt-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-head-len">{{TENON_HUD_MOC_CAU_HEAD_LEN}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-head-len" value="{{TM_MOCCAU_HEAD_LEN_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-tail-len">{{TENON_HUD_MOC_CAU_TAIL_LEN}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-tail-len" value="{{TM_MOCCAU_TAIL_LEN_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-head-shift">{{TENON_HUD_MOC_CAU_HEAD_SHIFT}}</label>
                <input type="number" step="0.1" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-head-shift" value="{{TM_MOCCAU_HEAD_SHIFT_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-tail-shift">{{TENON_HUD_MOC_CAU_TAIL_SHIFT}}</label>
                <input type="number" step="0.1" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-moccau-tail-shift" value="{{TM_MOCCAU_TAIL_SHIFT_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-moccau-tag">{{TENON_HUD_MOC_CAU_TAG}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-moccau-tag" value="{{TM_MOCCAU_TAG}}">
              </div>
            </div>
          </div>
        </div>
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_GUIDE}}</div>
            <div id="tm-guide-fig-moccau">{{TM_GUIDE_SVG_MOCCAU}}</div>
            <table class="table table-sm small tm-guide-table mb-0">
              <tbody id="tm-guide-rows-moccau">{{TM_GUIDE_ROWS_MOCCAU}}</tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ───────── Mộng ngàm — every adjustable knob ───────── -->
      <div class="tab-pane fade" id="tm-tab-ngam" role="tabpanel">
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_PARAMS}}</div>
            <div class="row g-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-slots">{{TENON_HUD_SLOTS}}</label>
                <input type="number" step="1" min="1" class="form-control form-control-sm" id="tm-ngam-slots" value="{{TM_NGAM_SLOTS_VAL}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-length">{{TENON_HUD_LENGTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-length" value="{{TM_NGAM_LENGTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-depth">{{TENON_HUD_DEPTH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-depth" value="{{TM_NGAM_DEPTH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-offset">{{TENON_HUD_OFFSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-offset" value="{{TM_NGAM_OFFSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-extend">{{TENON_HUD_EXTEND}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-extend" value="{{TM_NGAM_EXTEND_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-width-plus">{{TENON_HUD_WIDTH_PLUS}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-width-plus" value="{{TM_NGAM_WIDTH_PLUS_MM}}">
              </div>
              <div class="col-12">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="tm-ngam-mortise-enabled" {{TM_NGAM_MORTISE_ENABLED_CHECKED}}>
                  <label class="form-check-label small" for="tm-ngam-mortise-enabled">{{TENON_HUD_MORTISE}}</label>
                </div>
              </div>
            </div>
            <div class="row g-2 mt-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-protrude">{{TENON_HUD_NGAM_PROTRUDE}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-protrude" value="{{TM_NGAM_PROTRUDE_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-stretch">{{TENON_HUD_NGAM_STRETCH}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-stretch" value="{{TM_NGAM_STRETCH_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-throat-drop">{{TENON_HUD_NGAM_THROAT}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-throat-drop" value="{{TM_NGAM_THROAT_DROP_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-hook-inset">{{TENON_HUD_NGAM_HOOK_INSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-hook-inset" value="{{TM_NGAM_HOOK_INSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-hook-tail-inset">{{TENON_HUD_NGAM_HOOK_TAIL_INSET}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-hook-tail-inset" value="{{TM_NGAM_HOOK_TAIL_INSET_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-recess">{{TENON_HUD_NGAM_RECESS}}</label>
                <input type="number" step="0.1" min="0" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-recess" value="{{TM_NGAM_RECESS_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-head-recess">{{TENON_HUD_NGAM_HEAD_RECESS}}</label>
                <input type="number" step="0.1" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-head-recess" value="{{TM_NGAM_HEAD_RECESS_MM}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-tail-recess">{{TENON_HUD_NGAM_TAIL_RECESS}}</label>
                <input type="number" step="0.1" class="form-control form-control-sm" placeholder="{{TENON_UNIT_MM}}" id="tm-ngam-tail-recess" value="{{TM_NGAM_TAIL_RECESS_MM}}">
              </div>
            </div>
            <div class="row g-2 mt-2">
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-mortise-tag">{{TENON_HUD_NGAM_TAG}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-ngam-mortise-tag" value="{{TM_NGAM_MORTISE_TAG}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-pocket-tag">{{TENON_HUD_NGAM_POCKET}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-ngam-pocket-tag" value="{{TM_NGAM_POCKET_TAG}}">
              </div>
              <div class="col-4">
                <label class="form-label small mb-1" for="tm-ngam-hook-name">{{TENON_HUD_NGAM_HOOK}}</label>
                <input type="text" class="form-control form-control-sm" id="tm-ngam-hook-name" value="{{TM_NGAM_HOOK_NAME}}">
              </div>
            </div>
          </div>
        </div>
        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="unfold-section-title">{{TENON_SETTINGS_GUIDE}}</div>
            <div id="tm-guide-fig-ngam">{{TM_GUIDE_SVG_NGAM}}</div>
            <table class="table table-sm small tm-guide-table mb-0">
              <tbody id="tm-guide-rows-ngam">{{TM_GUIDE_ROWS_NGAM}}</tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

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

  {{BOOTSTRAP_JS}}
  <script>
  (function () {
    var STRINGS = { saved: {{TENON_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);
    }
    // Bộ 7 ô + tag mà MỌI loại mộng đều có, đọc theo tiền tố id của loại đó.
    function shared(slug) {
      return {
        slots: val('tm-' + slug + '-slots'),
        patch_width_mm: val('tm-' + slug + '-length'),
        depth_mm: val('tm-' + slug + '-depth'),
        offset_mm: val('tm-' + slug + '-offset'),
        mortise_extend_mm: val('tm-' + slug + '-extend'),
        mortise_width_offset_mm: val('tm-' + slug + '-width-plus'),
        mortise_enabled: checked('tm-' + slug + '-mortise-enabled')
      };
    }
    function merge(base, extra) {
      Object.keys(extra).forEach(function (k) { base[k] = extra[k]; });
      return base;
    }

    // loại mộng (khoá cấu hình) -> tiền tố id trong HTML
    var SLUGS = { square: 'square', dogbone: 'dogbone', moc_cau: 'moccau', ngam: 'ngam' };

    // MỘT hàm đọc form cho cả Lưu lẫn Xem trước. Tách hai chỗ đọc thì hình xem
    // trước dựng từ bộ ô này còn bản lưu từ bộ ô khác.
    function formFor(joint) {
      var slug = SLUGS[joint];
      if (joint === 'square') {
        return merge(shared(slug), { mortise_tag_name: val('tm-square-tag') });
      }
      if (joint === 'dogbone') {
        return merge(shared(slug), {
          mortise_tag_name: val('tm-dogbone-tag'),
          bit_diameter_mm: val('tm-dogbone-bit')
        });
      }
      if (joint === 'moc_cau') {
        return merge(shared(slug), {
          moc_cau_head_len_mm: val('tm-moccau-head-len'),
          moc_cau_tail_len_mm: val('tm-moccau-tail-len'),
          moc_cau_head_shift_mm: val('tm-moccau-head-shift'),
          moc_cau_tail_shift_mm: val('tm-moccau-tail-shift'),
          moc_cau_tag: val('tm-moccau-tag')
        });
      }
      return merge(shared(slug), {
        ngam_protrude_mm: val('tm-ngam-protrude'),
        ngam_stretch_mm: val('tm-ngam-stretch'),
        ngam_throat_drop_mm: val('tm-ngam-throat-drop'),
        ngam_hook_inset_mm: val('tm-ngam-hook-inset'),
        ngam_hook_tail_inset_mm: val('tm-ngam-hook-tail-inset'),
        ngam_recess_mm: val('tm-ngam-recess'),
        ngam_head_recess_mm: val('tm-ngam-head-recess'),
        ngam_tail_recess_mm: val('tm-ngam-tail-recess'),
        ngam_mortise_tag: val('tm-ngam-mortise-tag'),
        ngam_pocket_tag: val('tm-ngam-pocket-tag'),
        ngam_hook_name: val('tm-ngam-hook-name')
      });
    }

    // Ruby dựng lại hình rồi gọi ngược vào đây.
    window.tmApplyPreview = function (p) {
      if (!p || !p.joint) return;
      var slug = SLUGS[p.joint];
      var fig = document.getElementById('tm-guide-fig-' + slug);
      var rows = document.getElementById('tm-guide-rows-' + slug);
      if (fig && typeof p.svg === 'string') { fig.innerHTML = p.svg; }
      if (rows && typeof p.rows === 'string') { rows.innerHTML = p.rows; }
    };

    // Gõ tới đâu vẽ lại tới đó. Có hoãn: mỗi phím một lần dựng hình bên Ruby là
    // dialog giật.
    var previewTimer = null;
    function requestPreview(joint) {
      if (!window.sketchup || !sketchup.on_tenon_preview) return;
      if (previewTimer) { clearTimeout(previewTimer); }
      previewTimer = setTimeout(function () {
        previewTimer = null;
        sketchup.on_tenon_preview(JSON.stringify({ joint: joint, values: formFor(joint) }));
      }, 150);
    }

    Object.keys(SLUGS).forEach(function (joint) {
      var pane = document.getElementById('tm-tab-' + SLUGS[joint]);
      if (!pane) return;
      pane.addEventListener('input', function () { requestPreview(joint); });
      pane.addEventListener('change', function () { requestPreview(joint); });
    });

    function showStatus(text) {
      var el = document.getElementById('tm-save-status');
      if (!el) return;
      el.textContent = text;
      setTimeout(function () { el.textContent = ''; }, 1500);
    }

    document.getElementById('tm-save-btn').addEventListener('click', function () {
      var payload = {};
      Object.keys(SLUGS).forEach(function (joint) { payload[joint] = formFor(joint); });
      if (window.sketchup && sketchup.on_tenon_settings_save) {
        sketchup.on_tenon_settings_save(JSON.stringify(payload));
        showStatus(STRINGS.saved);
      }
    });

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