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

{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In" %}{% endblock title %}

{% block content %}
<div class="row justify-content-center pt-5">
    <div class="col-sm-9 col-md-7 col-lg-6">
        <div class="card shadow-sm">
            <div class="card-body p-4 p-sm-5">
                <div class="text-center mb-4">
                    <div class="d-inline-block rounded-3 bg-primary text-white fs-2 lh-1 p-3 mb-3"><i class="bi bi-hdd-network"></i></div>
                    <h1 class="h3 fw-bold mb-1">WebVirtCloud</h1>
                    <p class="text-body-secondary small mb-0">{% trans "Virtualization Management Console" %}</p>
                </div>

                {% if form.errors %}
                    <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                        <i class="bi bi-exclamation-triangle-fill fs-5 me-2 flex-shrink-0"></i>
                        <div>{% trans "Incorrect username or password." %}</div>
                    </div>
                {% endif %}

                <form id="form-signin" method="post" aria-label="Login form">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label small fw-medium" for="id_username">{% trans "Username" %}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                            <input type="text" id="id_username" class="form-control" name="username" placeholder="{% trans 'Enter username' %}" autocapitalize="none" autocorrect="off" autofocus required>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label small fw-medium" for="id_password">{% trans "Password" %}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
                            <input type="password" id="id_password" class="form-control" name="password" placeholder="{% trans 'Enter password' %}" required>
                            <button class="btn btn-outline-secondary" type="button" id="btn-toggle-pwd" tabindex="-1" aria-label="{% trans 'Toggle password visibility' %}">
                                <i class="bi bi-eye" id="toggle-icon"></i>
                            </button>
                        </div>
                    </div>

                    <input type="hidden" name="next" value="{{ next }}">

                    <button id="btn-signin" class="btn btn-primary w-100 py-2" type="submit" data-busy-text="{% trans "Signing in..." %}">
                        <i class="bi bi-box-arrow-in-right me-1"></i>
                        <span id="btn-text">{% trans "Sign In" %}</span>
                    </button>
                </form>

                <div class="d-flex align-items-center small text-body-secondary border-top mt-4 pt-3">
                    <span class="d-inline-block rounded-circle p-1 bg-success me-2" aria-hidden="true"></span>
                    KVM / Libvirt
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script src="{% static 'js/login_form.js' %}"></script>
{% endblock script %}