<c:FragmentDefinition
    xmlns="sap.m"
    xmlns:c="sap.ui.core"
    xmlns:f="sap.f"
    xmlns:card="sap.f.cards"
>
    <f:Card>
        <f:layoutData>
            <f:GridContainerItemLayoutData columns="3" />
        </f:layoutData>
        <f:header>
            <card:Header
                title="{i18n>Dash.LostItems.Card.Title}"
                subtitle="{i18n>Dash.LostItems.Card.Subtitle}" />
        </f:header>
        <f:content>
            <FlexBox
                width="100%"
                direction="Column"
                alignItems="End">
                <NumericContent
                    id="lostItemsTotalChart"
                    class="sapUiSmallMarginEnd"
                    adaptiveFontSize="false"
                    truncateValueTo="12"
                    valueColor="None"
                    value="{
                    path: 'LostItemsTotalModel>/data',
                    type: 'sap.ui.model.type.Integer', 
                    formatOptions: {groupingEnabled: true}
                }" />
                <Label
                    class="sapUiSmallMarginEnd"
                    text="{i18n>Dash.LostItems.Card.Label1}" />
                <NumericContent
                    id="lostItemsReactivatedChart"
                    class="sapUiSmallMarginEnd"
                    adaptiveFontSize="false"
                    truncateValueTo="12"
                    valueColor="None"
                    value="{
                    path: 'LostItemsReactivatedModel>/data',
                    type: 'sap.ui.model.type.Integer', 
                    formatOptions: {groupingEnabled: true}
                }" />
                <Label
                    class="sapUiSmallMarginEnd"
                    text="{i18n>Dash.LostItems.Card.Label2}" />
                <NumericContent
                    id="lostItemsDifference"
                    class="sapUiSmallMarginEnd"
                    adaptiveFontSize="false"
                    truncateValueTo="12"
                    valueColor="None"
                    value="{
                        parts: [
                            { path: 'LostItemsTotalModel>/data' },
                            { path: 'LostItemsReactivatedModel>/data' }
                        ],
                        formatter: '.calculateLostItemsDifference'
                    }" />
                <Label
                    class="sapUiSmallMarginEnd"
                    text="{i18n>Dash.LostItems.Card.Label3}" />
            </FlexBox>
        </f:content>
    </f:Card>
</c:FragmentDefinition>