<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add User</title>
    <link rel="stylesheet" href="/css/style.css">
    
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#272737">
    <link rel="apple-touch-icon" href="/images/icon-192.png">
</head>
<body>
    <nav>
        <h1>User Management</h1>
        <div class="nav-links">
             <a href="/dashboard" class="btn-import" style="background: #3498db; text-decoration: none; padding: 10px 20px; border-radius: 4px; color: white;">Back to Dashboard</a>
             <a href="/logout" class="btn-logout">Logout</a>
        </div>
    </nav>

    <div class="container">
        <div class="login-container" style="margin-top: 50px;">
            <h2>Add New User</h2>
            
            <% if (error) { %>
                <div class="alert" style="color: #e74c3c; margin-bottom: 10px;"><%= error %></div>
            <% } %>
            
            <% if (message) { %>
                <div class="alert" style="color: #27ae60; margin-bottom: 10px;"><%= message %></div>
            <% } %>

            <form action="/add-user" method="POST">
                <input type="text" name="username" placeholder="New Username" required>
                <input type="password" name="password" placeholder="New Password" required>
                <button type="submit" style="background: #27ae60; margin-top: 10px;">Create User</button>
            </form>
        </div>
    </div>
    
    <script>
      // Register Service Worker for PWA compatibility
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js');
        });
      }
    </script>
</body>
</html>