@page
@using System.Text.Encodings.Web
@model ExternalLoginSupplementalModel
@{
    var sessionState = ViewData["SessionState"] as TightWiki.SessionState ?? throw new Exception("Wiki State Context cannot be null.");
}

<h3>
    Signup. Almost there...
</h3>

<p>
    You have successfully signed in with the external provider but we still need a bit of information.<br /><br />
</p>

<form asp-page-handler="Confirmation" asp-route-returnUrl="@UrlEncoder.Default.Encode(Model.ReturnUrl ?? "")" method="post">
    <div class="container">
        <div class="form-group row mb-3">
            <label for="Input.AccountName" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.AccountName)</strong></label>
            <div class="col-sm-10">
                @Html.TextBoxFor(m => Model.Input.AccountName, new { @class = "form-control", placeholder = "required" })
                <small class="form-text text-muted">This account name will be visible publicly.</small>
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.AccountName)</div>
            </div>
        </div>

        <div class="form-group row mb-1">
            <label for="Input.FirstName" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.FirstName)</strong></label>
            <div class="col-sm-10">
                @Html.TextBoxFor(m => Model.Input.FirstName, new { @class = "form-control", placeholder = "not required" })
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.FirstName)</div>
            </div>
        </div>

        <div class="form-group row mb-3">
            <label for="Input.LastName" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.LastName)</strong></label>
            <div class="col-sm-10">
                @Html.TextBoxFor(m => Model.Input.LastName, new { @class = "form-control", placeholder = "not required" })
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.LastName)</div>
            </div>
        </div>

        <div class="form-group row mb-1">
            <label for="Input.Country" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.Country)</strong></label>
            <div class="col-sm-10">
                <select name="Input.Country" id="Input.Country" class="form-control">
                    <option value="" style="color:#ccc !important;">Select a country</option>
                    @foreach (var item in Model.Input.Countries)
                    {
                        <option value="@item.Value" selected=@(Model.Input.Country == item.Value ? "selected" : null)>
                            @item.Text
                        </option>
                    }
                </select>
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.Country)</div>
            </div>
        </div>

        <div class="form-group row mb-1">
            <label for="Input.Language" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.Language)</strong></label>
            <div class="col-sm-10">
                <select name="Input.Language" id="Input.Language" class="form-control">
                    <option value="" style="color:#ccc !important;">Select a language</option>
                    @foreach (var item in Model.Input.Languages)
                    {
                        <option value="@item.Value" selected=@(Model.Input.Language == item.Value ? "selected" : null)>
                            @item.Text
                        </option>
                    }
                </select>
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.Language)</div>
            </div>
        </div>

        <div class="form-group row mb-1">
            <label for="Input.TimeZone" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => Model.Input.TimeZone)</strong></label>
            <div class="col-sm-10">
                <select name="Input.TimeZone" id="Input.TimeZone" class="form-control">
                    <option value="" style="color:#ccc !important;">Select a time-zone</option>
                    @foreach (var item in Model.Input.TimeZones)
                    {
                        <option value="@item.Value" selected=@(Model.Input.TimeZone == item.Value ? "selected" : null)>
                            @item.Text
                        </option>
                    }
                </select>
                <div class="text-danger">@Html.ValidationMessageFor(m => Model.Input.TimeZone)</div>
            </div>
        </div>

        <div class="form-group row mb-1">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary rounded-0">Complete Signup!</button>
            </div>
        </div>
    </div>
</form>