<mvc:View
	height="100%"
	controllerName="sap.m.sample.Select.Page"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Page
		showHeader="false"
		class="sapUiContentPadding">
		<subHeader>
			<Toolbar>
				<ToolbarSpacer/>
				<Select
					forceSelection="false"
					selectedKey="{/SelectedProduct}"
					items="{
						path: '/ProductCollection',
						sorter: { path: 'Name' }
					}">
					<core:Item key="{ProductId}" text="{Name}" />
				</Select>
			</Toolbar>
		</subHeader>
		<content>
			<HBox justifyContent="SpaceAround">
				<Select
						enabled="{/Enabled}"
						editable="{/Editable}"
						forceSelection="false"
						selectedKey="{/SelectedProduct2}"
						items="{
							path: '/ProductCollection2',
							sorter: { path: 'Name' }
						}">
					<core:Item key="{ProductId}" text="{Name}" />
				</Select>
				<VBox>
					<HBox alignItems="Center">
						<Label text="Enabled:" class="sapUiTinyMarginEnd"/>
						<Switch type="AcceptReject" state="{/Enabled}"/>
					</HBox>
					<HBox alignItems="Center">
						<Label text="Editable:" class="sapUiTinyMarginEnd"/>
						<Switch type="AcceptReject" state="{/Editable}"/>
					</HBox>
				</VBox>
			</HBox>
		</content>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Select
					forceSelection="false"
					selectedKey="{/SelectedProduct3}"
					type="IconOnly"
					icon="sap-icon://filter"
					autoAdjustWidth="true"
					items="{
						path: '/ProductCollection3',
						sorter: { path: 'Name' }
					}">
					<core:Item key="{ProductId}" text="{Name}" />
				</Select>
			</Toolbar>
		</footer>
	</Page>
</mvc:View>