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

{% block title %}Login Vendor - {{ project_name|default:"Pasar UMKM Desa Pemagarsari" }}{% endblock %}

{% block content %}
<section class="py-5" style="background-color: #f8f9fa; min-height: 80vh; display: flex; align-items: center;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card shadow-lg border-0 rounded-4">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px; font-size: 1.5rem;">
                                <i class="fas fa-store"></i>
                            </div>
                            <h2 class="fw-bold mb-1">Login Vendor</h2>
                            <p class="text-muted">Masuk ke akun vendor Anda untuk kelola produk</p>
                        </div>

                        {% if form.errors %}
                        <div class="alert alert-danger rounded-3 small">
                            Username atau password yang Anda masukkan salah. Silakan coba lagi.
                        </div>
                        {% endif %}

                        <form method="post" action="{% url 'vendor_login' %}">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="id_username" class="form-label fw-bold small">Username</label>
                                <input type="text" name="username" class="form-control form-control-lg bg-light border-0" id="id_username" placeholder="Masukkan username" required autofocus>
                            </div>
                            <div class="mb-4">
                                <label for="id_password" class="form-label fw-bold small">Password</label>
                                <input type="password" name="password" class="form-control form-control-lg bg-light border-0" id="id_password" placeholder="Masukkan password" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100 btn-lg rounded-pill fw-bold shadow-sm">
                                Masuk ke Dashboard
                            </button>
                            
                            <input type="hidden" name="next" value="{{ next }}">
                        </form>

                        <div class="text-center mt-4">
                            <p class="small text-muted mb-0">Belum punya akun vendor? <a href="https://wa.me/6281385035662" target="_blank" class="fw-bold text-decoration-none">Hubungi Admin</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}