@if (userName()) {
    <app-base title="Hello {{ userName() }}!" [noHomeButton]="true">
        <div class="text-muted-color text-center bg-white border-2 rounded-lg p-8 mb-4 drop-shadow-lg">
            This is a demo of a PHX Frontend Plugin.
            <br />
            Click the buttons below to navigate to the different pages.
        </div>
        @if (!apolloProvided()) {
            <div class="text-center text-white bg-red-500 border-2 rounded-lg p-4 mb-4">
                Apollo not provided!
            </div>
        }
        <div class="grid grid-cols-2 gap-2 pt-4">
            @for (item of routeItems(); track item.title) {
                <p-button 
                    [label]="item.title" 
                    [icon]="item.icon" 
                    (click)="item.link ? router.navigate([item.link]) : null" 
                    size="large" 
                    [class]="'w-full drop-shadow-lg' + ($last && $index%2==0 ? ' col-span-2' : '')" 
                    styleClass="w-full" 
                    iconPos="top"
                />
            }
        </div>
    </app-base>
}