@model LiteCharmsSecurity.STS.Identity.ViewModels.Device.DeviceAuthorizationViewModel
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

<div class="py-8 space-y-6">
    <div class="space-y-2">
        @if (Model.ClientLogoUrl != null)
        {
            <div class="h-16 w-auto">
                <img src="@Model.ClientLogoUrl" class="h-16 object-contain" alt="@Model.ClientName" />
            </div>
        }
        <h1 class="text-3xl font-bold">@Model.ClientName</h1>
        <p class="text-muted-foreground">@Localizer["SubTitle"]</p>
        @if (Model.ConfirmUserCode)
        {
            <p class="text-sm text-muted-foreground">@Localizer["ConfirmCode"] "@Model.UserCode".</p>
        }
    </div>

    @await Html.PartialAsync("_ValidationSummary")

    <form asp-action="Callback" class="space-y-6">
        <input type="hidden" asp-for="UserCode" />

        <div class="text-lg font-semibold">@Localizer["UnCheckPermission"]</div>

        @if (Model.IdentityScopes.Any())
        {
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title flex items-center gap-2">
                        <lucideicon name="user" class="h-5 w-5" />
                        @Localizer["PersonalInformation"]
                    </h2>
                </div>
                <div class="card-content">
                    <ul class="space-y-2">
                        @foreach (var scope in Model.IdentityScopes)
                        {
                            @await Html.PartialAsync("_ScopeListItem", scope)
                        }
                    </ul>
                </div>
            </div>
        }

        @if (Model.ApiScopes.Any())
        {
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title flex items-center gap-2">
                        <lucideicon name="lock" class="h-5 w-5" />
                        @Localizer["ApplicationAccess"]
                    </h2>
                </div>
                <div class="card-content">
                    <ul class="space-y-2">
                        @foreach (var scope in Model.ApiScopes)
                        {
                            @await Html.PartialAsync("_ScopeListItem", scope)
                        }
                    </ul>
                </div>
            </div>
        }

        @if (Model.AllowRememberConsent)
        {
            <div class="card">
                <div class="card-content">
                    <div class="flex items-center space-x-2">
                        <input asp-for="RememberConsent" type="checkbox" class="checkbox" id="RememberConsent" />
                        <label for="RememberConsent" class="label cursor-pointer font-semibold">
                            @Localizer["Remember"]
                        </label>
                    </div>
                </div>
            </div>
        }

        <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex gap-3">
                <button name="button" value="yes" class="btn-default" autofocus>
                    <lucideicon name="check" class="inline-block h-4 w-4 mr-2" />
                    @Localizer["Yes"]
                </button>
                <button name="button" value="no" class="btn-outline">
                    <lucideicon name="x" class="inline-block h-4 w-4 mr-2" />
                    @Localizer["No"]
                </button>
            </div>

            @if (Model.ClientUrl != null)
            {
                <a class="btn-outline" target="_blank" href="@Model.ClientUrl">
                    <lucideicon name="info" class="inline-block h-4 w-4 mr-1" />
                    @Localizer["Client"]
                    <strong>@Model.ClientName</strong>
                </a>
            }
        </div>
    </form>
</div>
