<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Login - Familiar Admin{% endblock %}

{% block content %}
<div class="min-h-[80vh] flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
        <div class="text-center mb-8">
            <span class="text-5xl">🐍</span>
            <h1 class="text-2xl font-bold text-gray-800 mt-4">Familiar Admin</h1>
            <p class="text-gray-500 mt-2">Sign in to your account</p>
        </div>
        
        {% if sso_enabled %}
        <!-- SSO Login Options -->
        <div class="space-y-3 mb-6">
            {% if sso_provider == 'google' %}
            <a href="{{ url_for('admin.sso_login') }}" 
               class="w-full py-3 bg-white border border-gray-300 rounded-lg font-semibold hover:bg-gray-50 transition flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path fill="#4285F4" 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 fill="#34A853" 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 fill="#FBBC05" 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 fill="#EA4335" 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>
                Sign in with Google
            </a>
            {% elif sso_provider == 'microsoft' %}
            <a href="{{ url_for('admin.sso_login') }}" 
               class="w-full py-3 bg-white border border-gray-300 rounded-lg font-semibold hover:bg-gray-50 transition flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" viewBox="0 0 21 21">
                    <rect fill="#f25022" x="1" y="1" width="9" height="9"/>
                    <rect fill="#00a4ef" x="1" y="11" width="9" height="9"/>
                    <rect fill="#7fba00" x="11" y="1" width="9" height="9"/>
                    <rect fill="#ffb900" x="11" y="11" width="9" height="9"/>
                </svg>
                Sign in with Microsoft
            </a>
            {% else %}
            <a href="{{ url_for('admin.sso_login') }}" 
               class="w-full py-3 bg-white border border-gray-300 rounded-lg font-semibold hover:bg-gray-50 transition flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
                Sign in with SSO
            </a>
            {% endif %}
        </div>
        
        <div class="relative my-6">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white text-gray-500">Or continue with email</span>
            </div>
        </div>
        {% endif %}
        
        <form method="POST" class="space-y-6">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                    Email Address
                </label>
                <input type="email" 
                       id="email" 
                       name="email" 
                       required
                       {% if not sso_enabled %}autofocus{% endif %}
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                       placeholder="you@organization.org">
            </div>
            
            <button type="submit" 
                    class="w-full py-3 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition">
                Send Login Link
            </button>
        </form>
        
        <p class="text-center text-sm text-gray-500 mt-6">
            We'll email you a magic link for password-free sign in.
        </p>
    </div>
</div>
{% endblock %}
