{% extends "base.html" %}
{% block title %}{% trans %}Login{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="min-h-[70vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-800 p-8">
            <div class="text-center mb-8">
                <div class="w-14 h-14 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-sign-in-alt text-2xl text-primary dark:text-primary-light"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-login">{% trans %}Welcome back{% endtrans %}</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Sign in to your account{% endtrans %}</p>
            </div>

            {% if error %}
            <div class="mb-5 px-4 py-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 text-sm" data-testid="text-login-error">
                <i class="fa fa-exclamation-circle mr-1"></i> {{ error }}
            </div>
            {% endif %}

            {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

            <!-- Social Sign-In -->
            <div class="flex flex-col gap-2 mb-5">
              {% if site_settings is defined and site_settings.get('google_client_id') %}
            <a href="{{ full_url('/auth/google') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" data-testid="btn-google-login">
                <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.2l6.8-6.8C35.8 2.4 30.2 0 24 0 14.7 0 6.7 5.4 2.7 13.3l7.9 6.1C12.5 13.1 17.8 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.2 7-17.1z"/><path fill="#FBBC05" d="M10.6 28.6A14.6 14.6 0 0 1 9.5 24c0-1.6.3-3.1.7-4.6l-7.9-6.1A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.7 10.7l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.6-5.9c-2 1.4-4.6 2.2-7.6 2.2-6.2 0-11.5-4.2-13.4-9.9l-7.9 6.1C6.7 42.6 14.7 48 24 48z"/></svg>
                {% trans %}Continue with Google{% endtrans %}
            </a>
                {% endif %}
               {% if site_settings is defined and site_settings.get('microsoft_client_id') %}
            <a href="{{ full_url('/auth/microsoft') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" data-testid="btn-microsoft-login">
                <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
                {% trans %}Continue with Microsoft{% endtrans %}
            </a>
                 {% endif %}
               {% if site_settings is defined and site_settings.get('apple_client_id') %}
            <a href="{{ full_url('/auth/apple') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-900 dark:bg-black text-white text-sm font-medium hover:bg-black dark:hover:bg-gray-900 transition-all" data-testid="btn-apple-login">
                <svg class="w-5 h-5 flex-shrink-0 fill-current" viewBox="0 0 814 1000" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 376.6 0 312 0 259C0 201 39.2 168.4 52.4 148c18-26.5 49.5-44 80.8-44 44 0 78 25.7 105.5 25.7C266.1 129.7 299.7 102 355 102c16.2 0 62.2 1.3 95.1 40.8c-18.7 18-95.8 61.1-95.8 165.6 0 121.4 100.6 161.2 109.4 164.4l-.1 3.2z"/></svg>
                {% trans %}Continue with Apple{% endtrans %}
            </a>
                {% endif %}
            </div>

            <div class="flex items-center gap-3 mb-5">
                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                <span class="text-xs text-gray-400 dark:text-gray-500">{% trans %}or sign in with email{% endtrans %}</span>
                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
            </div>

            <form method="POST" action="{{ full_url('/login') }}">
                {% if request.args.get('next') %}
                <input type="hidden" name="next" value="{{ request.args.get('next') }}">
                {% endif %}
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-login">{% trans %}Email or Username{% endtrans %}</label>
                    <input type="text" id="input-login" name="login" value="{{ login_val or '' }}" required autocomplete="username"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light transition-all text-sm"
                        placeholder="{% trans %}you@example.com{% endtrans %}" data-testid="input-login">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-password">{% trans %}Password{% endtrans %}</label>
                    <input type="password" id="input-password" name="password" required autocomplete="current-password"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light transition-all text-sm"
                        placeholder="••••••••" data-testid="input-password">
                    <div class="mt-1.5 text-right">
                        <a href="{{ full_url('/forgot-password') }}" class="text-xs text-primary dark:text-primary-light hover:underline" data-testid="link-forgot-password">{% trans %}Forgot password?{% endtrans %}</a>
                    </div>
                </div>
                <button type="submit" class="w-full py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all" data-testid="btn-login">
                    {% trans %}Sign In{% endtrans %}
                </button>
            </form>

            <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
                {% trans %}Don't have an account?{% endtrans %}
                <a href="{{ full_url('/register') }}" class="font-medium text-primary dark:text-primary-light hover:underline" data-testid="link-to-register">{% trans %}Create one free{% endtrans %}</a>
            </div>

            <div class="mt-3 text-center">
                <a href="{{ full_url('/subscribe') }}" class="text-xs text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-all" data-testid="link-pricing">{% trans %}View pricing plans{% endtrans %}</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}