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

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 70vh;">
    <div class="col-md-5 col-lg-4">
        <div class="card glass-card border-0 shadow-lg p-2">
            <div class="card-body p-4 p-md-5">
                <div class="text-center mb-5">
                    <div class="bg-primary text-white rounded-4 d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px; box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);">
                        <i data-lucide="shield-check" size="32"></i>
                    </div>
                    <h2 class="fw-bold text-dark">{{ project_name|default:"DN-WRS" }}</h2>
                    <p class="text-muted small">Masukkan kredensial Anda untuk mengakses portal</p>
                </div>
                
                {% if form.errors %}
                <div class="alert alert-danger border-0 small py-3 rounded-4 d-flex align-items-center mb-4">
                    <i data-lucide="alert-circle" class="me-2" size="18"></i>
                    <span>Username atau password salah.</span>
                </div>
                {% endif %}

                <form method="post" action="{% url 'login' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="id_username" class="form-label small fw-bold text-uppercase opacity-50">Username</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-light rounded-start-3">
                                <i data-lucide="user" size="18" class="text-muted"></i>
                            </span>
                            <input type="text" name="username" autofocus maxlength="150" required id="id_username" class="form-control rounded-end-3 py-2 border-light bg-light">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="id_password" class="form-label small fw-bold text-uppercase opacity-50">Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-light rounded-start-3">
                                <i data-lucide="lock" size="18" class="text-muted"></i>
                            </span>
                            <input type="password" name="password" required id="id_password" class="form-control rounded-end-3 py-2 border-light bg-light">
                        </div>
                    </div>
                    
                    <div class="d-grid pt-2">
                        <button type="submit" class="btn btn-primary py-3 rounded-3 d-flex align-items-center justify-content-center">
                            <span>Masuk</span>
                            <i data-lucide="arrow-right" class="ms-2" size="18"></i>
                        </button>
                    </div>
                    
                    <input type="hidden" name="next" value="{{ next }}">
                </form>
            </div>
        </div>
        <div class="text-center mt-4 opacity-50">
            <small>Diproteksi oleh DN-Security</small>
        </div>
    </div>
</div>

<style>
    body {
        background: radial-gradient(circle at 0% 0%, rgba(67, 97, 238, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 100% 100%, rgba(114, 9, 183, 0.05) 0%, transparent 50%),
                    linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
    }
</style>
{% endblock %}