@page "/web/auth/challenge/{id:guid}"
@model DysonNetwork.Sphere.Pages.Auth.ChallengeModel
@{
    ViewData["Title"] = "Challenge";
}

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-md">
        <h1 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Authentication Challenge</h1>

        @if (Model.AuthChallenge == null)
        {
            <p class="text-red-500 text-center">Challenge not found or expired.</p>
        }
        else
        {
            <p class="text-gray-700 dark:text-gray-300 mb-4">Remaining steps: @Model.AuthChallenge.StepRemain</p>

            @if (Model.AuthChallenge.StepRemain > 0)
            {
                <form method="post">
                    <input type="hidden" asp-for="Id"/>
                    <div class="mb-4">
                        <label asp-for="SelectedFactorId"
                               class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Select
                            Factor:</label>
                        <select asp-for="SelectedFactorId" asp-items="Model.AuthFactors"
                                class="form-select mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white px-4 py-2"></select>
                    </div>
                    <div class="mb-4">
                        <label asp-for="Secret"
                               class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"></label>
                        <input asp-for="Secret"
                               class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white px-4 py-2"
                               type="password"/>
                        <span asp-validation-for="Secret" class="text-red-500 text-sm mt-1"></span>
                    </div>
                    <button type="submit"
                            class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                        Submit
                    </button>
                </form>
            }
            else
            {
                <p class="text-green-600 dark:text-green-400 text-center">Challenge completed. Redirecting...</p>
            }
        }
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}