{% extends "base_login.html" %}

{% block title %}Sign in with Email - {{ config.INSTANCE_NAME }}{% endblock %}

{% block content %}
<div class="login-page">
    <div class="login-split">
        <div class="login-features">
            <div class="features-content">
                <h1 class="features-title">{{ config.INSTANCE_NAME }}</h1>
                <p class="features-subtitle">
                    Enter your email address and we'll send you a sign-in link.
                </p>
            </div>
        </div>

        <div class="login-card-wrapper">
            <div class="login-card">
                <h2>Sign In with Email</h2>
                <p class="login-description">
                    We'll send a magic link to your email. Click it to sign in &mdash; no password needed.
                </p>

                <form method="POST" action="{{ url_for('email_auth.send_magic_link') }}" class="login-form" style="width: 100%; max-width: 320px;">
                    <div class="form-group" style="margin-bottom: 16px;">
                        <label for="email" style="display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px;">Email Address</label>
                        <input type="email"
                               id="email"
                               name="email"
                               placeholder="you@{{ allowed_domain or 'company.com' }}"
                               required
                               autocomplete="email"
                               autofocus
                               style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; box-sizing: border-box;">
                    </div>

                    <button type="submit" class="btn btn-primary" style="width: 100%;">
                        Send Sign-In Link
                    </button>
                </form>

                {% if allowed_domain %}
                <p class="login-note">
                    For <strong>@{{ allowed_domain }}</strong> email addresses.
                </p>
                {% endif %}

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

                <a href="{{ url_for('auth.login') }}" class="btn btn-secondary" style="width: 100%; max-width: 280px;">
                    Back to Login
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}