@page "/"
@using phronCare.UIBlazor.Pages.Authorization

<PageTitle>PhronCare</PageTitle>
<AuthorizeView>
    <Authorized>
        <h1>Hola, usuario!</h1>
        Bievenido a PhronCare.
        Estamos en etapa de desarrollo.-
        <br/>

        <ul class="fa-ul">
            <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
            <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
            <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
            <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
        </ul>
        <br />
        <div>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrow-left fa-fw" title="Back"></i></span>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrow-right fa-fw" title="Forward"></i></span>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrows-rotate fa-fw" title="Refresh"></i></span>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-house fa-fw" title="Home"></i></span>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-info fa-fw" title="Info"></i></span>
            <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-download fa-fw" title="Download"></i></span>
        </div>
        <br />
        <div class="fa-3x">
            <i class="fa-solid fa-sync fa-spin"></i>
            <i class="fa-solid fa-circle-notch fa-spin"></i>
            <i class="fa-solid fa-cog fa-spin"></i>
            <i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
            <i class="fa-solid fa-spinner fa-spin-pulse"></i>
            <i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
        </div>
        <br/>

    </Authorized>
    <NotAuthorized>
        <LoginPage/>
    </NotAuthorized>
</AuthorizeView>
@code
{
    public bool state;
    private void OnChangeToggleSwitchState(bool value)
    {
        state = value;
    }
}