@page
@using Roblox.Dto.Users
@model Roblox.Website.Pages.Auth.Application

@{
    Layout = "Shared/_Layout";
}

@section MetaTags {
    <title>Application</title>
    <style>
        .input-padding {
            margin-top:  2rem;
            margin-bottom:  2rem;
        }

        div.application-form-entry h4 {
            width:  100%;
            background:  rgb(33, 37, 41);
            color:  #fff;
            padding: .5rem 1rem;
        }

    </style>
}

@if (Model.showBannerForOldUsers)
{
    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning">
                    <p class="mb-0">You will have to fill out this application and get approved in order for your account to be reactivated. Sorry for the inconvenience.</p>
                </div>
            </div>
        </div>
    </div>
}


<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-12 col-xl-6 offset-xl-3 col-md-8 offset-md-2">
            <div class="card card-body">
                @if (Model.errorMessage != null)
                {
                    <div class="alert alert-danger">
                        @Model.errorMessage
                    </div>
                }
                         
                <h3>Application</h3>
                <p>To join this website, you must fill out an application. This is done to prevent bots and malicious users from joining.</p>

                @if (Model.application == null)
                {
                    <p class="mb-0"><span class="fw-bold">Already filled out the application?</span> Click <a href="/auth/application-check">here</a> to view its status.</p>
                }

                @if (Model.successMessage != null)
                {
                    <p class="text-success">@Model.successMessage</p>
                }

                @if (Model.application != null)
                {
                    <hr/>
                    <p class="mt-4 mb-0">You submitted an application on @Model.application.createdAt.ToString("f") UTC.</p>
                    <p class="mt-3 mb-0">Application Status: <span class="fw-bolder">@(Model.displayStatus)</span></p>
                    @if (Model.application.status == UserApplicationStatus.Approved)
                    {
                        <p>Join URL: <a href="/auth/signup?applicationId=@Model.application.joinId">https://example.com/auth/signup?applicationId=@Model.application.joinId</a></p>
                    }
                    @if (Model.application.status == UserApplicationStatus.Rejected)
                    {
                        <p>Rejection Reason: @(Model.application.rejectionReason ?? "No reason specified.")</p>
                        <form method="post">
                            <input type="hidden" name="deleteCurrentApplicationCookie" value="true"/>
                            @Html.AntiForgeryToken()
                            <input type="submit" class="btn btn-outline-primary" value="Create New Application"/>
                        </form>
                    }
                    <p class="mt-4">Application ID: @Model.application.id</p>
                }
                else
                {
                    <form method="post">
                        <div class="input-padding"></div>
                        
                        <div>
                            <h4>Requirements</h4>
                            <ul>
                                <li>You must be 13 years of age or older</li>
                                <li>You must have an active account on a public website such as Roblox or Twitter.</li>
                            </ul>
                        </div>
                        
                        <div class="input-padding"></div>
                        

                        <div class="application-form-entry">
                            <div class="stage-1">
                                <h4>Step 1 - About Me</h4>
                                <div class="p-2">
                                    <p class="mb-1">You can list some interests, favorite video games, why you want to join, things you can create (e.g. clothing or games), etc. A sentence or two is fine. <span class="fw-bolder">Do <span class="text-decoration-underline">NOT</span> put personal information such as your age or email address</span>.</p>
                                    <textarea placeholder="About me (up to 4,000 characters)" disabled="@Model.submitDisabled" class="form-control w-100" rows="4" name="about" maxlength="4096">@Model.about</textarea>
                                </div>
                            </div>
                            
                            <div class="input-padding"></div>
                            
                            <div class="stage-2">
                                <h4>Step 2 - Social URL</h4>
                                <div class="p-2">
                                    <p class="mb-0">Paste a link to your profile on a public website. Examples include a Roblox profile, a Twitter account, a v3rmillion account, a Reddit account, etc.</p>
                                    <p class="mb-2 mt-2"><span class="fw-bold">Your account must have some activity on it</span>, such as friends/followers, posts, games, or whatever constitutes activity on the site your are linking.</p>
                                    <input placeholder="Social Media Profile URL" value="@Model.socialUrl" disabled="@Model.submitDisabled" type="text" class="form-control" name="socialUrl" maxlength="128"/>
                                </div>
                            </div>
                            
                            <div class="input-padding"></div>
                            
                            <div class="stage-3">
                                <h4>Step 3 - Verification</h4>
                                <div class="p-2">
                                    <p class="mb-0">Copy the entire phrase in the blue box below and paste it into the about section of your social media profile. This is done so that we can verify you aren't impersonating someone.</p>
                                    <div class="alert alert-primary mt-2 mb-2">
                                        <p class="mb-0">@Model.verificationPhrase</p>
                                    </div>
                                    
                                    <div class="mt-2">
                                        <label>Code not working or getting filtered? </label>
                                        <input type="submit" class="btn btn-outline-primary btn-sm" name="action" value="Get New Code"/>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="input-padding"></div>
                            
                            
                            <div class="stage-4">
                                <h4>Step 4 - Captcha</h4>
                                <div class="p-2">
                                    <p class="mb-0">We just have to make sure you aren't a robot.</p>
                                    <div class="h-captcha mt-4" data-sitekey="@Model.siteKey" data-theme="light"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="stage-submit">
                            <div class="input-padding"></div>
                            <input type="submit" class="btn btn-primary mt-2" value="Submit Application"/>
                            @Html.AntiForgeryToken()
                        </div>
                        
                    </form>
                }
            </div>
        </div>
    </div>
</div>

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>