<!DOCTYPE html>
<html lang="id" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Daftar — KusKus</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    /* ================================================================
       CSS VARIABLES — selaras dengan landing.html, login.html, base.html
    ================================================================ */
    :root {
      --bg:         #f5f4f0;
      --bg2:        #edecea;
      --surface:    #ffffff;
      --border:     #d8d6d0;
      --border2:    #e8e6e1;
      --text:       #1a1916;
      --muted:      #7a786f;
      --accent:     #1a5cff;
      --accent-dim: #0a3ccc;
      --accent-bg:  rgba(26,92,255,0.08);
      --gold:       #c47d00;
      --danger:     #cc2a22;
      --shadow:     0 4px 24px rgba(0,0,0,0.08);
      --shadow-lg:  0 12px 48px rgba(0,0,0,0.12);
      --glow:       rgba(26,92,255,0.07);
    }
    [data-theme="dark"] {
      --bg:         #0d1117;
      --bg2:        #0a0e14;
      --surface:    #161b22;
      --border:     #30363d;
      --border2:    #21262d;
      --text:       #e6edf3;
      --muted:      #8b949e;
      --accent:     #58a6ff;
      --accent-dim: #1f6feb;
      --accent-bg:  rgba(88,166,255,0.10);
      --gold:       #d4a017;
      --danger:     #f85149;
      --shadow:     0 4px 24px rgba(0,0,0,0.40);
      --shadow-lg:  0 12px 48px rgba(0,0,0,0.55);
      --glow:       rgba(88,166,255,0.09);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      position: relative;
      overflow-x: hidden;
      transition: background .25s, color .25s;
    }

    /* Background texture — sama dengan landing & login */
    .bg-texture {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        radial-gradient(ellipse 70% 60% at 50% -5%, var(--glow) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 90% 90%, rgba(196,125,0,0.04) 0%, transparent 55%);
    }

    /* ── Theme toggle (fixed pojok kanan atas) ── */
    .theme-toggle {
      position: fixed;
      top: 16px; right: 16px;
      width: 38px; height: 38px;
      border-radius: 9px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
      z-index: 100;
      box-shadow: var(--shadow);
    }
    .theme-toggle:hover {
      color: var(--text);
      border-color: var(--accent);
      background: var(--bg2);
    }
    .icon-sun, .icon-moon { width: 16px; height: 16px; }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }

    /* ── Signup card ── */
    .signup-card {
      width: 100%;
      max-width: 460px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 44px 40px;
      position: relative;
      z-index: 1;
      animation: fadeUp .5s ease both;
      box-shadow: var(--shadow-lg);
      transition: background .25s, border-color .25s, box-shadow .25s;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Logo ── */
    .signup-logo {
      text-align: center;
      margin-bottom: 32px;
    }
    .signup-logo img {
      height: 52px; width: auto;
      margin: 0 auto 14px;
      display: block;
    }
    [data-theme="light"] .signup-logo img { filter: invert(1) brightness(0.15); }
    [data-theme="dark"]  .signup-logo img { filter: none; }
    .signup-logo h1 {
      font-family: 'Sora', sans-serif;
      font-size: 1.5rem; font-weight: 800;
      letter-spacing: -.5px;
      margin-bottom: 4px;
    }
    .signup-logo p { font-size: .82rem; color: var(--muted); }

    /* ── OAuth buttons ── */
    .oauth-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .btn-oauth {
      width: 100%;
      padding: 11px 14px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 9px;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem; font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: all .2s;
    }
    [data-theme="dark"] .btn-oauth { background: rgba(255,255,255,.03); }
    .btn-oauth:hover {
      border-color: var(--accent);
      background: var(--accent-bg);
      transform: translateY(-1px);
    }

    /* ── Divider ── */
    .divider {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 22px;
    }
    .divider::before, .divider::after {
      content: ''; flex: 1;
      height: 1px; background: var(--border);
    }
    .divider span { font-size: .75rem; color: var(--muted); white-space: nowrap; }

    /* ── Form ── */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-group { margin-bottom: 16px; }
    .form-label {
      display: block;
      font-size: .75rem; font-weight: 600;
      color: var(--muted);
      text-transform: uppercase; letter-spacing: .8px;
      margin-bottom: 7px;
    }
    .label-opt {
      font-size: .68rem; color: var(--muted);
      font-weight: 400; text-transform: none;
      letter-spacing: 0; margin-left: 4px; opacity: .7;
    }
    .input-wrap { position: relative; }
    .input-icon {
      position: absolute;
      left: 12px; top: 50%; transform: translateY(-50%);
      color: var(--muted); pointer-events: none;
    }
    .form-input {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 11px 13px 11px 40px;
      border-radius: 9px;
      font-size: .9rem;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .25s, color .25s;
    }
    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-bg);
    }
    .form-input::placeholder { color: var(--muted); opacity: .7; }
    .show-pass {
      position: absolute;
      right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none;
      color: var(--muted); cursor: pointer;
      padding: 2px; transition: color .2s;
    }
    .show-pass:hover { color: var(--text); }

    /* ── Password strength ── */
    .strength-bar {
      height: 3px; border-radius: 2px;
      background: var(--border);
      margin-top: 8px; overflow: hidden;
    }
    .strength-fill {
      height: 100%; border-radius: 2px;
      transition: width .3s, background .3s;
      width: 0%;
    }
    .strength-label { font-size: .72rem; color: var(--muted); margin-top: 5px; }

    /* ── Submit button ── */
    .btn-signup {
      width: 100%; padding: 12px;
      background: var(--accent); color: #fff;
      border: none; border-radius: 9px;
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem; font-weight: 600;
      cursor: pointer; margin-top: 6px;
      transition: all .2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-signup:hover {
      background: var(--accent-dim);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(26,92,255,.28);
    }
    [data-theme="dark"] .btn-signup:hover {
      box-shadow: 0 6px 20px rgba(88,166,255,.25);
    }
    .btn-signup:active { transform: translateY(0); }
    .btn-signup:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

    /* ── Error box ── */
    .error-box {
      background: rgba(204,42,34,.08);
      border: 1px solid rgba(204,42,34,.25);
      border-radius: 9px;
      padding: 12px 14px; margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px;
      font-size: .85rem; color: var(--danger);
      animation: shake .3s ease;
    }
    [data-theme="dark"] .error-box {
      background: rgba(248,81,73,.10);
      border-color: rgba(248,81,73,.3);
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-6px); }
      75%      { transform: translateX(6px); }
    }

    /* ── Footer ── */
    .footer-link {
      display: block; text-align: center;
      margin-top: 22px; font-size: .82rem; color: var(--muted);
    }
    .footer-link a {
      color: var(--accent); text-decoration: none;
      font-weight: 500; transition: opacity .2s;
    }
    .footer-link a:hover { opacity: .8; }

    @media (max-width: 520px) {
      .signup-card { padding: 32px 24px; }
      .form-row { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
<div class="bg-texture"></div>

<!-- Theme Toggle -->
<button class="theme-toggle" onclick="toggleTheme()" title="Ganti tema" aria-label="Ganti tema">
  <svg class="icon-sun" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="5"/>
    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
  </svg>
  <svg class="icon-moon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
  </svg>
</button>

<div class="signup-card">

  <!-- Logo -->
  <div class="signup-logo">
    <img src="/static/kuskus.png" alt="KusKus" />
    <h1>KusKus</h1>
    <p>Buat akun gratis dan mulai transkripsi</p>
  </div>

  <!-- Error banner -->
  {% if error %}
  <div class="error-box" id="server-error">
    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="8" x2="12" y2="12"/>
      <line x1="12" y1="16" x2="12.01" y2="16"/>
    </svg>
    {{ error }}
  </div>
  {% endif %}

  <!-- OAuth buttons -->
  {% if google_enabled or github_enabled %}
  <div class="oauth-group">
    {% if google_enabled %}
    <a href="/auth/google" class="btn-oauth">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
      </svg>
      Daftar dengan Google
    </a>
    {% endif %}
    {% if github_enabled %}
    <a href="/auth/github" class="btn-oauth">
      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483
             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466
             -.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832
             .092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688
             -.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115
             2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
             2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747
             0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
      </svg>
      Daftar dengan GitHub
    </a>
    {% endif %}
  </div>
  <div class="divider"><span>atau daftar dengan email</span></div>
  {% endif %}

  <!-- Form daftar -->
  <form method="POST" action="/signup" id="signup-form">

    <div class="form-row">
      <!-- Username -->
      <div class="form-group">
        <label class="form-label" for="username">Username</label>
        <div class="input-wrap">
          <svg class="input-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="8" r="4"/>
            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
          </svg>
          <input
            class="form-input" type="text" id="username" name="username"
            placeholder="min. 3 karakter" autocomplete="username"
            value="{{ form.username if form else '' }}"
            required autofocus
          />
        </div>
      </div>

      <!-- Nama lengkap -->
      <div class="form-group">
        <label class="form-label" for="full_name">
          Nama <span class="label-opt">(opsional)</span>
        </label>
        <div class="input-wrap">
          <svg class="input-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
          <input
            class="form-input" type="text" id="full_name" name="full_name"
            placeholder="Nama Anda" autocomplete="name"
            value="{{ form.full_name if form else '' }}"
          />
        </div>
      </div>
    </div>

    <!-- Email -->
    <div class="form-group">
      <label class="form-label" for="email">
        Email <span class="label-opt">(opsional)</span>
      </label>
      <div class="input-wrap">
        <svg class="input-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
          <polyline points="22,6 12,13 2,6"/>
        </svg>
        <input
          class="form-input" type="email" id="email" name="email"
          placeholder="nama@email.com" autocomplete="email"
          value="{{ form.email if form else '' }}"
        />
      </div>
    </div>

    <!-- Password -->
    <div class="form-group">
      <label class="form-label" for="password">Password</label>
      <div class="input-wrap">
        <svg class="input-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <rect x="3" y="11" width="18" height="11" rx="2"/>
          <path d="M7 11V7a5 5 0 0110 0v4"/>
        </svg>
        <input
          class="form-input" type="password" id="password" name="password"
          placeholder="min. 6 karakter" autocomplete="new-password"
          required oninput="checkStrength(this.value)"
        />
        <button type="button" class="show-pass" onclick="togglePass('password','eye1')" title="Tampilkan">
          <svg id="eye1" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
            <circle cx="12" cy="12" r="3"/>
          </svg>
        </button>
      </div>
      <div class="strength-bar"><div class="strength-fill" id="s-fill"></div></div>
      <div class="strength-label" id="s-label"></div>
    </div>

    <!-- Konfirmasi password -->
    <div class="form-group">
      <label class="form-label" for="password2">Konfirmasi Password</label>
      <div class="input-wrap">
        <svg class="input-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
        <input
          class="form-input" type="password" id="password2" name="password2"
          placeholder="Ulangi password" autocomplete="new-password"
          required
        />
        <button type="button" class="show-pass" onclick="togglePass('password2','eye2')" title="Tampilkan">
          <svg id="eye2" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
            <circle cx="12" cy="12" r="3"/>
          </svg>
        </button>
      </div>
    </div>

    <button type="submit" class="btn-signup" id="btn-submit">
      <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
        <circle cx="8.5" cy="7" r="4"/>
        <line x1="20" y1="8" x2="20" y2="14"/>
        <line x1="23" y1="11" x2="17" y2="11"/>
      </svg>
      Buat Akun
    </button>
  </form>

  <p class="footer-link">
    Sudah punya akun? <a href="/login">Masuk di sini</a>
  </p>

</div>

<!-- ================================================================
     THEME SYSTEM — key & logic sama persis dengan landing, login, base
================================================================ -->
<script>
  const THEME_KEY = 'kuskus-theme';

  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem(THEME_KEY, theme);
  }

  function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme');
    applyTheme(current === 'dark' ? 'light' : 'dark');
  }

  /* Init — baca localStorage sebelum render, fallback ke light */
  (function() {
    applyTheme(localStorage.getItem(THEME_KEY) || 'light');
  })();

  /* ── Toggle show/hide password ── */
  function togglePass(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (input.type === 'password') {
      input.type = 'text';
      icon.innerHTML = `
        <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/>
        <path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/>
        <line x1="1" y1="1" x2="23" y2="23"/>`;
    } else {
      input.type = 'password';
      icon.innerHTML = `
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
        <circle cx="12" cy="12" r="3"/>`;
    }
  }

  /* ── Password strength indicator ── */
  function checkStrength(val) {
    const fill  = document.getElementById('s-fill');
    const label = document.getElementById('s-label');
    if (!val) { fill.style.width = '0%'; label.textContent = ''; return; }

    let score = 0;
    if (val.length >= 6)           score++;
    if (val.length >= 10)          score++;
    if (/[A-Z]/.test(val))         score++;
    if (/[0-9]/.test(val))         score++;
    if (/[^A-Za-z0-9]/.test(val))  score++;

    const levels = [
      { w: '20%', c: '#f85149', t: 'Sangat lemah' },
      { w: '40%', c: '#f0883e', t: 'Lemah' },
      { w: '60%', c: '#d4a017', t: 'Cukup' },
      { w: '80%', c: '#3fb950', t: 'Kuat' },
      { w: '100%',c: '#3fb950', t: 'Sangat kuat' },
    ];
    const lvl = levels[Math.min(score - 1, 4)] || levels[0];
    fill.style.width      = lvl.w;
    fill.style.background = lvl.c;
    label.textContent     = lvl.t;
    label.style.color     = lvl.c;
  }

  /* ── Validasi client-side + loading state ── */
  document.getElementById('signup-form').addEventListener('submit', function(e) {
    const pw  = document.getElementById('password').value;
    const pw2 = document.getElementById('password2').value;

    const old = document.getElementById('inline-error');
    if (old) old.remove();

    if (pw !== pw2) {
      e.preventDefault();
      const box = document.createElement('div');
      box.id = 'inline-error';
      box.className = 'error-box';
      box.innerHTML = `<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="8" x2="12" y2="12"/>
        <line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>Konfirmasi password tidak cocok.`;
      this.prepend(box);
      document.getElementById('password2').focus();
      return;
    }

    const btn = document.getElementById('btn-submit');
    btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke-dasharray="2 2">
        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur=".8s" repeatCount="indefinite"/>
      </path></svg> Membuat akun...`;
    btn.disabled = true;
  });
</script>
</body>
</html>