<!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>Masuk — 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>
    :root {
      --bg:      #f5f4f0;
      --surface: #ffffff;
      --border:  #d8d6d0;
      --text:    #1a1916;
      --muted:   #7a786f;
      --accent:  #1a5cff;
      --danger:  #cc2a22;
      --glow:    rgba(26,92,255,0.08);
    }
    [data-theme="dark"] {
      --bg:      #080d14;
      --surface: #0e1520;
      --border:  #1e2d42;
      --text:    #e8edf5;
      --muted:   #6b7f96;
      --accent:  #4f9ef8;
      --danger:  #f85149;
      --glow:    rgba(79,158,248,0.1);
    }

    *, *::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: hidden;
      transition: background .3s, color .3s;
    }

    .bg-glow {
      position: fixed;
      width: 600px; height: 600px;
      background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: background .3s;
    }

    /* ── Theme toggle ── */
    .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;
    }
    .theme-toggle:hover { color: var(--text); border-color: var(--accent); }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }

    .login-card {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 44px 40px;
      position: relative;
      animation: fadeUp .5s ease both;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      transition: background .3s, border-color .3s;
    }
    [data-theme="dark"] .login-card {
      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Logo ── */
    .login-logo {
      text-align: center;
      margin-bottom: 32px;
    }
    .login-logo img {
      height: 56px; width: auto;
      margin-bottom: 14px;
      display: block; margin-left: auto; margin-right: auto;
    }
    [data-theme="light"] .login-logo img { filter: invert(1) brightness(0.15); }
    [data-theme="dark"]  .login-logo img { filter: none; }
    .login-logo h1 {
      font-family: 'Sora', sans-serif;
      font-size: 1.5rem; font-weight: 800;
      letter-spacing: -.5px;
      margin-bottom: 4px;
    }
    .login-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,.04); }
    .btn-oauth:hover {
      border-color: var(--accent);
      transform: translateY(-1px);
    }
    [data-theme="dark"] .btn-oauth:hover { background: rgba(255,255,255,.08); }

    /* ── 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-group { margin-bottom: 18px; }
    .form-label {
      display: block;
      font-size: .75rem; font-weight: 600;
      color: var(--muted);
      text-transform: uppercase; letter-spacing: .8px;
      margin-bottom: 7px;
    }
    .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: all .2s;
    }
    [data-theme="dark"] .form-input { background: rgba(255,255,255,.04); }
    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26,92,255,.12);
    }
    [data-theme="dark"] .form-input:focus {
      background: rgba(79,158,248,.05);
      box-shadow: 0 0 0 3px rgba(79,158,248,.15);
    }
    .form-input::placeholder { color: var(--muted); }
    .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); }

    /* ── Submit button ── */
    .btn-login {
      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: 8px;
      transition: all .2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-login:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(26,92,255,.25);
    }
    [data-theme="dark"] .btn-login:hover {
      box-shadow: 0 6px 20px rgba(79,158,248,.25);
    }
    .btn-login:active { transform: translateY(0); }

    /* ── Alert boxes ── */
    .error-box {
      background: rgba(204,42,34,.1);
      border: 1px solid rgba(204,42,34,.3);
      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,.1);
      border-color: rgba(248,81,73,.3);
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-6px); }
      75%      { transform: translateX(6px); }
    }

    /* ── Footer links ── */
    .footer-links {
      margin-top: 22px;
      display: flex; flex-direction: column; gap: 10px;
      align-items: center;
    }
    .back-link, .signup-link {
      font-size: .82rem; color: var(--muted);
      text-decoration: none; transition: color .2s;
    }
    .back-link:hover { color: var(--text); }
    .signup-link a {
      color: var(--accent); font-weight: 500;
      text-decoration: none; transition: color .2s;
    }
    .signup-link a:hover { filter: brightness(1.2); }

    @media (max-width: 480px) {
      .login-card { padding: 32px 24px; }
    }
  </style>
</head>
<body>
<div class="bg-glow"></div>

<!-- Theme Toggle -->
<button class="theme-toggle" onclick="toggleTheme()" title="Ganti tema">
  <svg class="icon-sun" width="16" height="16" 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" width="16" height="16" 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="login-card">

  <!-- Logo -->
  <div class="login-logo">
    <img src="/static/logo.svg" alt="KusKus" />
    <h1>KusKus</h1>
    <p>Masuk ke akun Anda untuk melanjutkan</p>
  </div>

  <!-- Error: login gagal -->
  {% if error %}
  <div class="error-box">
    <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 %}

  <!-- Error: OAuth gagal / dibatalkan -->
  {% if oauth_error %}
  <div class="error-box">
    <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>
    {{ oauth_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>
      Masuk 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>
      Masuk dengan GitHub
    </a>
    {% endif %}
  </div>
  <div class="divider"><span>atau masuk dengan password</span></div>
  {% endif %}

  <!-- Form login -->
  <form method="POST" action="/login">
    {% if request.query_params.next %}
    <input type="hidden" name="next" value="{{ request.query_params.next }}" />
    {% endif %}

    <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="Masukkan username" autocomplete="username" required autofocus />
      </div>
    </div>

    <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="Masukkan password" autocomplete="current-password" required />
        <button type="button" class="show-pass" onclick="togglePass()" title="Tampilkan password">
          <svg id="eye-icon" 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-login" id="btn-submit">
      <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/>
      </svg>
      Masuk
    </button>
  </form>

  <!-- Footer links -->
  <div class="footer-links">
    {% if signup_enabled %}
    <p class="signup-link">Belum punya akun? <a href="/signup">Daftar gratis</a></p>
    {% endif %}
    <a href="/" class="back-link">← Kembali ke halaman utama</a>
  </div>

</div>

<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 dari localStorage, default light
  (function() {
    applyTheme(localStorage.getItem(THEME_KEY) || 'light');
  })();

  function togglePass() {
    const input = document.getElementById('password');
    const icon  = document.getElementById('eye-icon');
    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"/>`;
    }
  }

  document.querySelector('form').addEventListener('submit', function() {
    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> Memproses...`;
    btn.disabled = true;
  });
</script>
</body>
</html>