@using Umbraco.Cms.Web.Common.Models;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<LoginModel>

<div class="flex items-center justify-center min-h-screen">
    <div class="w-full max-w-sm">
        @using (Html.BeginUmbracoForm("Login", "AuthSurface", FormMethod.Post, new { @class = "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" }))
        {
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                    Username
                </label>
                <input asp-for="@Model.Username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                       id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                    Password
                </label>
                <input asp-for="@Model.Password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                       id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="submit">
                    Sign In
                </button>
                @*   <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
            Forgot Password?
            </a> *@
            </div>
            @Html.ValidationSummary()
        }
    </div>
</div>