{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Admin | Login</title>
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport" />

    <!-- Fonts and icons -->
    <script src="{% static 'assets/js/plugin/webfont/webfont.min.js' %}"></script>
    <script>
        WebFont.load({
            google: { families: ["Public Sans:300,400,500,600,700"] },
            custom: {
                families: [
                    "Font Awesome 5 Solid",
                    "Font Awesome 5 Regular",
                    "Font Awesome 5 Brands",
                    "simple-line-icons",
                ],
                urls: ["{% static 'assets/css/fonts.min.css' %}"],
            },
            active: function () {
                sessionStorage.fonts = true;
            },
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/css/plugins.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/css/admin.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/fontawesome/css/all.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
</head>
<body>
    <canvas id="particles"></canvas>

    <div class="disco-lights" aria-hidden="true">
        <div class="light l1"></div>
        <div class="light l2"></div>
        <div class="light l3"></div>
        <div class="light l4"></div>
    </div>

    <div class="d-flex align-items-center justify-content-center min-vh-100">
        <div class="login-card p-5" style="width: 100%; max-width: 600px;">
            <div class="text-center mb-4 text-white">
                <h2>ADMIN LOGIN</h2>
                <small style="color: #c19319;">Sign into your account</small>
            </div>
            
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
                {% endif %}
                
            <form method="POST" class="form-wrapper">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" class="form-control py-3" id="username" name="username" placeholder="Enter username" required autofocus>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="password" class="form-label">Password</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input type="password" class="form-control py-3" id="password" name="password" placeholder="Enter password" required>
                    </div>
                </div>

                <button type="submit" class="btn btn--primary btn--large btn--full">
                    <i class="fas fa-sign-in-alt me-2"></i>Sign In
                </button>
            </form>

            <div class="text-center mt-4">
                <small>&copy; <script>document.write(new Date().getFullYear())</script>The Wristbands Company</small>
            </div>
        </div>
    </div>

    <!-- Core JS Files -->
    <script src="{% static 'assets/js/core/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
</body>
</html>
