@inject AccountManager Account
@inject AccountState AccountState


<div class="my-modal-background">
    <div class="my-modal">
        @if (guestAccountDescriptionIsVisible)
        {
            <h1>What&apos;s the difference?</h1>
            <p>
                Guest accounts are session based, meaning that the account lives exclusively within the device and browser you play on as a guest.
                This is the only difference between guest and email accounts.
            </p>
            <div class="alert alert-warning">
                Deleting your device's browser storage for this site also deletes your guest account. This data is how you are remembered between sessions.
            </div>
            <button class="btn btn-link smaller" @onclick="HideGuestAccountDescription">Take me back</button>
        }
        else
        {
            <h1>Welcome to Shogi!</h1>
            <div>
                <p>How would you like to proceed?</p>
                <p>
                    <button @onclick="async () => await Account.LoginWithMicrosoftAccount()">Log in</button>
                    <button @onclick="async () => await Account.LoginWithGuestAccount()">Proceed as Guest</button>
                    @if (AccountState.User != null)
                    {
                        /* This is an escape hatch in case user login fails in certain ways. */
                        <button @onclick="Account.LogoutAsync">Logout</button>
                    }
                </p>
            </div>
            <p>
                <button class="btn btn-link smaller" @onclick="ShowGuestAccountDescription">What&apos;s the difference?</button>
            </p>
        }
    </div>
</div>

@code {
    bool guestAccountDescriptionIsVisible = false;

    void ShowGuestAccountDescription()
    {
        guestAccountDescriptionIsVisible = true;
    }
    void HideGuestAccountDescription()
    {
        guestAccountDescriptionIsVisible = false;
    }
}