<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <%= title %> | CMS-SIMS
  </title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="/assets/css/variables.css">
  <style>
    body {
      font-family: var(--font-family);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color: var(--primary-color);
    }

    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('/images/bg-login.jpg') center/cover no-repeat fixed;
      opacity: 0.4;
      z-index: 0;
    }

    .main-content {
      width: 100%;
      max-width: 500px;
      padding: 15px;
      position: relative;
      z-index: 1;
    }

    .login-container {
      background-color: var(--bg-card);
      padding: 30px;
      border-radius: var(--border-radius-lg);
      box-shadow: var(--shadow-lg);
    }

    .logo-container {
      text-align: center;
      margin-bottom: 10px;
    }

    .logo-container img {
      width: 100px;
      height: auto;
      margin-bottom: 5px;
    }

    .img-shine {
      position: relative;
      overflow: hidden;
    }

    .img-shine::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s ease;
    }

    .img-shine:hover::after {
      left: 100%;
    }

    .form-control {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary-color) !important;
      box-shadow: 0 0 0 3px rgba(10, 35, 71, 0.1);
    }

    .form-label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #475569;
      font-size: 0.9rem;
    }

    .btn-shine {
      background: linear-gradient(90deg, #0a2347, #163a6f);
      color: white;
      border: none;
      padding: 10px 25px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      width: 100%;
      letter-spacing: 0.5px;
    }

    .btn-shine:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(10, 35, 71, 0.2);
    }

    .btn-shine::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s ease;
    }

    .btn-shine:hover::after {
      left: 100%;
    }

    @media (max-width: 768px) {
      .main-content {
        padding: 15px;
      }

      .login-container {
        padding: 20px;
      }
    }
  </style>
</head>

<body>
  <div class="main-content">
    <!-- Flash Messages Data (Hidden) -->
    <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
      <div id="flash-messages-data" style="display: none;"><%- JSON.stringify({ success_msg: typeof success_msg
          !=='undefined' && success_msg ? success_msg : null, error_msg: typeof error_msg !=='undefined' && error_msg ?
          error_msg : null, error: typeof error !=='undefined' && error ? error : null }) %></div>
      <% } %>

        <div class="login-container">
          <div class="logo-container img-shine">
            <img src="/img/logo/logo-hai-learning.png" alt="Logo">
          </div>

          <div style="text-align: center; margin-bottom: 20px;">
            <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 5px;">Reset Password</h4>
            <p style="color: var(--text-color); font-size: 13px;">Enter your new password</p>
          </div>

          <form action="/auth/reset-password/<%= token %>" method="POST" class="login-form">
            <div class="form-group" style="margin-bottom: 12px;">
              <label for="password" class="form-label">New Password</label>
              <div style="position: relative;">
                <input type="password" class="form-control" id="password" name="password" required autofocus
                  style="padding-right: 40px;">
                <button type="button" class="password-toggle-btn" aria-label="Show password"
                  style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #666; cursor: pointer; padding: 0; z-index: 10;">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 12px;">
              <label for="confirm_password" class="form-label">Confirm New Password</label>
              <div style="position: relative;">
                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required
                  style="padding-right: 40px;">
                <button type="button" class="password-toggle-btn" aria-label="Show password"
                  style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #666; cursor: pointer; padding: 0; z-index: 10;">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>

            <div style="text-align: center; margin-top: 20px;">
              <button type="submit" class="btn-shine">
                Change Password
              </button>
            </div>

            <div style="text-align: center; margin-top: 15px;">
              <a href="/auth/login" style="color: var(--primary-color); text-decoration: none; font-size: 14px;">Back to
                Login</a>
            </div>
          </form>
        </div>

        <div style="margin-top: 20px; text-align: center;">
          <p style="font-size: 12px; color: #fff;">© 2024 Swiss Institute of Management and Sciences. All rights
            reserved.</p>
        </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const flashData = document.getElementById('flash-messages-data');
      if (flashData) {
        try {
          const data = JSON.parse(flashData.innerHTML);
          const container = document.querySelector('.login-container');

          const addAlert = (msg, type) => {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.innerHTML = `
                        ${msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                      `;
            container.insertBefore(alertDiv, container.firstChild);
          };

          if (data.success_msg) addAlert(data.success_msg, 'success');
          if (data.error_msg) addAlert(data.error_msg, 'danger');
          if (data.error) addAlert(data.error, 'danger');

        } catch (e) {
          console.error("Error parsing flash data", e);
        }
      }
    });
  </script>

  <!-- Password Toggle JS -->
  <script src="/js/password-toggle.js"></script>
</body>

</html>