{% extends "base.html" %}
{% load static %}

{% block title %}Sign In - AI ML Operations{% endblock %}

{% block content %}
<div class="section" style="min-height: 70vh; display: flex; align-items: center; justify-content: center;">
    <div class="container" style="max-width: 450px;">
        <div style="background: var(--surface-color); border: 1px solid rgba(0, 243, 255, 0.2); border-radius: 12px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
            <h2 class="section-title text-center" style="margin-bottom: 2rem;">Sign In</h2>
            
            {% if form.errors %}
            <div style="background: rgba(255, 68, 68, 0.1); border: 1px solid #ff4444; color: #ff4444; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;">
                Your username and password didn't match. Please try again.
            </div>
            {% endif %}

            <form method="post" action="{% url 'login' %}">
                {% csrf_token %}
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label for="id_username" style="color: var(--text-color); display: block; margin-bottom: 0.5rem; font-weight: 500;">Username / Email</label>
                    <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username" class="form-control" style="width: 100%; padding: 0.8rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: white;">
                </div>
                
                <div class="form-group" style="margin-bottom: 2rem;">
                    <label for="id_password" style="color: var(--text-color); display: block; margin-bottom: 0.5rem; font-weight: 500;">Password</label>
                    <input type="password" name="password" autocomplete="current-password" required id="id_password" class="form-control" style="width: 100%; padding: 0.8rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: white;">
                </div>
                
                <button type="submit" class="btn" style="width: 100%; padding: 0.8rem; font-size: 1.1rem; border-radius: 6px; background: var(--primary-color); color: #000; font-weight: bold; border: none; cursor: pointer; transition: 0.2s;" onmouseover="this.style.boxShadow='0 0 15px var(--primary-color)'" onmouseout="this.style.boxShadow='none'">Sign In</button>
                <input type="hidden" name="next" value="{{ next|default:'/' }}">
            </form>
        </div>
    </div>
</div>
{% endblock %}