{% extends "portal/base.html" %}
{% block title %}Login{% endblock %}

{% block content %}
<div style="max-width: 420px; margin: 80px auto;">
    <div style="text-align: center; margin-bottom: 32px;">
        <a href="/" style="font-weight: 700; font-size: 24px; color: var(--text-bright); text-decoration: none;">AgenticTrade</a>
        <h1 style="font-size: 20px; font-weight: 600; margin-top: 16px; color: var(--text-bright);">Provider Login</h1>
        <p style="font-size: 14px; color: var(--text-dim); margin-top: 8px;">Manage your APIs, track revenue, and grow your business.</p>
    </div>

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

    <div class="portal-card">
        <form method="POST" action="/portal/login" class="portal-form" style="max-width: 100%;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required placeholder="you@example.com" autocomplete="email">

            <label for="password">Password</label>
            <input type="password" id="password" name="password" required placeholder="Enter your password" autocomplete="current-password">

            <button type="submit" class="btn-primary" style="margin-top: 8px;">Sign In</button>
        </form>
    </div>

    <p style="text-align: center; font-size: 14px; color: var(--text-dim); margin-top: 20px;">
        Don't have an account? <a href="/portal/register" style="color: var(--accent);">Register as a provider</a>
    </p>
</div>
{% endblock %}