Build your application faster.

<Sheet elevation="2" class="relative-container">

    <Toolbar dark="true" color="info">
        <Btn icon="true" dark="true" (click)="$drawer = !$drawer">
            <Icon name="mdi-menu" dark="true" />
        </Btn>
        <ToolbarTitle>Inbox</ToolbarTitle>
        <Spacer></Spacer>
        <Btn icon="true" dark="true" (click)="$showSearch = !$showSearch">
            <Icon name="mdi-magnify" dark="true" />
        </Btn>
        <Btn icon="true" dark="true" (click)="$showAlert2 = true">
            <Icon name="mdi-filter" dark="true" />
        </Btn>
        <Btn icon="true" dark="true" (click)="$showAlert3 = true">
            <Icon name="mdi-dots-vertical" dark="true" />
        </Btn>
    </Toolbar>

    <NavigationDrawer absolute="true" temporary="true" model="$drawer">
        <ListContainer>
            <ListItem>
                <ListItemAvatar>
                    <Image src="/images/miki_d.jpg"></Image>
                </ListItemAvatar>
            </ListItem>
            <ListItem link="true">
                <ListItemContent>
                    <ListItemTitle class="text-h6">Miki the Cat</ListItemTitle>
                    <ListItemSubTitle>miki@viewi.net</ListItemSubTitle>
                </ListItemContent>
                <ListIcon>
                    <Icon name="mdi-menu-down" />
                </ListIcon>
            </ListItem>
        </ListContainer>
        <Divider></Divider>
        <ListContainer dense="true" nav="true" (click)="$drawer = !$drawer">
            <ListItemGroup color="primary">
                <ListItem foreach="$itemsNav as $i => $item" link="true" active="{$i === $selectedItemNav}"
                    (click)="$selectedItemNav = $i">
                    <ListIcon>
                        <Icon name="{$item['icon']}" />
                    </ListIcon>
                    <ListItemContent>
                        <ListItemTitle>{$item['text']}</ListItemTitle>
                    </ListItemContent>
                </ListItem>
            </ListItemGroup>
        </ListContainer>
    </NavigationDrawer>

    <ListContainer threeLine="true">
        <SubHeader>Today</SubHeader>
        <template foreach="$inboxItems as $i => $item">
            <ListItem>
                <ListItemAvatar>
                    <Image src="{$item['avatar']}"></Image>
                </ListItemAvatar>
                <ListItemContent>
                    <ListItemTitle>{{$item['title']}}</ListItemTitle>
                    <div class="list-item-subtitle">{{$item['subtitle']}}</div>
                </ListItemContent>
            </ListItem>
            <Divider if="{$i < count($inboxItems) - 1}" inset="true"></Divider>
        </template>
    </ListContainer>

    <div class="pa-4 absolute-bottom">
        <Alert type="success" dismissible="true" active="$showAlert3" (onDismiss)="$showAlert3 = false">
            I&apos;m a success alert.
        </Alert>
        <Alert type="error" dismissible="true" border="right" active="$showAlert2" (onDismiss)="$showAlert2 = false">
            I&apos;m an error alert.
        </Alert>
    </div>

</Sheet>

<?php

namespace Components\Views\Home;

use Viewi\BaseComponent;
use Viewi\DOM\Events\DOMEvent;

class InboxDemo extends BaseComponent
{
    public int $selectedItemNav = 0;
    public bool $drawer = false;
    public bool $showAlert3 = false;
    public bool $showAlert2 = false;
    public bool $showSearch = false;

    public array $itemsNav = [
        ['text' => 'My Files', 'icon' => 'mdi-folder'],
        ['text' => 'Shared with me', 'icon' => 'mdi-account-multiple'],
        ['text' => 'Starred', 'icon' => 'mdi-star'],
        ['text' => 'Recent', 'icon' => 'mdi-history'],
        ['text' => 'Offline', 'icon' => 'mdi-check-circle'],
        ['text' => 'Uploads', 'icon' => 'mdi-upload'],
        ['text' => 'Backups', 'icon' => 'mdi-cloud-upload']
    ];

    public array $inboxItems = [
        [
            'avatar' => '/images/avatar_2.jpg',
            'title' => 'Brunch this weekend?',
            'subtitle' => '<span class="light-text">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?',
        ],
        [
            'avatar' => '/images/author.jpg',
            'title' => 'Summer BBQ <span class="grey-text text-lighten-1">4</span>',
            'subtitle' => '<span class="light-text">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.',
        ],
        [
            'avatar' => '/images/avatar_3.jpg',
            'title' => 'Oui oui',
            'subtitle' => '<span class="light-text">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
        ],
        [
            'avatar' => '/images/avatar_2.jpg',
            'title' => 'Birthday gift',
            'subtitle' => '<span class="light-text">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
        ]
    ];

    function getValidationRules(): array
    {
        return [
            'max' => fn (?string $value) => strlen($value ?? '') <= 25 || 'Max 25 characters',
            'required' => fn (?string $value) => !!$value || 'This field is required'
        ];
    }
}