{% extends "base.html" %}
{% block title %}Register – Resume Ranker API{% endblock %}

{% block extra_head %}
{#
    The Google Fonts link and the main CSS link are now in base.html.
    You only need to include additional head elements here if they are
    *specific* to the register page and not already in base.html.
    For this example, we don't need anything extra here if base.html
    is correctly set up.
#}
{% endblock %}

{% block content %}
<header class="container sticky-header">
  <div class="logo">ResumeRanker<span style="color:var(--accent)">.API</span></div>
  <nav class="nav-links" id="navLinks">
    <a href="{{ url_for('auth.landing') }}">Home</a>
    <a href="{{ url_for('auth.landing') }}#how">How it works</a>
    <a href="{{ url_for('auth.landing') }}#demo">Live Demo</a>
    <a href="{{ url_for('auth.landing') }}#docs">Docs</a>
    <a href="{{ url_for('auth.landing') }}#pricing">Pricing</a>
  </nav>
  <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">🌙</button>
  <button class="hamburger" id="hamburger" aria-label="Open menu">
    <span></span><span></span><span></span>
  </button>
</header>

<main class="login-container"> {# Reusing .login-container and .login-card for consistent styling #}
  <div class="login-card">
    <div class="login-header">
      <h1 class="login-title">Create an account</h1>
      <p class="login-subtitle">Join ResumeRanker today!</p>
    </div>

    {% if error %}
    <div class="error-message">{{ error }}</div>
    {% endif %}

    {% if success %}
    <div class="success-message">{{ success }}</div>
    {% endif %}

    <form method="POST">
      <div class="form-group">
        <label for="username" class="form-label">Username</label>
        <input type="text" id="username" name="username" class="form-input" placeholder="Choose a username" required>
      </div>

      <div class="form-group">
        <label for="email" class="form-label">Email address</label>
        <input type="email" id="email" name="email" class="form-input" placeholder="Enter your email" required>
      </div>

      <div class="form-group">
        <label for="password" class="form-label">Password</label>
        <input type="password" id="password" name="password" class="form-input" placeholder="Create your password" required>
      </div>

      <button type="submit" class="login-btn">Sign up</button>
    </form>

    <div class="divider">
      <span>or continue with</span>
    </div>

    <button class="social-btn" onclick="signInWithGoogle()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
        <path 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 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 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.93l2.85-2.22.81-.62z"/>
        <path 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>
      Continue with Google
    </button>

    <button class="social-btn" onclick="signInWithGitHub()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
      </svg>
      Continue with GitHub
    </button>

    <div class="signup-link">
      Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a>
    </div>
  </div>
</main>
{% endblock %}

{% block extra_scripts %}
{#
    The scripts for theme toggle and hamburger menu are generic UI elements
    and can remain here, as they apply to the header on both login and register pages.
    Social login functions are also relevant.
#}
<script>
  // Light/Dark mode toggle
  const themeToggle = document.getElementById('themeToggle');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
    themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
  }
  const savedTheme = localStorage.getItem('theme');
  setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
  themeToggle.onclick = () => {
    const current = document.documentElement.getAttribute('data-theme');
    setTheme(current === 'dark' ? 'light' : 'dark');
  };

  // Hamburger menu toggle
  const hamburger = document.getElementById('hamburger');
  const navLinks = document.getElementById('navLinks');
  hamburger.onclick = function() {
    navLinks.classList.toggle('open');
    hamburger.classList.toggle('open');
  };
  
  // Close menu when clicking a link (on mobile)
  Array.from(navLinks.getElementsByTagName('a')).forEach(link => {
    link.onclick = () => {
      if (window.innerWidth <= 900) {
        navLinks.classList.remove('open');
        hamburger.classList.remove('open');
      }
    };
  });

  // Social login functions
  function signInWithGoogle() {
    // Implement Google OAuth for registration
    console.log('Google sign-up clicked');
  }

  function signInWithGitHub() {
    // Implement GitHub OAuth for registration
    console.log('GitHub sign-up clicked');
  }
</script>
{% endblock %}