<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    controllerName="sap.mcsuite.controller.Index"
    height="100%"
>

    <Page enableScrolling="true" showHeader="false">
        <HBox id='title' 
              class='title-container sapUiSmallMarginTop sapUiSmallMarginBottom' 
              alignItems='Center' 
              justifyContent='Center'
        >
            <Title text='__WELCOME_TEXT__' level='H1'/>
        </HBox>
        <VBox>
            <!-- PANEL BADGES -->
            <Panel
                headerText="Modulübersicht"
                expandable="true"
                expanded="true"
                class="sapUiContentPadding"
            >
                <content>
                    <HBox
                        items="{
                            path: 'menu>/menu',
                            templateShareable: false
                        }"
                        wrap="Wrap"
                        justifyContent="Start"
                    >
                        <GenericTile
                            header="{menu>name}"
                            class="sapUiSmallMargin index-tile"
                        >
                            <TileContent class="index-tile-content">
                                <VBox>

                                    <!-- KPI -->
                                    <NumericContent 
                                        value="{= ${menu>badge/amount} > 100 ? '+100' : ${menu>badge/amount} }"
                                        width="4rem" 
                                        class="index-tile-kpi"
                                        valueColor="Error"
                                        visible="{= ${menu>badge/amount} > 0 }"
                                    >
                                        <customData>
                                            <core:CustomData
                                                key="badge"
                                                value="{menu>badge/class}"
                                                writeToDom="true" />
                                        </customData>
                                    </NumericContent>

                                    <!-- ICON -->
                                    <HBox width="100%" alignItems="Center" justifyContent="Center">
                                        <core:Icon 
                                            src="{menu>icon}" 
                                            size="2rem"
                                            press="onTaskNav"
                                            class="index-tile-icon"
                                        >
                                            <core:customData>
                                                <core:CustomData key="module" value="{menu>target}" />
                                                <core:CustomData key="task" value="index" />
                                            </core:customData>
                                        </core:Icon>
                                    </HBox>

                                    <!-- SUBMENU -->
                                    <HBox
                                        items="{
                                            path: 'menu>submenu',
                                            templateShareable: false
                                        }"
                                        wrap="Wrap"
                                        justifyContent="Center"
                                        alignItems="Center"
                                    >
                                        <Button 
                                            text="{menu>name}"
                                            press="onTaskNav"
                                            type="Transparent"
                                            class="index-tile-button"
                                        >
                                            <customData>
                                                <core:CustomData key="module" value="{menu>target}" />
                                                <core:CustomData key="task" value="{menu>parameters/task}" />
                                            </customData>
                                        </Button>
                                    </HBox>

                                </VBox>
                            </TileContent>
                        </GenericTile>

                    </HBox>
                </content>
            </Panel>


            <!-- PANEL TODOS -->
            <Panel
                headerText="Offene Todo's"
                expandable="true"
                expanded="true"
                class="sapUiContentPadding"
            >
                <content>
                    <VBox
                        id="menuTreeview"
                        class="treeview"
                        width="100%"
                    />
                </content>
            </Panel>

        </VBox>
    </Page>
</mvc:View>