<?php echo $header; ?>
<div class="container-fluid">
  <div class="row center-xs text-center">
    <div class="col-xs-12">
      <div class="content-box">
        <span class="text-x-large text-dark visible-block"><?php echo $text_login; ?></span>
        <?php if ($error_warning) { ?>
          <span class="text-small text-error text-center"><?php echo $error_warning; ?></span>
        <?php } ?>
      </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="content-box padding-x-large background-white shadow-small">
        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
          <label class="field field-medium bottom-margin-medium">
            <i class="fas fa-user field-icon"></i>
            <input type="text" name="username" value="<?php echo $username; ?>" class="field-entry" placeholder="<?php echo $entry_username; ?>">
          </label>

          <label class="field field-medium bottom-margin-medium">
            <i class="fas fa-lock field-icon"></i>
            <input type="password" name="password" id="password" class="field-entry" placeholder="<?php echo $entry_password; ?>">
            <i class="far fa-eye field-icon eye-icon" id="toggle-password"></i>
          </label>
          <script>
            document.getElementById('toggle-password').addEventListener('click', function () {
              var passwordField = document.getElementById('password');
              var passwordIcon = document.getElementById('toggle-password');

              if (passwordField.type === 'password') {
                passwordField.type = 'text'; 
                passwordIcon.classList.remove('fa-eye');
                passwordIcon.classList.add('fa-eye-slash'); 
              } else {
                passwordField.type = 'password'; 
                passwordIcon.classList.remove('fa-eye-slash');
                passwordIcon.classList.add('fa-eye'); 
              }
            });
          </script>

          <?php if ($google_captcha) { ?>
          <div class="g-recaptcha bottom-margin-medium" data-sitekey="<?php echo $site_key ?>"></div>
          <?php if($error_google_captcha){ ?>
            <span class="error bottom-margin-medium"><?php echo $error_google_captcha; ?></span>
          <?php } ?>
          <script>
            var onloadCallback = function() {
              var element = document.querySelector('.g-recaptcha');
              if (element) {
                var site_key = element.getAttribute('data-sitekey');
                grecaptcha.render(element, {
                  'sitekey' : site_key
                });
              }
            };
          </script>
          <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
          <?php } else if ($default_captcha) { ?>
          <label class="field field-medium bottom-margin-medium">
            <input type="text" class="field-entry" name="captcha" id="captcha" value="" placeholder="<?php echo $entry_captcha_placeholder; ?>">
            <img src="index.php?route=common/login/captcha" alt="" class="visible-block top-margin-small" />
            <span class="error bottom-margin-medium"><?php echo $error_captcha; ?></span>
          </label>
          <?php } ?>


          <div class="flex between-xs middle-xs">
            <?php if ($forgotten) { ?>
              <a href="<?php echo $forgotten; ?>" class="text-primary text-decoration-none">
                <span class="text-small"><?php echo $text_forgotten; ?></span>
              </a>
            <?php } ?>
            <button type="submit" class="btn-default btn-medium btn-primary">
              <span><?php echo $button_login; ?></span>
            </button>
            <?php if ($redirect) { ?>
              <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
            <?php } ?>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
<div class="container-login center-middle-absolute">

</div>

<?php echo $footer; ?>
