{% load static %}
<!doctype html>
<html lang="en" data-bs-theme="light">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Bootstrap demo</title>
  <!--favicon-->
  <link rel="icon" href="{% static 'assets/images/favicon-32x32.png' %}" type="image/png">

  <!--plugins-->
  <link href="{% static 'assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css' %}" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{% static 'assets/plugins/metismenu/metisMenu.min.css' %}">
  <link rel="stylesheet" type="text/css" href="{% static 'assets/plugins/metismenu/mm-vertical.css' %}">
  <!--bootstrap css-->
  <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
  <!--main css-->
  <link href="{% static 'assets/css/bootstrap-extended.css' %}" rel="stylesheet">
  <link href="{% static 'sass/main.css' %}" rel="stylesheet">
  <link href="{% static 'sass/dark-theme.css' %}" rel="stylesheet">
  <link href="{% static 'sass/responsive.css' %}" rel="stylesheet">

  </head>

  <body class="bg-login">


    <!--authentication-->

     <div class="container-fluid my-5">
        <div class="row">
           <div class="col-12 col-md-8 col-lg-6 col-xl-5 col-xxl-4 mx-auto">
            <div class="card rounded-4">
              <div class="card-body p-5">
                          <form method="post" class="row g-3">
                            {% csrf_token %}
                            {% if form.errors %}
                              <div class="alert alert-danger w-100">
                                {{ form.errors }}
                              </div>
                            {% endif %}
                            <div class="col-12">
                              <label for="id_username" class="form-label">Username</label>
                              <input type="text" class="form-control" id="id_username" name="username" placeholder="Enter your username" required>
                            </div>
                            <div class="col-12">
                              <label for="id_password" class="form-label">Password</label>
                              <div class="input-group" id="show_hide_password">
                                <input type="password" class="form-control border-end-0" id="id_password" name="password" placeholder="Enter Password" required>
                                <a href="javascript:;" class="input-group-text bg-transparent"><i class="bi bi-eye-slash-fill"></i></a>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" name="remember">
                                <label class="form-check-label" for="flexSwitchCheckChecked">Remember Me</label>
                              </div>
                            </div>
                            <div class="col-md-6 text-end">
                              <a href="auth-basic-forgot-password.html">Forgot Password ?</a>
                            </div>
                        <div class="col-12">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
              </div>
            </div>
           </div>
        </div><!--end row-->
     </div>
      
    <!--authentication-->


    <!--plugins-->
  <script src="{% static 'assets/js/jquery.min.js' %}"></script>

    <script>
      $(document).ready(function () {
        $("#show_hide_password a").on('click', function (event) {
          event.preventDefault();
          if ($('#show_hide_password input').attr("type") == "text") {
            $('#show_hide_password input').attr('type', 'password');
            $('#show_hide_password i').addClass("bi-eye-slash-fill");
            $('#show_hide_password i').removeClass("bi-eye-fill");
          } else if ($('#show_hide_password input').attr("type") == "password") {
            $('#show_hide_password input').attr('type', 'text');
            $('#show_hide_password i').removeClass("bi-eye-slash-fill");
            $('#show_hide_password i').addClass("bi-eye-fill");
          }
        });
      });
    </script>
  
  </body>
</html>