{extends "base.tpl"}
{block title} {'login'|translate:'web'} | {$dbcfg.index_title}{/block}

{block body_class}class="login"{/block}

{block body}

   {if isset($error) && !empty($error)}
      <div class="container alert-container">
         <div class="row">
            <div class="alert alert-warning alert-dismissable"><span class="glyphicon glyphicon-exclamation-sign"></span>
               {if $error == 1}{'errorNotAllValid'|translate:'index'}{/if}
               {if $error == 2}{'errorBadLogin'|translate:'index'}{/if}
               {if $error == 3}{'errorBadPassw'|translate:'index'}{/if}
               {if $error == 4}{'errorLoginExpired'|translate:'index'}{/if}
               {if $error == 5}{'errorLogout'|translate:'index'}{/if}
            </div>
         </div>
      </div>
   {/if}
   <div class="container form-container" style="background-image: url('/admin/static/images/login/form_background.jpg');">
      <div class="row">
         <div class="col-md-12 text-center">
            <a href="https://www.wpj.cz/">
               <img class="logo" src="/admin/static/images/logo.svg?v1" width="150" alt="wpjshop">
            </a>
         </div>
      </div>

      <form name="login" method="post" action="index.php" class="form-horizontal login-form">
         <input type="hidden" name="url" value="{$url}">

         <div class="form-group">
            <div class="col-md-12">
               <label class="form-control-label">Jméno</label>
               <div class="input-group">
                  <input type="text" class="form-control input-lg" name="login" size="30" maxlength="100" value="{if isset($login)}{$login}{/if}" autocomplete="off">
                  {if $error == 1}<span class="warning glyphicon glyphicon-exclamation-sign" title="{'errorNotAllValid'|translate:'index'}"></span>{/if}
                  {if $error == 2}<span class="error glyphicon glyphicon-remove-sign" title="{'errorBadLogin'|translate:'index'}"></span>{/if}
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-12">
               <label class="form-control-label">Heslo</label>
               <div class="input-group">
                  <input type="password" class="form-control input-lg" name="password" size="30" maxlength="100" value="{if isset($password)}{$password}{/if}" autocomplete="off">
                  {if $error == 1}<span class="warning glyphicon glyphicon-exclamation-sign" title="{'errorNotAllValid'|translate:'index'}"></span>{/if}
                  {if $error == 3}<span class="error glyphicon glyphicon-remove-sign" title="{'errorBadPassw'|translate:'index'}"></span>{/if}
               </div>
            </div>
         </div>
         <input data-hash type="hidden" name="hash">
         <div id="icon-hash" hidden>
            <span  class="glyphicon glyphicon-barcode"></span>
         </div>
         <input type="hidden" name="url" value="{if isset($url)}{$url}{/if}">
         <div class="row">
            <div class="col-md-12 text-center">
               <button type="submit" class="btn btn-success btn-lg" name="Submit">{'submitLogin'|translate:'index'}</button>
               {if isLocalDevelopment()}
                  <script>
                     function loginWpjAdmin() {
                        $('input[name=password],input[name=login]').val('wpjadmin');
                        $('button[type=submit]').click();
                     }
                  </script>
                  <button type="button" class="btn btn-warning btn-lg" onclick="loginWpjAdmin()">WpjAdmin</button>
               {/if}
            </div>
         </div>


         <script type="text/javascript">
            {if $error == 3}
            document.forms['login'].password.focus();
            {else}
            document.forms['login'].login.focus();
            {/if}
         </script>
      </form>

      <div class="footer">
         <p>
            <span>Provozovatel: <a href="http://www.wpj.cz/">wpj s.r.o.</a>&nbsp;&nbsp;|&nbsp;&nbsp;Podpora: <a href="mailto:wpj@wpj.cz">wpj@wpj.cz</a></span></p>
      </div>
   </div>
{/block}

<script>
   {block onready}
   $('.form-control').on('keydown', function() {
      $(this).parent('.input-group').find('span').hide();
   });
   {/block}
</script>

{block "js-onready" append}
      <script src="/admin/static/js/qwebchannel.js?v4"></script>
      <script>
         // Deprecated
         if (true/*!window.qt*/) {
            function onCodeReceived(code) {
               $('[data-hash]').val(code);
               $('button[type=submit]').click();
            }
         }
      </script>
      <script src="/admin/static/js/webchannel.js?v4"></script>
      <script>
         if (false/*window.qt*/) {
            window.webChannel.then(() => {
               window.kupshopCheckout.codeReceived.connect(function(code) {
                  $('[data-hash]').val(code);
                  $('button[type=submit]').trigger('click');
               });
               $('#icon-hash').show();
            })
         }
         // Deprecated
         if (true/*!window.qt*/) {
            $iconHash = $('#icon-hash');
            const closeIcon = () => $iconHash.hide();
            scannerSocket.addEventListener('open', () => $iconHash.show());
            scannerSocket.addEventListener('close', closeIcon);
            scannerSocket.addEventListener('error', closeIcon);
         }
      </script>
{/block}