<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${title}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="${make_media_url('css/layout.css', 'admin2')}" rel="stylesheet" />
    <%block name="css">
    </%block>
    <%block name="header_js">
    </%block>
  </head>
  <body data-bs-theme="dark">
  <div class="loader-div" id="loader-div" style="display:none;">
        <span class="loader">
        <span></span>
        <span></span>
        </span>
    </div>
   <div class="container-fluid m-0 p-0">
    <div class="d-flex align-items-center" style="height:100vh;">
        <div class="col-3"></div>   
        <div class="col">
            <%block name="content">
            <div class="card">
              <div class="card-header bg-primary">
                ${_('Login')}
              </div>
              <div class="card-body">
                <form method="POST" action="${url_for('admin_app.check_login_admin')}" id="login_form" class="needs-validation" novalidate>
                  <div class="mb-3">
                    <label for="username_form" class="form-label">${_('Username')}</label>
                    <input type="text" class="form-control form-control-lg has-validation" id="username_form" name="password" aria-describedby="username" autocomplete="off" required>
                    <div class="invalid-feedback">
                        
                    </div>
                  </div>
                  <div class="mb-3">
                    <label for="password_form" class="form-label">Password</label>
                    <input type="password" class="form-control form-control-lg has-validation" id="password_form" name="password" autocomplete="off" required>
                    <div class="invalid-feedback" id="login_invalid">
                        ${_('Error: username or password invalid')}
                    </div>
                  </div>
                  <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember_login_form" name="remember_login" value="1">
                    <label class="form-check-label" for="autologin">${_('Remember login')}</label>
                  </div>
                  <button type="submit" id="login_submit" class="btn btn-primary">Submit</button>
                  ${csrf_token()|n}
                </form>
              </div>
              </%block>
            </div>
        </div>   
        <div class="col-3"></div>
    </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script>
            document.documentElement.setAttribute('data-bs-theme','dark');
        </script>
        <%block name="jscript">
        <script>
            
            /*setTimeout(function () {
        
                $('#loader-div').fadeOut(2000);
                
                
            }, 1000);*/

            $(document).ready( function () {
        
                $('#login_form').submit( function (event) {
                    
                    $('#username_form').get(0).setCustomValidity("");
                    $('#password_form').get(0).setCustomValidity("");
                    
                    form=document.getElementById('login_form');
                    
                    error=false;
        
                    if (!form.checkValidity()) {
                      
                        error=true;
                      
                    }
                    
                    event.preventDefault();
                    event.stopPropagation();
                    
                    form.classList.add('was-validated');
                    
                    if(!error) {
                    
                        $('#loader-div').show();
                    
                        $('#login_submit').prop('disabled', true);
                        
                        const is_checked=document.getElementById('remember_login_form').checked;
                        
                        data_form={'username': $('#username_form').val(), 'password': $('#password_form').val(), 'csrf_token': $("#csrf_token").val(), 'remember_login': is_checked};
                        
                        $.ajax({
                            url: "${url_for('admin_app.check_login_admin')}",
                            method: "POST",
                            dataType: "json",
                            contentType : 'application/json',
                            data: JSON.stringify(data_form),
                            error: function (data) {
                        
                               console.log(JSON.stringify(data)); 
                               $('#loader-div').hide();
                               $('#login_submit').prop('disabled', false);
                               
                               alert('${_("Error: please, try again later")}');
                            
                            }, 
                            }).done(function(data) {
                            
                                if(data.error==0)
                                {
                                    
                                    //location.reload()
                                    location.href="${url_for('admin_app.home_admin')}";
                                
                                }
                                else
                                {
                                 
                                     $('#username_form').get(0).setCustomValidity("${_('Error: username or password invalid')}");
                                     $('#password_form').get(0).setCustomValidity("${_('Error: username or password invalid')}");
                                     
                                     console.log(JSON.stringify(data));
                                     
                                     if(data.no_login) {
                                         
                                         $('#login_invalid').html("${_('Error: you try login excessive times, please wait some minutes for try again')}");
                                         
                                     }
                                     else {
                                         
                                         $('#login_invalid').html("${_('Error: username or password invalid')}");
                                         
                                     }
                                 
                                    $('#login_submit').prop('disabled', false);
                                    
                                    $('#loader-div').hide();
                                    
                                    
                                }
                            
                            });
                    
                    }
                    
                    return false;
                    
                });
            
            });

        </script>
        </%block>
  </body>
</html>
