{% extends "base.html" %}
{% block title %}Sign In{% endblock %}

{% block content %}
<div class="login-page">
  <div class="auth-card">
    <div class="logo">
      <img src="{{ url_for('static', filename='logos/logo-horizontal-dark.png') }}" alt="SiteHub" height="36">
    </div>
    <h1>ICP Tracker</h1>
    <p>Sign in with your SiteHub account</p>
    <button type="button" class="btn-microsoft" onclick="signIn()">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23"><path fill="#fff" d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z"/></svg>
      Sign in with Microsoft
    </button>
    <p class="auth-footer">SiteHub ApS</p>
  </div>
</div>
<script>
  async function signIn() {
    const res = await fetch('/api/auth/sign-in/social', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: 'microsoft', callbackURL: '/dashboard' }),
      redirect: 'follow'
    });
    if (res.redirected) {
      window.location.href = res.url;
    } else if (res.ok) {
      const data = await res.json();
      if (data.url) window.location.href = data.url;
    }
  }
</script>
{% endblock %}