@inject AccountManager Account
@inject AccountState AccountState


<div class="my-modal-background">
    <div class="my-modal">
        @if (guestAccountDescriptionIsVisible)
        {
            <h1>What&apos;s the difference?</h1>
            @*<div class="account-description mb-4 bg-light p-2">
        <h4>Feature</h4>
        <h4>Guest Accounts</h4>
        <h4>Email Accounts</h4>

        <div>Resume in-progress games from any browser on any device.</div>
        <span class="oi oi-circle-x" title="circle-x" aria-hidden="true"></span>
        <span class="oi oi-circle-check" title="circle-check" aria-hidden="true"></span>
        </div>*@
            <p>
                Guest accounts are session based, meaning that the account lives exclusively within the device and browser you create the account on.
                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="Account.LoginWithMicrosoftAccount">Log in</button>
                    <button @onclick="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;
    }
}