<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NDUTH WiFi — Login</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #0a2540 0%, #1a4a7a 50%, #0d3b6e 100%);
      font-family: 'Segoe UI', Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .card {
      background: white;
      border-radius: 20px;
      width: 100%;
      max-width: 420px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    }

    .header {
      background: linear-gradient(135deg, #0a2540, #1a4a7a);
      padding: 32px;
      text-align: center;
    }

    .header .logo {
      width: 64px;
      height: 64px;
      background: rgba(255,255,255,0.15);
      border-radius: 16px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .header h1 { color: white; font-size: 18px; font-weight: 700; }
    .header p  { color: rgba(255,255,255,0.7); font-size: 12px; margin-top: 6px; }

    .body { padding: 32px; }

    .flash-error {
      background: #fef2f2; border: 1px solid #fca5a5;
      border-radius: 10px; padding: 10px 14px;
      margin-bottom: 18px; color: #dc2626; font-size: 13px;
    }
    .flash-success {
      background: #f0fdf4; border: 1px solid #86efac;
      border-radius: 10px; padding: 10px 14px;
      margin-bottom: 18px; color: #16a34a; font-size: 13px;
    }
    .flash-warning {
      background: #fffbeb; border: 1px solid #fcd34d;
      border-radius: 10px; padding: 10px 14px;
      margin-bottom: 18px; color: #d97706; font-size: 13px;
    }

    .field { margin-bottom: 18px; }

    label {
      display: block; font-size: 12px; font-weight: 600;
      color: #374151; margin-bottom: 6px;
      text-transform: uppercase; letter-spacing: 0.05em;
    }

    input {
      width: 100%; padding: 12px 14px;
      border: 1.5px solid #e5e7eb; border-radius: 10px;
      font-size: 14px; color: #111; outline: none;
      transition: border-color 0.2s;
    }
    input:focus { border-color: #1a4a7a; }

    .btn {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, #0a2540, #1a4a7a);
      color: white; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      margin-top: 4px; transition: opacity 0.2s;
    }
    .btn:hover { opacity: 0.9; }

    .links {
      text-align: center; margin-top: 20px;
      font-size: 13px; color: #6b7280;
      line-height: 2;
    }
    .links a { color: #1a4a7a; text-decoration: none; font-weight: 600; }

    .footer {
      background: #0a2540; padding: 12px 32px; text-align: center;
    }
    .footer p { color: rgba(255,255,255,0.5); font-size: 11px; }
  </style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="logo">🏥</div>
      <h1>NDUTH WiFi Portal</h1>
      <p>Niger Delta University Teaching Hospital</p>
    </div>

    <div class="body">
      {% with messages = get_flashed_messages(with_categories=true) %}
        {% for category, message in messages %}
          <div class="flash-{{ category }}">{{ message }}</div>
        {% endfor %}
      {% endwith %}

      <form method="POST" action="/nduth/login">
        <div class="field">
          <label>Email Address</label>
          <input type="email" name="email" required
                 placeholder="your@email.com" autofocus>
        </div>

        <div class="field">
          <label>Password</label>
          <input type="password" name="password" required
                 placeholder="Enter your password">
        </div>

        <button type="submit" class="btn">
          🔐 &nbsp;Log In
        </button>
      </form>

      <div class="links">
        <a href="/nduth/forgot-password">Forgot your password?</a><br>
        New staff or student?
        <a href="/nduth/register">Register here</a>
      </div>
    </div>

    <div class="footer">
      <p>Powered by Collnetwork Technology LTD &nbsp;·&nbsp; © 2026</p>
    </div>
  </div>
</body>
</html>