<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title|default("Annotation Platform") }}</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --background: #FFFFFF;
      --foreground: #09090B;
      --card: #FFFFFF;
      --card-foreground: #09090B;
      --popover: #FFFFFF;
      --popover-foreground: #09090B;
      --primary: #6E56CF;
      --primary-foreground: #FFFFFF;
      --secondary: #F4F4F5;
      --secondary-foreground: #18181B;
      --muted: #F4F4F5;
      --muted-foreground: #71717A;
      --accent: #F4F4F5;
      --accent-foreground: #18181B;
      --destructive: #EF4444;
      --destructive-foreground: #FAFAFA;
      --border: #E4E4E7;
      --input: #E4E4E7;
      --ring: #6E56CF;
      --radius: 0.5rem;
      --primary-color: #6E56CF;
      --secondary-color: #7C66CE;
      --accent-color: #A18FFF;
      --dark-color: #09090B;
      --light-color: #FAFAFA;
      --gray-color: #71717A;
      --light-gray: #F4F4F5;
      --light-bg: #F5F7FB;
      --heading-color: #09090B;
      --text-color: #555555;
      --success-color: #10B981;
      --border-radius: 0.5rem;
      --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      --transition: all 0.2s ease;
      --section-padding-top: 100px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--light-bg);
      color: var(--text-color);
    }

    .shadcn-card {
      background-color: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--box-shadow);
    }

    .shadcn-input {
      width: 100%;
      border: 1px solid var(--input);
      border-radius: var(--radius);
      padding: 0.5rem;
      font-size: 0.875rem;
      background-color: transparent;
      color: var(--foreground);
      transition: var(--transition);
    }

    .shadcn-input:focus {
      outline: none;
      border-color: var(--ring);
      box-shadow: 0 0 0 2px var(--ring), 0.3;
    }

    .shadcn-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      font-weight: 500;
      font-size: 0.875rem;
      height: 2.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      transition: var(--transition);
    }

    .shadcn-button-primary {
      background-color: var(--primary);
      color: var(--primary-foreground);
      border: 1px solid transparent;
    }

    .shadcn-button-primary:hover {
      background-color: var(--secondary-color);
    }

    .shadcn-button-outline {
      background-color: transparent;
      border: 1px solid var(--border);
      color: var(--foreground);
    }

    .shadcn-button-outline:hover {
      background-color: var(--secondary);
      color: var(--secondary-foreground);
    }

    /* New styles for tabs */
    .tab-container {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.5rem;
    }

    .tab {
      padding: 0.75rem 1rem;
      font-weight: 500;
      cursor: pointer;
    }

    .tab.active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gray-50 p-4">
  <div class="max-w-md w-full">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold" style="color: var(--heading-color);">{{ title|default("Annotation Platform") }}</h1>
      <p class="mt-2" style="color: var(--muted-foreground);">Please sign in to continue</p>
    </div>

    <div class="shadcn-card p-6">
      {% if require_password %}
      <div class="tab-container">
        <div class="tab active" id="login-tab" onclick="switchTab('login')">Sign In</div>
        <div class="tab" id="register-tab" onclick="switchTab('register')">Register</div>
      </div>
      {% else %}
      <p class="text-center text-sm mb-4" style="color: var(--muted-foreground);">
        Enter your username to continue
      </p>
      {% endif %}

      {% if login_error %}
      <div class="mb-4 p-3 rounded" style="background-color: rgba(239, 68, 68, 0.1); border: 1px solid var(--destructive); color: var(--destructive);">
        {{ login_error }}
      </div>
      {% endif %}

      <!-- Login Tab Content -->
      <div class="tab-content active" id="login-content">
        <form method="POST" action="/auth">
          <input type="hidden" name="action" value="login">

          <div class="space-y-4">
            <div>
              <label for="login-email" class="block text-sm font-medium mb-1" style="color: var(--foreground);">Username</label>
              <input
                id="login-email"
                name="email"
                type="text"
                class="shadcn-input"
                placeholder="Enter your username"
                value="{{ login_email|default('') }}"
                required
              >
            </div>

            {% if require_password %}
            <div>
              <div class="flex items-center justify-between mb-1">
                <label for="login-pass" class="block text-sm font-medium" style="color: var(--foreground);">Password</label>
                <a href="#" class="text-sm" style="color: var(--primary);">Forgot password?</a>
              </div>
              <input
                id="login-pass"
                name="pass"
                type="password"
                class="shadcn-input"
                required
              >
            </div>
            {% endif %}

            <button type="submit" class="w-full shadcn-button shadcn-button-primary">
              {% if require_password %}Sign In{% else %}Continue{% endif %}
            </button>
          </div>
        </form>
      </div>

      {% if require_password %}
      <!-- Register Tab Content (only shown when password is required) -->
      <div class="tab-content" id="register-content">
        <form method="POST" action="/register">
          <input type="hidden" name="action" value="signup">

          <div class="space-y-4">
            <div>
              <label for="register-email" class="block text-sm font-medium mb-1" style="color: var(--foreground);">Username</label>
              <input
                id="register-email"
                name="email"
                type="text"
                class="shadcn-input"
                placeholder="Enter your username"
                required
              >
            </div>

            <div>
              <label for="register-pass" class="block text-sm font-medium mb-1" style="color: var(--foreground);">Password</label>
              <input
                id="register-pass"
                name="pass"
                type="password"
                class="shadcn-input"
                placeholder="Create a password"
                required
              >
            </div>

            <button type="submit" class="w-full shadcn-button shadcn-button-primary">
              Register
            </button>
          </div>
        </form>
      </div>
      {% endif %}
    </div>
  </div>

  <script>
    function switchTab(tabName) {
      // Hide all tabs and content
      document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
      });
      document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
      });

      // Activate selected tab
      document.getElementById(tabName + '-tab').classList.add('active');
      document.getElementById(tabName + '-content').classList.add('active');
    }

    // Check if we need to show register tab on page load
    document.addEventListener('DOMContentLoaded', function() {
      const errorElement = document.querySelector('.mb-4.p-3.rounded');
      if (errorElement && errorElement.textContent.includes('registration')) {
        switchTab('register');
      }
    });
  </script>
</body>
</html>