<!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>{% block title %}Transkripsi Audio{% endblock %} — 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@300;400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    /* ================================================================
       CSS VARIABLES — Light (default) & Dark
       Selaras dengan landing.html
    ================================================================ */
    :root {
      --bg:         #f5f4f0;
      --bg2:        #edecea;
      --surface:    #ffffff;
      --surface2:   #f0efeb;
      --border:     #d8d6d0;
      --border2:    #e8e6e1;
      --text:       #1a1916;
      --text2:      #3a3835;
      --muted:      #7a786f;
      --muted2:     #a09e96;
      --accent:     #1a5cff;
      --accent-dim: #0a3ccc;
      --accent-bg:  rgba(26,92,255,0.08);
      --gold:       #c47d00;
      --gold-dim:   #7a4e00;
      --gold-bg:    rgba(196,125,0,0.10);
      --success:    #1a7a3a;
      --danger:     #cc2a22;
      --warning:    #a06000;
      --sidebar-w:  240px;
      --radius:     10px;
      --radius-sm:  6px;
      --shadow:     0 2px 16px rgba(0,0,0,0.08);
      --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
      --nav-bg:     rgba(255,255,255,0.92);
    }

    [data-theme="dark"] {
      --bg:         #0d1117;
      --bg2:        #0a0e14;
      --surface:    #161b22;
      --surface2:   #1c2128;
      --border:     #30363d;
      --border2:    #21262d;
      --text:       #e6edf3;
      --text2:      #c9d1d9;
      --muted:      #8b949e;
      --muted2:     #6e7681;
      --accent:     #58a6ff;
      --accent-dim: #1f6feb;
      --accent-bg:  rgba(88,166,255,0.10);
      --gold:       #d4a017;
      --gold-dim:   #7d5f0e;
      --gold-bg:    rgba(212,160,23,0.10);
      --success:    #3fb950;
      --danger:     #f85149;
      --warning:    #e3b341;
      --shadow:     0 2px 16px rgba(0,0,0,0.30);
      --shadow-lg:  0 8px 40px rgba(0,0,0,0.50);
      --nav-bg:     rgba(22,27,34,0.95);
    }

    /* ================================================================
       RESET & BASE
    ================================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 15px; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      transition: background .25s, color .25s;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg2); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ================================================================
       SIDEBAR
    ================================================================ */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--surface);
      border-right: 1px solid var(--border2);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0;
      height: 100vh;
      z-index: 100;
      transition: transform .3s ease, background .25s, border-color .25s;
    }

    .sidebar-logo {
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--border2);
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      transition: border-color .25s;
    }
    .sidebar-logo-icon {
      width: 34px; height: 34px;
      background: linear-gradient(135deg, var(--accent), var(--gold));
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .sidebar-logo-text {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--text);
      letter-spacing: -.3px;
      transition: color .25s;
    }
    .sidebar-logo-sub {
      font-size: .65rem;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: .3px;
    }

    .sidebar-nav {
      flex: 1;
      padding: 10px 8px;
      overflow-y: auto;
    }
    .nav-section {
      font-size: .66rem;
      font-weight: 700;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      padding: 14px 10px 6px;
    }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: var(--radius-sm);
      color: var(--muted);
      text-decoration: none;
      font-size: .875rem;
      font-weight: 500;
      transition: all .15s;
      margin-bottom: 2px;
    }
    .nav-link:hover { background: var(--surface2); color: var(--text); }
    .nav-link.active {
      background: var(--accent-bg);
      color: var(--accent);
    }
    .nav-link.active .nav-icon { color: var(--accent); }
    .nav-icon {
      width: 18px; height: 18px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nav-badge {
      margin-left: auto;
      background: var(--gold-bg);
      color: var(--gold);
      font-size: .65rem;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 20px;
      letter-spacing: .3px;
    }

    /* ================================================================
       NAV DISABLED — fitur sedang maintenance (sama dengan ADIL)
    ================================================================ */
    .nav-link-disabled {
      opacity: .45;
      pointer-events: none;
      cursor: not-allowed;
    }
    .nav-maintenance-tag {
      margin-left: auto;
      font-size: .6rem;
      font-weight: 700;
      color: var(--danger);
      background: rgba(204,42,34,.10);
      border: 1px solid rgba(204,42,34,.22);
      padding: 1px 7px;
      border-radius: 20px;
      white-space: nowrap;
      letter-spacing: .2px;
    }
    [data-theme="dark"] .nav-maintenance-tag {
      color: var(--danger);
      background: rgba(248,81,73,.12);
      border-color: rgba(248,81,73,.28);
    }

    .sidebar-footer {
      padding: 10px 8px;
      border-top: 1px solid var(--border2);
      transition: border-color .25s;
    }

    /* Theme toggle di sidebar footer */
    .theme-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      margin-bottom: 4px;
    }
    .theme-toggle-label {
      font-size: .78rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .theme-toggle-btn {
      position: relative;
      width: 36px; height: 20px;
      flex-shrink: 0;
    }
    .theme-toggle-btn input { opacity: 0; width: 0; height: 0; }
    .theme-slider {
      position: absolute; inset: 0;
      background: var(--border);
      border-radius: 20px;
      cursor: pointer;
      transition: background .2s;
    }
    .theme-slider::before {
      content: '';
      position: absolute;
      width: 14px; height: 14px;
      left: 3px; bottom: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform .2s;
    }
    .theme-toggle-btn input:checked + .theme-slider { background: var(--accent); }
    .theme-toggle-btn input:checked + .theme-slider::before { transform: translateX(16px); }

    .user-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      cursor: default;
    }
    .user-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-dim), var(--accent));
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; color: #fff;
      flex-shrink: 0;
    }
    .user-info { flex: 1; min-width: 0; }
    .user-name {
      font-size: .8rem; font-weight: 600;
      color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .user-role { font-size: .68rem; color: var(--muted); }
    .user-balance {
      font-size: .75rem;
      margin-top: 3px;
      color: var(--gold);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn-logout {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      background: none;
      border: none;
      color: var(--muted);
      font-size: .8rem;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      text-decoration: none;
      margin-top: 2px;
      transition: all .15s;
    }
    .btn-logout:hover { background: rgba(248,81,73,.1); color: var(--danger); }

    /* ================================================================
       MAIN CONTENT
    ================================================================ */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: margin .3s;
    }

    .topbar {
      height: 54px;
      background: var(--nav-bg);
      border-bottom: 1px solid var(--border2);
      display: flex;
      align-items: center;
      padding: 0 28px;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      transition: background .25s, border-color .25s;
    }
    .topbar-title {
      font-family: 'Sora', sans-serif;
      font-size: .9rem;
      font-weight: 600;
      color: var(--text);
    }
    .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

    /* Topbar theme toggle (visible on mobile / tablet) */
    .topbar-theme-btn {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .topbar-theme-btn:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
    .icon-sun, .icon-moon { width: 15px; height: 15px; }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }

    .content {
      flex: 1;
      padding: 28px;
      max-width: 1200px;
      width: 100%;
    }

    /* ================================================================
       CARDS
    ================================================================ */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      transition: background .25s, border-color .25s;
    }
    .card-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .card-title {
      font-family: 'Sora', sans-serif;
      font-size: .9rem; font-weight: 600;
    }

    /* ================================================================
       BUTTONS
    ================================================================ */
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      border: none;
      font-size: .85rem; font-weight: 500;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      text-decoration: none;
      transition: all .15s;
      white-space: nowrap;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold), #f0c040);
      color: #1a1200;
      font-weight: 600;
    }
    .btn-gold:hover { filter: brightness(1.08); }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover { background: var(--surface2); color: var(--text); }

    .btn-danger {
      background: rgba(204,42,34,.1);
      color: var(--danger);
      border: 1px solid rgba(204,42,34,.25);
    }
    [data-theme="dark"] .btn-danger {
      background: rgba(248,81,73,.12);
      border-color: rgba(248,81,73,.3);
    }
    .btn-danger:hover { background: rgba(204,42,34,.18); }
    [data-theme="dark"] .btn-danger:hover { background: rgba(248,81,73,.2); }

    .btn-sm { padding: 5px 11px; font-size: .78rem; }
    .btn-lg { padding: 12px 24px; font-size: .95rem; }
    .btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ================================================================
       BADGES
    ================================================================ */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 9px;
      border-radius: 20px;
      font-size: .72rem; font-weight: 600;
    }
    .badge-pending   { background: var(--gold-bg);               color: var(--gold); }
    .badge-processing{ background: var(--accent-bg);             color: var(--accent); }
    .badge-completed { background: rgba(26,122,58,.10);          color: var(--success); }
    .badge-failed    { background: rgba(204,42,34,.10);          color: var(--danger); }
    .badge-admin     { background: var(--gold-bg);               color: var(--gold); }
    .badge-user      { background: var(--accent-bg);             color: var(--accent); }
    [data-theme="dark"] .badge-completed { background: rgba(63,185,80,.12); }
    [data-theme="dark"] .badge-failed    { background: rgba(248,81,73,.12); }
    .badge-dot::before {
      content: ''; width: 5px; height: 5px;
      border-radius: 50%; background: currentColor;
    }

    /* ================================================================
       FORMS
    ================================================================ */
    .form-group { margin-bottom: 16px; }
    .form-label {
      display: block;
      font-size: .78rem; font-weight: 600;
      color: var(--muted);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 9px 13px;
      border-radius: var(--radius-sm);
      font-size: .875rem;
      font-family: 'DM Sans', sans-serif;
      transition: border-color .15s, background .25s, color .25s;
      outline: none;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-bg);
    }
    .form-select { cursor: pointer; }
    .form-textarea { resize: vertical; min-height: 100px; }
    .form-hint { font-size: .75rem; color: var(--muted); margin-top: 4px; }

    /* ================================================================
       TABLE
    ================================================================ */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    thead tr { border-bottom: 1px solid var(--border); }
    th {
      text-align: left;
      padding: 10px 14px;
      font-size: .72rem; font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    td { padding: 11px 14px; border-bottom: 1px solid var(--border2); }
    tbody tr:hover { background: var(--surface2); }
    tbody tr:last-child td { border-bottom: none; }

    /* ================================================================
       ALERTS
    ================================================================ */
    .alert {
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      font-size: .85rem;
      display: flex; align-items: flex-start; gap: 10px;
      margin-bottom: 16px;
    }
    .alert-info    { background: var(--accent-bg);          border: 1px solid rgba(26,92,255,.2);  color: var(--accent); }
    .alert-success { background: rgba(26,122,58,.08);       border: 1px solid rgba(26,122,58,.2);  color: var(--success); }
    .alert-danger  { background: rgba(204,42,34,.08);       border: 1px solid rgba(204,42,34,.2);  color: var(--danger); }
    .alert-warning { background: var(--gold-bg);            border: 1px solid rgba(196,125,0,.2);  color: var(--gold); }
    [data-theme="dark"] .alert-info    { border-color: rgba(88,166,255,.25); }
    [data-theme="dark"] .alert-success { background: rgba(63,185,80,.10);  border-color: rgba(63,185,80,.25);  color: var(--success); }
    [data-theme="dark"] .alert-danger  { background: rgba(248,81,73,.10);  border-color: rgba(248,81,73,.25);  color: var(--danger); }
    [data-theme="dark"] .alert-warning { border-color: rgba(212,160,23,.25); }

    /* ================================================================
       PROGRESS BAR
    ================================================================ */
    .progress-bar {
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-dim), var(--accent));
      border-radius: 3px;
      transition: width .5s ease;
    }

    /* ================================================================
       PAGINATION
    ================================================================ */
    .pagination {
      display: flex; gap: 6px;
      padding: 14px 0 0;
      flex-wrap: wrap;
    }
    .page-btn {
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--muted);
      cursor: pointer;
      font-size: .8rem;
      font-family: 'DM Sans', sans-serif;
      transition: all .15s;
    }
    .page-btn:hover { border-color: var(--accent); color: var(--accent); }
    .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* ================================================================
       MOBILE TOGGLE
    ================================================================ */
    .menu-btn {
      display: none;
      background: none; border: none;
      color: var(--text); cursor: pointer;
      padding: 4px;
    }

    @media (max-width: 768px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .main { margin-left: 0; }
      .menu-btn { display: flex; }
      .content { padding: 16px; }
      .topbar { padding: 0 16px; }
      .overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 99;
      }
      .overlay.show { display: block; }
      /* Hide sidebar theme toggle on mobile, show topbar one */
      .theme-toggle-row { display: none; }
    }
    @media (min-width: 769px) {
      /* Hide topbar theme toggle on desktop, sidebar has it */
      .topbar-theme-btn { display: none; }
    }

    /* ================================================================
       TOAST NOTIFICATION
    ================================================================ */
    .toast-notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 4px solid var(--success);
      padding: 12px 18px;
      border-radius: 8px;
      color: var(--text);
      z-index: 9999;
      font-size: .85rem;
      box-shadow: var(--shadow-lg);
      animation: toastFadeInUp 0.3s ease;
      max-width: 320px;
    }
    @keyframes toastFadeInUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ================================================================
       THEME TRANSITION — smooth global switch
    ================================================================ */
    *, *::before, *::after {
      transition-property: background-color, border-color, color, box-shadow;
      transition-duration: .2s;
      transition-timing-function: ease;
    }
    /* Override: animatable-only for layout */
    body, .sidebar, .topbar, .main { transition-property: background, color, margin, transform; }
  </style>
  {% block extra_head %}{% endblock %}
</head>
<body>

<!-- Overlay mobile -->
<div class="overlay" id="overlay" onclick="closeSidebar()"></div>

<!-- ================================================================
     SIDEBAR
================================================================ -->
<aside class="sidebar" id="sidebar">
  <a href="/home" class="sidebar-logo">
    <img src="/static/kuskus.png" height="34" alt="KusKus" />
    <div>
      <div class="sidebar-logo-text">KusKus AI</div>
      <div class="sidebar-logo-sub">Agent Transkripsi Sidang</div>
    </div>
  </a>

  <nav class="sidebar-nav">
    {% set flags = get_flags(request) %}

    <div class="nav-section">Menu</div>

    <a href="/home" class="nav-link {% if active == 'home' %}active{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/>
        </svg>
      </span>
      Beranda
    </a>

    <a href="/transkripsi/file"
       class="nav-link {% if active == 'upload' %}active{% endif %} {% if not flags.get('upload_file', true) %}nav-link-disabled{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M12 18v-6M9 15l3-3 3 3"/>
        </svg>
      </span>
      Upload File
      {% if not flags.get('upload_file', true) %}
        <span class="nav-maintenance-tag">Maintenance</span>
      {% endif %}
    </a>

    <a href="/transkripsi/rekam"
       class="nav-link {% if active == 'rekam' %}active{% endif %} {% if not flags.get('rekam_live', true) %}nav-link-disabled{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10a7 7 0 01-14 0M12 19v3M8 22h8"/>
        </svg>
      </span>
      Rekam Audio
      {% if not flags.get('rekam_live', true) %}
        <span class="nav-maintenance-tag">Maintenance</span>
      {% endif %}
    </a>

    <a href="/sidang"
       class="nav-link {% if active == 'sidang' %}active{% endif %} {% if not flags.get('mode_sidang', true) %}nav-link-disabled{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
        </svg>
      </span>
      Mode Sidang
      {% if not flags.get('mode_sidang', true) %}
        <span class="nav-maintenance-tag">Maintenance</span>
      {% else %}
        <span class="nav-badge">Pro</span>
      {% endif %}
    </a>

    <div class="nav-section">Saldo</div>

    <a href="/topup"
       class="nav-link {% if active == 'topup' %}active{% endif %} {% if not flags.get('topup', true) %}nav-link-disabled{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <rect x="1" y="4" width="22" height="16" rx="2"/>
          <line x1="1" y1="10" x2="23" y2="10"/>
        </svg>
      </span>
      Top Up Token
      {% if not flags.get('topup', true) %}
        <span class="nav-maintenance-tag">Maintenance</span>
      {% endif %}
    </a>

    <a href="/transaksi" class="nav-link {% if active == 'transaksi' %}active{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
          <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
        </svg>
      </span>
      Riwayat Transaksi
    </a>
<a class="nav-link {% if active == 'riwayat' %}active{% endif %}" href="/riwayat">
  <svg ...><!-- ikon ── bisa gunakan ikon riwayat/history --></svg>
  Riwayat
</a>
    {% if user.role == 'admin' %}
    <div class="nav-section">Admin</div>
    <a href="/admin" class="nav-link {% if active == 'admin' %}active{% endif %}">
      <span class="nav-icon">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" 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>
      </span>
      Panel Admin
    </a>
    {% endif %}
  </nav>

  <div class="sidebar-footer">
    <!-- Theme toggle -->
    <div class="theme-toggle-row">
      <span class="theme-toggle-label">
        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" id="sidebar-sun-icon">
          <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 width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" id="sidebar-moon-icon" style="display:none">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
        <span id="theme-label">Light Mode</span>
      </span>
      <label class="theme-toggle-btn">
        <input type="checkbox" id="theme-checkbox" onchange="toggleTheme()" />
        <span class="theme-slider"></span>
      </label>
    </div>

    <div class="user-card">
      <div class="user-avatar">{{ user.username[0].upper() }}</div>
      <div class="user-info">
        <div class="user-name">{{ user.full_name or user.username }}</div>
        <div class="user-role">{{ user.role }}</div>
        <div class="user-balance">🪙 Token: {{ "{:,}".format(user.balance) }}</div>
      </div>
    </div>
    <a href="/profil/ganti-password" class="btn-logout {% if active == 'ganti_password' %}active-footer{% endif %}"
       style="{% if active == 'ganti_password' %}background:var(--accent-bg);color:var(--accent);{% endif %}">
      <svg width="14" height="14" 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>
      Ganti Password
    </a>
    <a href="/logout" class="btn-logout">
      <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
      </svg>
      Keluar
    </a>
  </div>
</aside>

<!-- ================================================================
     MAIN
================================================================ -->
<div class="main">
  <header class="topbar">
    <button class="menu-btn" onclick="openSidebar()">
      <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>
    <span class="topbar-title">{% block page_title %}Halaman{% endblock %}</span>

    {% block topbar_extra %}{% endblock %}

    <div class="topbar-right">
      <!-- Theme toggle for mobile (topbar) -->
      <button class="topbar-theme-btn" onclick="toggleTheme()" 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>
  </header>

  <div class="content">
    {% block content %}{% endblock %}
  </div>
</div>

<!-- ================================================================
     SCRIPTS
================================================================ -->
<script>
  /* ── Sidebar mobile ── */
  function openSidebar() {
    document.getElementById('sidebar').classList.add('open');
    document.getElementById('overlay').classList.add('show');
  }
  function closeSidebar() {
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('overlay').classList.remove('show');
  }

  /* ── Theme system ──
     Sama dengan landing.html:
     - Simpan di localStorage dengan key 'kuskus-theme'
     - Default: light
  ── */
  const THEME_KEY = 'kuskus-theme';

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

    // Sync checkbox di sidebar
    const cb = document.getElementById('theme-checkbox');
    if (cb) cb.checked = (theme === 'dark');

    // Sync icon & label di sidebar
    const sunIcon  = document.getElementById('sidebar-sun-icon');
    const moonIcon = document.getElementById('sidebar-moon-icon');
    const label    = document.getElementById('theme-label');
    if (theme === 'dark') {
      if (sunIcon)  sunIcon.style.display  = 'none';
      if (moonIcon) moonIcon.style.display = 'block';
      if (label)    label.textContent      = 'Dark Mode';
    } else {
      if (sunIcon)  sunIcon.style.display  = 'block';
      if (moonIcon) moonIcon.style.display = 'none';
      if (label)    label.textContent      = 'Light Mode';
    }
  }

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

  /* Init: cek localStorage, fallback ke light (sama dengan landing) */
  (function() {
    const saved = localStorage.getItem(THEME_KEY);
    applyTheme(saved || 'light');
  })();
</script>

{% block scripts %}{% endblock %}

<!-- ================================================================
     POLLING BALANCE OTOMATIS
================================================================ -->
<script>
(function() {
  let currentBalance = {{ user.balance }};
  let pollingInterval = null;
  let failCount = 0;
  const MAX_FAIL = 5;

  function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = 'toast-notification';
    toast.textContent = message;
    const colors = {
      success: 'var(--success)',
      warning: 'var(--gold)',
      info:    'var(--accent)'
    };
    toast.style.borderLeftColor = colors[type] || colors.info;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 4000);
  }

  function updateBalanceUI(newBalance) {
    document.querySelectorAll('.user-balance').forEach(el => {
      el.innerHTML = '🪙 Token: ' + newBalance.toLocaleString('id-ID');
    });
    const specificBalance = document.getElementById('balance-display');
    if (specificBalance) {
      specificBalance.textContent = newBalance.toLocaleString('id-ID') + ' Token';
    }
    const badgeBalance = document.querySelector('.card-header .badge');
    if (badgeBalance && badgeBalance.textContent.includes('Token saat ini:')) {
      badgeBalance.textContent = '🪙 Token saat ini: ' + newBalance.toLocaleString('id-ID') + ' Token';
    }
  }

  async function checkBalance() {
    try {
      const res = await fetch('/api/auth/me', {
        credentials: 'include',
        cache: 'no-store',
      });
      if (res.status === 401 || res.status === 403) {
        clearInterval(pollingInterval);
        return;
      }
      if (!res.ok) {
        failCount++;
        if (failCount >= MAX_FAIL) clearInterval(pollingInterval);
        return;
      }
      failCount = 0;
      const data = await res.json();
      const newBalance = data.balance;
      if (typeof newBalance !== 'number') return;
      if (newBalance !== currentBalance) {
        const diff = newBalance - currentBalance;
        if (diff > 0) {
          showToast('✨ Token bertambah ' + diff.toLocaleString('id-ID') + ' Token!', 'success');
        } else if (diff < 0) {
          showToast('⚠️ Token berkurang ' + Math.abs(diff).toLocaleString('id-ID') + ' Token', 'warning');
        }
        updateBalanceUI(newBalance);
        currentBalance = newBalance;
      }
    } catch (e) {
      failCount++;
      if (failCount >= MAX_FAIL) clearInterval(pollingInterval);
    }
  }

  pollingInterval = setInterval(checkBalance, 5000);
  window.addEventListener('beforeunload', () => clearInterval(pollingInterval));
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      clearInterval(pollingInterval);
    } else {
      checkBalance();
      pollingInterval = setInterval(checkBalance, 5000);
    }
  });
})();
</script>

<!-- ================================================================
     POLLING FEATURE FLAGS OTOMATIS
     Mengecek status flag setiap 10 detik. Jika ada perubahan,
     nav link langsung diupdate tanpa perlu refresh halaman.
================================================================ -->
<script>
(function() {
  // Snapshot awal flags dari server (di-render saat halaman dimuat)
  // Setiap nav link yang punya data-flag akan dicek dan diupdate.
  // Format data-flag: nama key flag, misal "upload_file"
  // Format data-flag-badge: "pro" jika ada badge Pro saat aktif

  let flagFailCount = 0;
  const FLAG_MAX_FAIL = 5;
  const FLAG_POLL_MS  = 10000; // 10 detik
  let flagInterval    = null;

  // Definisi nav links yang dikontrol flag.
  // key: nama flag, selector: selector elemen <a> nav-nya
  const FLAG_NAV_MAP = [
    { key: 'upload_file',  selector: 'a[href="/transkripsi/file"]' },
    { key: 'rekam_live',   selector: 'a[href="/transkripsi/rekam"]' },
    { key: 'mode_sidang',  selector: 'a[href="/sidang"]',           badge: 'Pro' },
    { key: 'topup',        selector: 'a[href="/topup"]' },
  ];

  function applyFlag(key, enabled, badge) {
    const entry = FLAG_NAV_MAP.find(f => f.key === key);
    if (!entry) return;

    const link = document.querySelector(entry.selector);
    if (!link) return;

    // Cari atau buat tag maintenance / badge
    let tag = link.querySelector('.nav-maintenance-tag, .nav-badge');

    if (enabled) {
      // Aktif: hapus disabled, pasang badge Pro jika ada
      link.classList.remove('nav-link-disabled');
      if (tag) tag.remove();
      if (entry.badge) {
        const b = document.createElement('span');
        b.className   = 'nav-badge';
        b.textContent = entry.badge;
        link.appendChild(b);
      }
    } else {
      // Nonaktif: tambah disabled, ganti/buat tag Maintenance
      link.classList.add('nav-link-disabled');
      if (tag) tag.remove();
      const m = document.createElement('span');
      m.className   = 'nav-maintenance-tag';
      m.textContent = 'Maintenance';
      link.appendChild(m);
    }
  }

  async function checkFlags() {
    try {
      const res = await fetch('/api/flags', {
        credentials: 'include',
        cache: 'no-store',
      });
      if (res.status === 401 || res.status === 403) {
        clearInterval(flagInterval);
        return;
      }
      if (!res.ok) {
        flagFailCount++;
        if (flagFailCount >= FLAG_MAX_FAIL) clearInterval(flagInterval);
        return;
      }
      flagFailCount = 0;
      const data = await res.json(); // { upload_file: true, rekam_live: false, ... }

      FLAG_NAV_MAP.forEach(({ key, badge }) => {
        if (key in data) applyFlag(key, data[key], badge);
      });

    } catch (e) {
      flagFailCount++;
      if (flagFailCount >= FLAG_MAX_FAIL) clearInterval(flagInterval);
    }
  }

  flagInterval = setInterval(checkFlags, FLAG_POLL_MS);
  window.addEventListener('beforeunload', () => clearInterval(flagInterval));
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      clearInterval(flagInterval);
    } else {
      checkFlags();
      flagInterval = setInterval(checkFlags, FLAG_POLL_MS);
    }
  });
})();
</script>

</body>
</html>