<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{meta_content}}">
    <meta name="generator" content="Hugo 0.84.0">
    <title>Employee Login Page</title>
    <!-- Bootstrap core CSS -->
    <link type="text/css" rel="stylesheet" href="https://cdn1.ap-south-1.linodeobjects.com/resource/adminlte3/plugins/bootstrap5/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn1.ap-south-1.linodeobjects.com/resource/adminlte3/plugins/fontawesome-free/css/all.min.css">
    <script src="https://cdn1.ap-south-1.linodeobjects.com/resource/adminlte3/plugins/jquery/jquery.min.js"  type="text/javascript" ></script>
    <script src="https://cdn1.ap-south-1.linodeobjects.com/resource/adminlte3/plugins/bootstrap5/js/bootstrap.bundle.min.js"  type="text/javascript" ></script>
    <link rel="icon" type="image/x-icon" href="/static/site/logo.ico">
    
  </head>
  <body>
  {% comment %} {% if 'Mobile' in request.META.HTTP_USER_AGENT %} {% endcomment %}

    <main class="form-signin"> 
        <form method="post" >
          {% csrf_token %}

            <img class="mb-4" src="/static/site/logo.PNG" alt="" align="middle" style="margin-left: 5rem;">
            <h1 class="h3 mb-3 fw-normal">AYUSH | Employee Login</h1>
        
            <div class="form-floating">
              {% if str_username  %}
              <input type="text" class="form-control" id="floatingInput" name="Username" placeholder="username", value="{{str_username}}">
              {% else %}
              <input type="text" class="form-control" id="floatingInput" name="Username" placeholder="username">
              {% endif %}
              
              <label for="floatingInput">User Name</label>
            </div>
            <div class="form-floating">
              <input type="password" class="form-control" id="floatingPassword" name="password" placeholder="Password">
              <label for="floatingPassword">Password</label>
            </div>

            <div class="form-row">
              <div class="form-group col-md-6">
                <input type="text" class="form-control" readonly id ="capt">
              </div>

              <div class="form-group col-md-6">
                <input type="text" class="form-control" id="textinput">
              </div>
              
             
            </div>
            <label for="floatingPassword">Enter Capcha : </label>
        
            <button onclick="validcap()" class="w-100 btn btn-lg btn-primary" type="submit">Login</button>
          </form>
    </main>
    {% if messages %}

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      {% for message in messages %}
      <div id="liveToast" class="toast toast-entry " role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">{{title}}</strong>
          <small>Notification</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body btn-{{message.tags}}">
          {{ message|safe }}
        </div>
      </div>
     {% endfor %}
    </div> 
    <script type="module">
        var toasts = document.getElementsByClassName("toast-entry");
        for (var i = 0; i < toasts.length; i++) {
          const toastLiveExample = toasts.item(i)
          const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
          toastBootstrap.show()
        }
    </script>  
  

</body>
<style>
    html,
    body {
      height: 100%;
    }
    
    body {
      display: flex;
      align-items: center;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #f5f5f5;
    }
    
    .form-signin {
      width: 100%;
      max-width: 380px;
      padding: 15px;
      margin: auto;
    }
    
    .form-signin .checkbox {
      font-weight: 400;
    }
    
    .form-signin .form-floating:focus-within {
      z-index: 2;
    }
    
    .form-signin input[type="email"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    
</style>
</html>    