@page
@model UsersModel
@{
    ViewData["Title"] = "Users";
    var breadcrumb = new BreadcrumbView([new Crumb("Courses", "/"), new Crumb("Users", null)], ["all users share the library"]);
}

<partial name="_Breadcrumb" model="breadcrumb" />

<section class="fs-page-head">
    <p class="fs-eyebrow">People</p>
    <h1 class="fs-page-title">Users.</h1>
    <p class="fs-page-description">
        Everyone shares the same courses, lessons, decks and cards. Reviews and schedules are per user.
    </p>
</section>

@if (Model.Error is not null)
{
    <div class="notification is-danger is-light" role="alert">@Model.Error</div>
}

<section class="fs-panel">
    <div class="fs-panel-head">
        <h2 class="fs-panel-title">Add a user</h2>
    </div>
    <form method="post" asp-page-handler="Create" class="fs-user-form">
        <div class="field">
            <label class="label">Username</label>
            <input class="input" name="username" autocomplete="off" />
        </div>
        <div class="field">
            <label class="label">Password</label>
            <input class="input" name="password" type="password" autocomplete="new-password" />
            <p class="help">At least 8 characters.</p>
        </div>
        <button class="button fs-button" type="submit">Create user</button>
    </form>
</section>

<section class="fs-panel">
    <div class="fs-panel-head">
        <h2 class="fs-panel-title">Change my password</h2>
    </div>
    <form method="post" asp-page-handler="ChangePassword" class="fs-user-form">
        <div class="field">
            <label class="label">Current password</label>
            <input class="input" name="currentPassword" type="password" autocomplete="current-password" />
        </div>
        <div class="field">
            <label class="label">New password</label>
            <input class="input" name="newPassword" type="password" autocomplete="new-password" />
            <p class="help">At least 8 characters. Other sessions will be signed out.</p>
        </div>
        <button class="button fs-button" type="submit">Change password</button>
    </form>
</section>

<section class="fs-panel">
    <div class="fs-panel-head">
        <h2 class="fs-panel-title">Active users</h2>
        <span class="fs-panel-note">@Model.Users.Count</span>
    </div>
    <div class="fs-token-list">
        @foreach (var user in Model.Users)
        {
            <div class="fs-token-row">
                <div>
                    <strong>@user.Username</strong>
                    @if (user.Id == Model.CurrentUserId)
                    {
                        <span class="tag is-light ml-2">you</span>
                    }
                </div>
                @if (user.Id != Model.CurrentUserId)
                {
                    <form method="post" asp-page-handler="Deactivate">
                        <input type="hidden" name="userId" value="@user.Id" />
                        <button class="button is-small is-light" type="submit">Deactivate</button>
                    </form>
                }
            </div>
        }
    </div>
</section>