@page
@using LANCommander.Models;
@using LANCommander.Services;
@model LoginModel
@{ Layout = "/Views/Shared/_LayoutBasic.cshtml"; }

@{
    ViewData["Title"] = "Log in";
}

<div class="ant-row ant-row-middle ant-row-space-around" style="min-height: 100vh; margin-top: -24px;">
    <div class="ant-col ant-col-xs-24 ant-col-md-10">

        <div style="text-align: center; margin-bottom: 24px;">
            @switch (SettingService.GetSettings().Theme)
            {
                case LANCommanderTheme.Light:
                    <img src="~/static/logo.svg" />
                    break;

                case LANCommanderTheme.Dark:
                    <img src="~/static/logo-dark.svg" />
                    break;
            }
        </div>

        @foreach (var error in ModelState.SelectMany(x => x.Value.Errors))
        {
            <div data-show="true" class="ant-alert ant-alert-error ant-alert-no-icon" style="margin-bottom: 16px">
                <div class="ant-alert-content">
                    <div class="ant-alert-message">@error.ErrorMessage</div>
                </div>
            </div>
        }

        <div class="ant-card ant-card-bordered">
            <div class="ant-card-head">
                <div class="ant-card-head-wrapper">
                    <div class="ant-card-head-title">Login</div>
                </div>
            </div>

            <form id="account" method="post" class="ant-card-body" autocomplete="off">
                <div class="ant-form ant-form-vertical">
                    <div class="ant-form-item">
                        <div class="ant-form-item-row ant-row">
                            <div class="ant-form-item-label ant-col">
                                <label asp-for="Input.UserName" class="form-label"></label>
                            </div>

                            <div class="ant-form-item-control ant-col">
                                <div class="ant-form-item-control-input">
                                    <div class="ant-form-item-control-input-content">
                                        <input asp-for="Input.UserName" class="ant-input" autocomplete="username" aria-required="true" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ant-form-item">
                        <div class="ant-form-item-row ant-row">
                            <div class="ant-form-item-label ant-col">
                                <label asp-for="Input.Password" class="form-label"></label>
                            </div>

                            <div class="ant-form-item-control ant-col">
                                <div class="ant-form-item-control-input">
                                    <div class="ant-form-item-control-input-content">
                                        <input asp-for="Input.Password" class="ant-input" autocomplete="current-password" aria-required="true" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ant-form-item">
                        <div class="ant-form-item-row ant-row">
                            <div class="ant-form-item-control ant-col">
                                <div class="ant-form-item-control-input">
                                    <div class="ant-form-item-control-input-content">
                                        <label class="ant-checkbox-wrapper">
                                            <span class="ant-checkbox">
                                                <input class="ant-checkbox-input" asp-for="Input.RememberMe" />
                                                <span class="ant-checkbox-inner"></span>
                                            </span>
                                            <span>
                                                @Html.DisplayNameFor(m => m.Input.RememberMe)
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ant-form-item" style="margin-bottom: 0;">
                        <div class="ant-form-item-row ant-row">
                            <button id="login-submit" type="submit" class="ant-btn ant-btn-primary ant-btn-block">Sign in</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div style="text-align: center; margin-top: 16px;">
            Don't have account yet? <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Register</a>
        </div>
    </div>
</div>