{% extends "base.html" %}

{% block title %}ACA — Login{% endblock %}

{% block body %}
<div class="login-page">
    <div class="login-card">
        <div class="login-header">
            <span class="logo-icon">&#9670;</span>
            <h1>ACA Platform</h1>
            <p>Sign in to your account</p>
        </div>

        {% if form.errors %}
        <div class="login-error">Invalid username or password.</div>
        {% endif %}

        <form method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_username">Username</label>
                <input type="text" id="id_username" name="username" autofocus required
                       placeholder="Enter your username">
            </div>
            <div class="form-group">
                <label for="id_password">Password</label>
                <input type="password" id="id_password" name="password" required
                       placeholder="Enter your password">
            </div>
            <button type="submit" class="btn btn-primary btn-full">Sign In</button>
        </form>
        <p style="text-align:center; margin-top:18px; font-size:14px; color:var(--text-secondary, #888);">
            Vendor? <a href="/vendor/register/" style="color:var(--accent-light, #7c6cff);">Create an account</a>
        </p>
    </div>
</div>
{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock %}