<!DOCTYPE html>
<html lang="en" class="bg-gray-100">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Username</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>

<body class="bg-gray-100">

<!-- Navbar -->
<div th:replace="layouts/mainLayout"></div>

<div class="container mx-auto p-4 flex justify-center items-center h-screen">
    <div class="w-full max-w-md">

        <h2 class="text-2xl font-semibold mb-4 text-center">Forgot Username</h2>

        <!-- Display error message if applicable -->
        <div th:if="${param.error}" class="text-red-500 mb-2 text-center">
            User not found.
        </div>

        <!-- Display success message if applicable -->
        <div th:if="${param.success}" class="text-green-500 mb-2 text-center">
            Username sent to your email.
        </div>

        <!-- Form for submitting email to retrieve username -->
        <form th:action="@{/forgot-username}" method="post">
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-600">Email:</label>
                <input type="email" id="email" name="email" required
                       class="mt-1 p-2 w-full border rounded focus:outline-none focus:ring focus:border-blue-300">
            </div>

            <button type="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                Submit
            </button>
        </form>

    </div>
</div>
</body>
<div th:replace="layouts/footerLayout"></div>
</html>