<c:FragmentDefinition
    xmlns="sap.m"
    xmlns:c="sap.ui.core"
    xmlns:f="sap.f"
    xmlns:card="sap.f.cards"
>
    <f:Card id="totalStockCard">
        <f:layoutData>
            <f:GridContainerItemLayoutData columns="3" />
        </f:layoutData>
        <f:header>
            <card:Header
                title="{i18n>Dash.Stock.Title}"
                subtitle="{i18n>Dash.TotalStock.Subtitle}" />
        </f:header>
        <f:content>
            <FlexBox id="totalStockChart" width="100%"
                direction="Column" alignItems="End"
                items="{TotalStockModel>/data}">
                <items>
                    <VBox alignItems="End">
                        <NumericContent
                            visible="{= %{TotalStockModel>available}}"
                            class="sapUiSmallMarginEnd"
                            adaptiveFontSize="false"
                            truncateValueTo="12"
                            valueColor="None"
                            value="{
                                    path: 'TotalStockModel>data',
                                    type: 'sap.ui.model.type.Integer', 
                                    formatOptions: {groupingEnabled: true}
                                }"
                        />

                        <Label
                            visible="{= %{TotalStockModel>key} !== 'customer' &amp;&amp; %{TotalStockModel>available} }"
                            class="sapUiSmallMarginEnd"
                            text="{= %{TotalStockModel>key} === 'branch' ? %{i18n>Dash.Stock.Branch.Label} : %{i18n>Dash.Stock.Customer.Label}}" />
                    </VBox>
                </items>
            </FlexBox>
        </f:content>
    </f:Card>
</c:FragmentDefinition>