<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:f="sap.f"
	xmlns:cards="sap.f.cards"
	xmlns:w="sap.ui.integration.widgets"
	controllerName="sap.f.cardsdemo.controller.NumericHeader"
	displayBlock="true">
	<Page title="{i18n>appTitle}">
		<subHeader>
			<Toolbar>
				<ToolbarSpacer />
				<Title text="Card with Numeric Header" />
				<ToolbarSpacer />
			</Toolbar>
		</subHeader>

		<Panel>
			<f:GridContainer>
				<f:Card id="fcard1">
					<f:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</f:layoutData>
					<f:header>
						<cards:NumericHeader
							title="Project Cloud Transformation"
							subtitle="Revenue"
							unitOfMeasurement="Currency"
							details="Q1, 2018"
							number="65.3454"
							scale="K"
							trend="Down"
							state="Error">
							<cards:sideIndicators>
								<cards:NumericSideIndicator
									title="Target"
									number="100"
									unit="K"
									state="Good"/>
								<cards:NumericSideIndicator
									title="Deviation"
									number="34.7"
									unit="%" />
							</cards:sideIndicators>
						</cards:NumericHeader>
					</f:header>
				</f:Card>

				<f:Card id="fcard2">
					<f:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</f:layoutData>
					<f:header>
						<cards:NumericHeader
							title="Project Cloud Transformation"
							subtitle="Revenue"
							unitOfMeasurement="Currency"
							details="Q1, 2018"
							number="65.3454"
							scale="K"
							trend="Down"
							state="Error"
							sideIndicatorsAlignment="End">
							<cards:sideIndicators>
								<cards:NumericSideIndicator
									title="Target"
									number="100"
									unit="K"
									state="Critical"/>
								<cards:NumericSideIndicator
									title="Deviation"
									number="34.7"
									unit="%" />
							</cards:sideIndicators>
						</cards:NumericHeader>
					</f:header>
				</f:Card>

				<w:Card id="kpicard1" manifest="{manifests>/kpiManifests/kpicard1}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="kpicard2" manifest="{manifests>/kpiManifests/kpicard2}" baseUrl="{cardsPlayground>/playgroundBaseUrl}" >
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="kpicard3" manifest="{manifests>/kpiManifests/kpicard3}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="kpicard4" manifest="{manifests>/kpiManifests/kpicard4}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="kpicard5" manifest="{manifests>/kpiManifests/kpicard5}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="kpicard6" manifest="{manifests>/kpiManifests/kpicard6}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="tablecard1" manifest="{manifests>/kpiManifests/tablecard1}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="tablecard123" manifest="{manifests>/kpiManifests/tablecard123}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="unitOfMeasurementOnly" manifest="{manifests>/kpiManifests/unitOfMeasurementOnly}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
				<w:Card id="hiddenHeader" manifest="{manifests>/kpiManifests/hiddenHeader}" baseUrl="{cardsPlayground>/playgroundBaseUrl}">
					<w:layoutData>
						<f:GridContainerItemLayoutData columns="4" />
					</w:layoutData>
				</w:Card>
			</f:GridContainer>
		</Panel>
	</Page>
</mvc:View>