{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="utf-8" />
     <title>Admin Lock Screen</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Admin Lock Screen for Secure Access" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

     <!-- Favicon -->
     <link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">

     <!-- Vendor CSS -->
     <link href="{% static 'assets/css/vendor.min.css' %}" rel="stylesheet" type="text/css" />
     <link href="{% static 'assets/css/icons.min.css' %}" rel="stylesheet" type="text/css" />
     <link href="{% static 'assets/css/app.min.css' %}" rel="stylesheet" type="text/css" />

     <!-- Theme Config -->
     <script src="{% static 'assets/js/config.min.js' %}"></script>
</head>

<body class="authentication-bg">

     <div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
          <div class="container">
               <div class="row justify-content-center">
                    <div class="col-xl-5">
                         <div class="card auth-card">
                              <div class="card-body px-3 py-5">
                                   <div class="text-center mb-2">
                                        <img class="rounded-circle avatar-lg img-thumbnail" src="{% static 'assets/images/users/profile.jpg' %}" alt="avatar">
                                   </div>
                                   <h2 class="fw-bold text-uppercase text-center fs-18">Hi, {{ request.user.username }}</h2>
                                   <p class="text-muted text-center mt-1 mb-4">Enter your password to access the admin panel.</p>

                                   {% if messages %}
                                        {% for message in messages %}
                                             <div class="alert alert-danger text-center" role="alert">
                                                  {{ message }}
                                             </div>
                                        {% endfor %}
                                   {% endif %}

                                   <div class="px-4">
                                        <form method="post" action="{% url 'admin_screenlock' %}" class="authentication-form">
                                             {% csrf_token %}
                                             <div class="mb-3">
                                                  <label class="form-label visually-hidden" for="password">Password</label>
                                                  <input type="password" id="password" name="password" class="form-control bg-light bg-opacity-50 border-light py-2" placeholder="Enter your password" required>
                                             </div>
                                             <div class="mb-1 text-center d-grid">
                                                  <button class="btn btn-danger py-2" type="submit">Login</button>
                                             </div>
                                        </form>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>

     <!-- Vendor JS -->
     <script src="{% static 'assets/js/vendor.js' %}"></script>
     <script src="{% static 'assets/js/app.js' %}"></script>

</body>

</html>
