<!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">
      <h2 class="h6 mb-0">{{SETTINGS_TITLE}}</h2>
      <p class="text-muted small mb-0">{{SETTINGS_SUBTITLE}}</p>
    </div>

    <ul class="nav nav-tabs mb-2" id="gg-settings-main-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="gg-main-tab-user-btn" data-bs-toggle="tab" data-bs-target="#gg-main-tab-user" type="button" role="tab">{{SETTINGS_TAB_USER_INFO}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="gg-main-tab-versions-btn" data-bs-toggle="tab" data-bs-target="#gg-main-tab-versions" type="button" role="tab">{{SETTINGS_TAB_VERSIONS}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="gg-main-tab-nesting-btn" data-bs-toggle="tab" data-bs-target="#gg-main-tab-nesting" type="button" role="tab">{{SETTINGS_TAB_NESTING}}</button>
      </li>
    </ul>

    <div class="tab-content">

      <div class="tab-pane fade show active" id="gg-main-tab-user" role="tabpanel">
        <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end mb-2">
          <button type="button" class="btn btn-sm btn-warning text-nowrap flex-shrink-0" onclick="sketchup.on_upgrade_to_pro()">{{SETTINGS_GO_PRO}}</button>
          <div class="btn-group btn-group-sm flex-shrink-0" role="group" aria-label="Language">
            <button type="button" class="btn {{LANG_EN_CLASS}}" onclick="sketchup.on_set_locale('en')">EN</button>
            <button type="button" class="btn {{LANG_VI_CLASS}}" onclick="sketchup.on_set_locale('vi')">VI</button>
          </div>
          <button type="button" class="btn btn-outline-danger btn-sm" onclick="sketchup.on_sign_out()">{{SETTINGS_SIGN_OUT}}</button>
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2 mb-2 p-2 bg-white rounded border">
          <span class="fw-medium">{{USER_EMAIL}}</span>
          <span class="badge bg-primary">{{PLAN_DISPLAY}}</span>
          {{PRO_DAYS_LEFT}}
          {{UPGRADE_BTN}}
          <span class="text-muted">&#183;</span>
          <span class="text-muted small">{{SETTINGS_CURRENT_VERSION}}</span>
          <span class="fw-bold text-primary" id="cur-ver">{{CUR_VER}}</span>
        </div>

        <div class="card border mb-2">
          <div class="card-body py-2 px-3">
            <div class="d-flex gap-2 align-items-center">
              <input id="promo-code-input" type="text" class="form-control form-control-sm" placeholder="{{SETTINGS_PROMO_PLACEHOLDER}}" style="max-width:160px;text-transform:uppercase;" oninput="this.value=this.value.toUpperCase()">
              <button type="button" class="btn btn-sm btn-success" onclick="settingsUi.redeemPromo()">{{SETTINGS_PROMO_REDEEM}}</button>
              <span id="promo-status" class="small"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="gg-main-tab-versions" role="tabpanel">
        <div class="card border">
          <div id="progress" class="small text-primary text-center py-2 d-none">{{SETTINGS_DOWNLOADING}}</div>
          <div id="note" class="small text-success py-2 border-top d-none">{{SETTINGS_SWITCHED_NOTE}}</div>
          <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>{{SETTINGS_COL_VERSION}}</th>
                  <th>{{SETTINGS_COL_CHANGELOG}}</th>
                  <th>{{SETTINGS_COL_CREATED_AT}}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {{TABLE_ROWS}}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="gg-main-tab-nesting" role="tabpanel">
        <div class="mb-2">
          <h3 class="h6 mb-0">{{NESTING_SETTINGS_TITLE}}</h3>
          <p class="text-muted small mb-0">{{NESTING_SETTINGS_SUBTITLE}}</p>
        </div>
        <div class="card border">
          <div class="card-body py-2 px-3">
            <div class="mb-2">
              <label class="form-label small mb-1" for="nesting-parts-margin">{{NESTING_PARTS_MARGIN_LABEL}}</label>
              <input id="nesting-parts-margin" type="text" inputmode="decimal" class="form-control form-control-sm" value="{{NESTING_PARTS_MARGIN_VAL}}">
              <div class="form-text small">{{NESTING_PARTS_MARGIN_HINT}}</div>
            </div>
            <div class="mb-2">
              <label class="form-label small mb-1" for="nesting-sheet-border-margin">{{NESTING_SHEET_BORDER_MARGIN_LABEL}}</label>
              <input id="nesting-sheet-border-margin" type="text" inputmode="decimal" class="form-control form-control-sm" value="{{NESTING_SHEET_BORDER_MARGIN_VAL}}">
              <div class="form-text small">{{NESTING_SHEET_BORDER_MARGIN_HINT}}</div>
            </div>
            <div class="mb-2">
              <label class="form-label small mb-1" for="nesting-refine-step">{{NESTING_REFINE_STEP_LABEL}}</label>
              <input id="nesting-refine-step" type="text" inputmode="decimal" class="form-control form-control-sm" value="{{NESTING_REFINE_STEP_VAL}}">
              <div class="form-text small">{{NESTING_REFINE_STEP_HINT}}</div>
            </div>
            <div class="mb-2">
              <label class="form-label small mb-1">{{NESTING_SHEET_SIZE_LABEL}}</label>
              <div class="d-flex gap-2 align-items-center">
                <input id="nesting-sheet-w" type="text" inputmode="decimal" class="form-control form-control-sm" value="{{NESTING_SHEET_W_VAL}}" aria-label="{{NESTING_SHEET_W_LABEL}}">
                <span class="small">×</span>
                <input id="nesting-sheet-h" type="text" inputmode="decimal" class="form-control form-control-sm" value="{{NESTING_SHEET_H_VAL}}" aria-label="{{NESTING_SHEET_H_LABEL}}">
              </div>
              <div class="form-text small">{{NESTING_SHEET_SIZE_HINT}}</div>
            </div>
            <div class="mb-2 form-check">
              <input class="form-check-input" type="checkbox" id="nesting-in-holes" {{NESTING_IN_HOLES_CHECKED}}>
              <label class="form-check-label small" for="nesting-in-holes">{{NESTING_IN_HOLES_LABEL}}</label>
              <div class="form-text small">{{NESTING_IN_HOLES_HINT}}</div>
            </div>
            <div class="mb-2 form-check">
              <input class="form-check-input" type="checkbox" id="nesting-auto-cut" {{NESTING_AUTO_CUT_CHECKED}}>
              <label class="form-check-label small" for="nesting-auto-cut">{{NESTING_AUTO_CUT_LABEL}}</label>
              <div class="form-text small">{{NESTING_AUTO_CUT_HINT}}</div>
            </div>
            <div class="d-flex gap-2 align-items-center">
              <button type="button" class="btn btn-sm btn-primary" onclick="settingsUi.saveNesting()">{{NESTING_SAVE_BTN}}</button>
              <span id="nesting-status" class="small"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{BOOTSTRAP_JS}}
  <script>
  var GG_SETTINGS_STRINGS = {
    promo_enter_code: {{SETTINGS_PROMO_ENTER_CODE_JSON}},
    promo_applying: {{SETTINGS_PROMO_APPLYING_JSON}},
    nesting_saved: {{NESTING_SAVED_JSON}}
  };
  window.settingsUi = {
    showProgress: function(visible) {
      var el = document.getElementById('progress');
      if (el) el.classList.toggle('d-none', !visible);
    },
    showRowSpinner: function(version) {
      var rows = document.querySelectorAll('tbody tr');
      for (var i = 0; i < rows.length; i++) {
        var verCell = rows[i].querySelector('td.ver');
        if (verCell && verCell.textContent.trim() === version) {
          var td = rows[i].querySelector('td.td-action');
          if (td) td.innerHTML = '<span class="spinner-border spinner-border-sm text-primary" role="status"></span>';
          break;
        }
      }
    },
    redeemPromo: function() {
      var inp = document.getElementById('promo-code-input');
      var st  = document.getElementById('promo-status');
      if (!inp) return;
      var code = inp.value.trim();
      if (!code) { if (st) { st.className = 'small text-danger'; st.textContent = GG_SETTINGS_STRINGS.promo_enter_code; } return; }
      if (st) { st.className = 'small text-muted'; st.textContent = GG_SETTINGS_STRINGS.promo_applying; }
      sketchup.on_redeem_promo(code);
    },
    showPromoResult: function(ok, msg) {
      var st = document.getElementById('promo-status');
      if (!st) return;
      st.className = 'small ' + (ok ? 'text-success' : 'text-danger');
      st.textContent = msg;
    },
    saveNesting: function() {
      var p = document.getElementById('nesting-parts-margin');
      var b = document.getElementById('nesting-sheet-border-margin');
      var r = document.getElementById('nesting-refine-step');
      var h = document.getElementById('nesting-in-holes');
      var sw = document.getElementById('nesting-sheet-w');
      var sh = document.getElementById('nesting-sheet-h');
      var ac = document.getElementById('nesting-auto-cut');
      if (!p || !b) return;
      sketchup.on_nesting_save(p.value, b.value, r ? r.value : '', h && h.checked ? '1' : '0',
                               sw ? sw.value : '', sh ? sh.value : '', ac && ac.checked ? '1' : '0');
    },
    showNestingResult: function(ok, msg) {
      var st = document.getElementById('nesting-status');
      if (!st) return;
      st.className = 'small ' + (ok ? 'text-success' : 'text-danger');
      st.textContent = msg;
    }
  };
  </script>
</body>
</html>
