<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CMS Admin Login | SMK Teratai Putih Global 3 Bekasi</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <style>
    body {
      background: linear-gradient(135deg, #0A192F 0%, #0F2C59 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .login-card {
      background: #FFFFFF;
      width: 100%;
      max-width: 440px;
      padding: 2.5rem;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
    }
    .login-header {
      text-align: center;
      margin-bottom: 2rem;
    }
    .login-brand-icon {
      width: 64px;
      height: 64px;
      background: rgba(15, 44, 89, 0.08);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.25rem;
      font-size: 2rem;
      color: #0F2C59;
    }
    .login-title {
      font-size: 1.5rem;
      font-weight: 800;
      color: #0F2C59;
      margin-bottom: 0.35rem;
    }
    .login-subtitle {
      font-size: 0.88rem;
      color: #64748B;
    }
    .form-group {
      margin-bottom: 1.25rem;
    }
    .form-group label {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: #334155;
      margin-bottom: 0.5rem;
    }
    .input-wrapper {
      position: relative;
    }
    .input-wrapper i {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: #94A3B8;
    }
    .form-control-input {
      width: 100%;
      padding: 0.85rem 1rem 0.85rem 2.75rem;
      border: 1.5px solid #E2E8F0;
      border-radius: 12px;
      font-size: 0.92rem;
      font-family: inherit;
      transition: all 0.2s;
    }
    .form-control-input:focus {
      outline: none;
      border-color: #5C938E;
      box-shadow: 0 0 0 4px rgba(92, 147, 142, 0.15);
    }
    .btn-login {
      width: 100%;
      padding: 0.9rem;
      background: #0F2C59;
      color: #FFFFFF;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.98rem;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 0.5rem;
    }
    .btn-login:hover {
      background: #1A365D;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 44, 89, 0.3);
    }
    .alert-danger {
      background: #FEF2F2;
      border: 1px solid #FCA5A5;
      color: #991B1B;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      font-size: 0.85rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .credentials-hint {
      background: #F8FAFC;
      border: 1px dashed #CBD5E1;
      padding: 0.85rem;
      border-radius: 10px;
      margin-top: 1.5rem;
      font-size: 0.8rem;
      color: #475569;
    }
  </style>
</head>
<body>

  <div class="login-card">
    <div class="login-header">
      <div class="login-brand-icon">
        <i class="fa-solid fa-graduation-cap"></i>
      </div>
      <h1 class="login-title">Panel CMS Admin</h1>
      <p class="login-subtitle">SMK Teratai Putih Global 3 Bekasi</p>
    </div>

    <% if (error) { %>
      <div class="alert-danger">
        <i class="fa-solid fa-circle-exclamation"></i> <%= error %>
      </div>
    <% } %>

    <form action="/admin/login" method="POST">
      <div class="form-group">
        <label for="username">Username / Email</label>
        <div class="input-wrapper">
          <i class="fa-solid fa-user"></i>
          <input type="text" id="username" name="username" class="form-control-input" placeholder="Masukkan username" value="admin" required autofocus>
        </div>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <div class="input-wrapper">
          <i class="fa-solid fa-lock"></i>
          <input type="password" id="password" name="password" class="form-control-input" placeholder="Masukkan password" value="adminteratai3" required>
        </div>
      </div>

      <button type="submit" class="btn-login">
        <i class="fa-solid fa-right-to-bracket" style="margin-right: 0.4rem;"></i> Masuk ke CMS Admin
      </button>
    </form>

    <div class="credentials-hint">
      <strong><i class="fa-solid fa-key text-gold"></i> Kredensial Default Admin:</strong><br>
      • Username: <code>admin</code><br>
      • Password: <code>adminteratai3</code>
    </div>
  </div>

</body>
</html>
