<!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-4">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start mb-3">
      <div>
        <h2 class="h5 mb-1">GG Cabinet Tools</h2>
        <p class="text-muted small mb-0">{{AUTH_SUBTITLE}}</p>
      </div>
      <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>
    </div>

    <ul class="nav nav-tabs mb-3" id="auth-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-signin" data-bs-toggle="tab" data-bs-target="#panel-signin" type="button" role="tab">{{AUTH_SIGNIN_TAB}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-signup" data-bs-toggle="tab" data-bs-target="#panel-signup" type="button" role="tab">{{AUTH_SIGNUP_TAB}}</button>
      </li>
    </ul>

    <div id="signin-success" class="alert alert-success py-2 small d-none" role="alert"></div>

    <div class="tab-content" id="auth-tab-content">
      <div class="tab-pane fade show active" id="panel-signin" role="tabpanel">
        <form onsubmit="sketchup.on_login(document.getElementById('signin-email').value, document.getElementById('signin-password').value); return false;">
          <div class="mb-2">
            <label for="signin-email" class="form-label small">{{AUTH_EMAIL_LABEL}}</label>
            <input type="email" class="form-control form-control-sm" id="signin-email" placeholder="{{AUTH_EMAIL_PLACEHOLDER}}">
          </div>
          <div class="mb-2">
            <label for="signin-password" class="form-label small">{{AUTH_PASSWORD_LABEL}}</label>
            <input type="password" class="form-control form-control-sm" id="signin-password" placeholder="{{AUTH_PASSWORD_PLACEHOLDER}}">
          </div>
          <div id="signin-error" class="alert alert-danger py-2 small d-none" role="alert"></div>
          <div id="signin-loading" class="alert alert-info py-2 small d-none" role="status">{{AUTH_SIGNING_IN}}</div>
          <button type="submit" class="btn btn-primary btn-sm w-100 mb-2" id="signin-btn">{{AUTH_SIGNIN_BTN}}</button>
        </form>
        <div class="d-flex justify-content-between">
          <a href="#" class="small text-primary" onclick="sketchup.on_show_panel('signup'); return false;">{{AUTH_CREATE_ACCOUNT_LINK}}</a>
          <a href="#" class="small text-muted" onclick="authUi.showForgotPanel(); return false;">{{AUTH_FORGOT_PASSWORD_LINK}}</a>
        </div>
      </div>

      <div class="tab-pane fade" id="panel-signup" role="tabpanel">
        <form onsubmit="sketchup.on_sign_up(document.getElementById('signup-email').value, document.getElementById('signup-password').value, document.getElementById('signup-password-confirm').value); return false;">
          <div class="mb-2">
            <label for="signup-email" class="form-label small">{{AUTH_EMAIL_LABEL}}</label>
            <input type="email" class="form-control form-control-sm" id="signup-email" placeholder="{{AUTH_EMAIL_PLACEHOLDER}}">
          </div>
          <div class="mb-2">
            <label for="signup-password" class="form-label small">{{AUTH_PASSWORD_LABEL}}</label>
            <input type="password" class="form-control form-control-sm" id="signup-password" placeholder="{{AUTH_PASSWORD_PLACEHOLDER}}">
          </div>
          <div class="mb-2">
            <label for="signup-password-confirm" class="form-label small">{{AUTH_PASSWORD_CONFIRM_LABEL}}</label>
            <input type="password" class="form-control form-control-sm" id="signup-password-confirm" placeholder="{{AUTH_PASSWORD_PLACEHOLDER}}">
          </div>
          <div id="signup-error" class="alert alert-danger py-2 small d-none" role="alert"></div>
          <div id="signup-loading" class="alert alert-info py-2 small d-none" role="status">{{AUTH_CREATING_ACCOUNT}}</div>
          <button type="submit" class="btn btn-primary btn-sm w-100 mb-2" id="signup-btn">{{AUTH_SIGNUP_BTN}}</button>
        </form>
        <div id="signup-success" class="d-none">
          <div class="alert alert-success py-2 small" role="alert">
            <strong>{{AUTH_ACCOUNT_CREATED_TITLE}}</strong> {{AUTH_ACCOUNT_CREATED_BODY}}
          </div>
          <p class="text-muted small mb-1">{{AUTH_REDIRECT_COUNTDOWN}}<span id="signup-countdown"></span>...</p>
        </div>
        <a href="#" class="small text-primary" id="signup-signin-link" onclick="sketchup.on_show_panel('signin'); return false;">{{AUTH_ALREADY_HAVE_ACCOUNT}}</a>
      </div>
    </div>

    <div id="panel-forgot" class="d-none">
      <h6 class="mb-1">{{AUTH_FORGOT_PASSWORD_TITLE}}</h6>
      <p class="text-muted small mb-3">{{AUTH_FORGOT_PASSWORD_SUBTITLE}}</p>
      <form id="forgot-form" onsubmit="sketchup.on_forgot_password(document.getElementById('forgot-email').value); return false;">
        <div class="mb-2">
          <label for="forgot-email" class="form-label small">{{AUTH_EMAIL_LABEL}}</label>
          <input type="email" class="form-control form-control-sm" id="forgot-email" placeholder="{{AUTH_EMAIL_PLACEHOLDER}}">
        </div>
        <div id="forgot-error" class="alert alert-danger py-2 small d-none" role="alert"></div>
        <div id="forgot-loading" class="alert alert-info py-2 small d-none" role="status">{{AUTH_FORGOT_PASSWORD_SENDING}}</div>
        <button type="submit" class="btn btn-primary btn-sm w-100 mb-2" id="forgot-btn">{{AUTH_FORGOT_PASSWORD_BTN}}</button>
      </form>
      <div id="forgot-success" class="d-none">
        <div class="alert alert-success py-2 small" role="alert">
          <strong>{{AUTH_FORGOT_PASSWORD_SUCCESS_TITLE}}</strong> {{AUTH_FORGOT_PASSWORD_SUCCESS_BODY}}
        </div>
      </div>
      <a href="#" class="small text-primary" onclick="authUi.hideForgotPanel(); return false;">{{AUTH_BACK_TO_SIGNIN}}</a>
    </div>
  </div>
  {{BOOTSTRAP_JS}}
  <script>
  var GG_AUTH_STRINGS = {
    verify_banner: {{AUTH_VERIFY_BANNER_JSON}},
    redirect_countdown: {{AUTH_REDIRECT_COUNTDOWN_JSON}}
  };
  window.authUi = {
    switchPanel: function(panel) {
      var tabId = panel === 'signup' ? 'tab-signup' : 'tab-signin';
      var t = document.getElementById(tabId);
      if (t) t.click();
    },
    showForgotPanel: function() {
      document.getElementById('auth-tabs').classList.add('d-none');
      document.getElementById('auth-tab-content').classList.add('d-none');
      document.getElementById('panel-forgot').classList.remove('d-none');
      var signinEmail = document.getElementById('signin-email');
      var forgotEmail = document.getElementById('forgot-email');
      if (forgotEmail && signinEmail) forgotEmail.value = signinEmail.value || '';
    },
    hideForgotPanel: function() {
      document.getElementById('panel-forgot').classList.add('d-none');
      document.getElementById('forgot-success').classList.add('d-none');
      document.getElementById('forgot-form').classList.remove('d-none');
      document.getElementById('forgot-error').classList.add('d-none');
      document.getElementById('auth-tabs').classList.remove('d-none');
      document.getElementById('auth-tab-content').classList.remove('d-none');
      var tabBtn = document.getElementById('tab-signin');
      if (tabBtn) tabBtn.click();
    },
    showSigninLoading: function(visible) {
      var loading = document.getElementById('signin-loading');
      var btn = document.getElementById('signin-btn');
      var err = document.getElementById('signin-error');
      if (loading) loading.classList.toggle('d-none', !visible);
      if (btn) btn.disabled = visible;
      if (err) err.classList.add('d-none');
    },
    showSigninError: function(msg) {
      var e = document.getElementById('signin-error');
      if (e) { e.textContent = msg; e.classList.remove('d-none'); }
    },
    showSignupLoading: function(visible) {
      var loading = document.getElementById('signup-loading');
      var btn = document.getElementById('signup-btn');
      var err = document.getElementById('signup-error');
      if (loading) loading.classList.toggle('d-none', !visible);
      if (btn) btn.disabled = visible;
      if (err) err.classList.add('d-none');
    },
    showSignupError: function(msg) {
      var e = document.getElementById('signup-error');
      if (e) { e.textContent = msg; e.classList.remove('d-none'); }
    },
    showSignupSuccess: function(msg, email) {
      var form = document.querySelector('#panel-signup form');
      var link = document.getElementById('signup-signin-link');
      var success = document.getElementById('signup-success');
      var countdown = document.getElementById('signup-countdown');
      if (form) form.classList.add('d-none');
      if (link) link.classList.add('d-none');
      if (success) success.classList.remove('d-none');
      var secs = 4;
      if (countdown) countdown.textContent = ' in ' + secs;
      var iv = setInterval(function() {
        secs -= 1;
        if (secs > 0) {
          if (countdown) countdown.textContent = ' in ' + secs;
        } else {
          clearInterval(iv);
          var s = document.getElementById('signin-success');
          var emailEl = document.getElementById('signin-email');
          var tab = document.getElementById('tab-signin');
          if (s) { s.textContent = GG_AUTH_STRINGS.verify_banner; s.classList.remove('d-none'); }
          if (emailEl) emailEl.value = email || '';
          if (tab) tab.click();
          if (form) form.classList.remove('d-none');
          if (link) link.classList.remove('d-none');
          if (success) success.classList.add('d-none');
        }
      }, 1000);
    },
    showForgotPasswordLoading: function(visible) {
      var loading = document.getElementById('forgot-loading');
      var btn = document.getElementById('forgot-btn');
      var err = document.getElementById('forgot-error');
      if (loading) loading.classList.toggle('d-none', !visible);
      if (btn) btn.disabled = visible;
      if (err) err.classList.add('d-none');
    },
    showForgotPasswordError: function(msg) {
      var e = document.getElementById('forgot-error');
      if (e) { e.textContent = msg; e.classList.remove('d-none'); }
      var loading = document.getElementById('forgot-loading');
      if (loading) loading.classList.add('d-none');
      var btn = document.getElementById('forgot-btn');
      if (btn) btn.disabled = false;
    },
    showForgotPasswordSuccess: function() {
      var form = document.getElementById('forgot-form');
      var success = document.getElementById('forgot-success');
      var loading = document.getElementById('forgot-loading');
      if (form) form.classList.add('d-none');
      if (loading) loading.classList.add('d-none');
      if (success) success.classList.remove('d-none');
    }
  };
  </script>
</body>
</html>
