<!DOCTYPE html>
<html lang="en" class="dark" data-theme-mode="{{ dashboard_theme_mode }}">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sign in — {{ dashboard_title }}</title>
  {% if dashboard_favicon_url %}
  <link rel="icon" href="{{ dashboard_favicon_url }}" />
  {% else %}
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>" />
  {% endif %}
  <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=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: { DEFAULT: '#0d7ff2' },
            background: { dark: '#101922', surface: '#161b26' },
            border: { dark: '#2d333b' },
          },
        },
      },
    }
  </script>
  <link rel="stylesheet" href="/dashboard/static/dashboard/tokens.css" />
  <link rel="stylesheet" href="/dashboard/static/dashboard/app.css" />
  <style>
    :root {
      --color-accent: {{ dashboard_colors.accent }};
      --color-primary: {{ dashboard_colors.primary }};
    }
    body {
      background: var(--color-bg);
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(13, 127, 242, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
  </style>
</head>
<body>
<div class="min-h-screen flex items-center justify-center p-6">
  <div class="w-full max-w-sm">

    <!-- Branding -->
    <div class="text-center mb-8">
      {% if dashboard_icon_url %}
      <img src="{{ dashboard_icon_url }}" alt="{{ dashboard_title }}" class="w-14 h-14 rounded-2xl object-contain mb-5 mx-auto">
      {% else %}
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary shadow-lg shadow-primary/30 mb-5">
        <span class="material-symbols-outlined text-white text-3xl">hub</span>
      </div>
      {% endif %}
      {% if dashboard_logo_url %}
      <img src="{{ dashboard_logo_url }}" alt="{{ dashboard_title }}" class="h-7 w-auto mx-auto mb-3" />
      {% endif %}
      <h1 class="text-2xl font-bold text-white tracking-tight">{{ dashboard_title }}</h1>
      <p class="text-slate-500 text-sm mt-1">Sign in to your dashboard</p>
    </div>

    <!-- Error Alert -->
    {% set error_msg = error or request.query_params.get('error') %}
    {% if error_msg %}
    <div class="flex items-start gap-3 p-3.5 mb-5 rounded-xl border border-rose-500/20 bg-rose-500/5 text-rose-400">
      <span class="material-symbols-outlined text-rose-500 flex-shrink-0 text-lg mt-0.5">error</span>
      <span class="text-sm">{{ error_msg }}</span>
    </div>
    {% endif %}

    <!-- Login Card -->
    <div class="bg-surface border border-border-dark rounded-2xl shadow-xl p-7">
      {% if auth_method == "oauth2" %}
      <a href="/dashboard/oauth2/authorize"
         class="flex items-center justify-center gap-2 w-full py-3 px-4 rounded-xl bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 no-underline">
        <span class="material-symbols-outlined text-lg">login</span>
        {{ login_button_text }}
      </a>
      {% if show_admin_login %}
      <div class="flex items-center gap-3 my-5">
        <div class="flex-1 h-px bg-border-dark"></div>
        <span class="text-xs text-slate-500 uppercase tracking-wider">or</span>
        <div class="flex-1 h-px bg-border-dark"></div>
      </div>
      <details{% if admin_error %} open{% endif %}>
        <summary class="text-sm text-slate-400 hover:text-slate-300 cursor-pointer transition-colors text-center">Sign in with admin credentials</summary>
        <form action="/dashboard/login" method="post" class="space-y-4 mt-4">
          <div>
            <label for="username" class="block text-sm font-medium text-slate-300 mb-1.5">Username</label>
            <div class="relative">
              <input
                type="text"
                id="username"
                name="username"
                class="input w-full h-10 px-3"
                style="background-color:#161b26;color:#f8fafc"
                autocomplete="username"
                required
                placeholder="admin"
              />
            </div>
          </div>
          <div>
            <label for="password" class="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
            <div class="relative">
              <input
                type="password"
                id="password"
                name="password"
                class="input w-full h-10 px-3 pr-10"
                style="background-color:#161b26;color:#f8fafc"
                autocomplete="current-password"
                placeholder="••••••••"
              />
              <button
                type="button"
                onclick="const i=document.getElementById('password'); i.type=i.type==='password'?'text':'password'; this.querySelector('span').textContent=i.type==='password'?'visibility':'visibility_off';"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"
                tabindex="-1"
              >
                <span class="material-symbols-outlined text-lg">visibility</span>
              </button>
            </div>
          </div>
          <button
            type="submit"
            class="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 mt-2"
          >
            <span class="material-symbols-outlined text-base">login</span>
            Sign in
          </button>
        </form>
      </details>
      {% endif %}
      {% else %}
      <form action="/dashboard/login" method="post" class="space-y-4">
        <div>
          <label for="username" class="block text-sm font-medium text-slate-300 mb-1.5">Username</label>
          <div class="relative">
            <input
              type="text"
              id="username"
              name="username"
              class="input w-full h-10 px-3"
              style="background-color:#161b26;color:#f8fafc"
              autocomplete="username"
              autofocus
              required
              placeholder="admin"
            />
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
          <div class="relative">
            <input
              type="password"
              id="password"
              name="password"
              class="input w-full h-10 px-3 pr-10"
              style="background-color:#161b26;color:#f8fafc"
              autocomplete="current-password"
              placeholder="••••••••"
            />
            <button
              type="button"
              onclick="const i=document.getElementById('password'); i.type=i.type==='password'?'text':'password'; this.querySelector('span').textContent=i.type==='password'?'visibility':'visibility_off';"
              class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"
              tabindex="-1"
            >
              <span class="material-symbols-outlined text-lg">visibility</span>
            </button>
          </div>
        </div>

        <button
          type="submit"
          class="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 mt-2"
        >
          <span class="material-symbols-outlined text-base">login</span>
          Sign in
        </button>
      </form>
      {% endif %}
    </div>

    <!-- Footer -->
    <p class="text-center text-xs text-slate-600 mt-6">
      {{ dashboard_title }} &mdash; {{ dashboard_subtitle }}
    </p>
  </div>
</div>
<script src="/dashboard/static/dashboard/app.js" defer></script>
<style>
  /* Override Tailwind forms plugin base reset which injects after linked CSS */
  .input { background-color: var(--color-surface) !important; color: var(--color-text) !important; }
  /* Override app.css input[type="text"].input { width: 14rem } which breaks full-width login inputs */
  input[type="text"].input { width: 100%; display: block; }
  .input:-webkit-autofill,
  .input:-webkit-autofill:hover,
  .input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-surface) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
  }
</style>
</body>
</html>
