<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.f" controllerName="sap.m.sample.TsTodos.webapp.controller.App" displayBlock="true">
		<App>
			<Page>
				<customHeader>
					<f:ShellBar core:require="{ Helper: 'sap/m/sample/TsTodos/webapp/util/Helper' }" title="{i18n>TITLE}" homeIcon="{:= Helper.resolvePath('/img/logo_ui5.png') }" />
				</customHeader>
				<content>
					<f:DynamicPage>
						<f:header>
							<f:DynamicPageHeader pinnable="false">
								<Input class="todoInput" id="addTodoItemInput" value="{/newTodo}" placeholder="{i18n>INPUT_PLACEHOLDER}" change=".addTodo" />
							</f:DynamicPageHeader>
						</f:header>
						<f:content>

							<List id="todoList"
								items="{ path: '/todos', events: { change: '.updateItemsLeftCount' } }"
								mode="None"
								growing="true"
								growingScrollToLoad="true"
								showNoData="false"
								showSeparators="None">
								<headerToolbar>
									<OverflowToolbar id="toolbar" class="sapUiSizeCompact" visible="{= !${view>/isMobile} }">
										<ToolbarSpacer />
										<SearchField id="searchTodoItemsInput" liveChange=".onSearch" width="20rem"/>
										<SegmentedButton selectedKey="all" selectionChange=".onFilter" class="sapMSegmentedButtonNoAutoWidth">
											<items>
												<SegmentedButtonItem text="{i18n>LABEL_ALL}" key="all"/>
												<SegmentedButtonItem text="{i18n>LABEL_ACTIVE}" key="active"/>
												<SegmentedButtonItem text="{i18n>LABEL_COMPLETED}" key="completed"/>
											</items>
										</SegmentedButton>
										<Button id="clearCompleted" enabled="{/itemsRemovable}" icon="sap-icon://delete" text="{i18n>CLEAR_COMPLETED}" press=".clearCompleted"/>
									</OverflowToolbar>
								</headerToolbar>
								<infoToolbar>
									<OverflowToolbar
										visible="{= !!${view>/filterText} }"
										active="false">
										<Label text="{view>/filterText}" />
									</OverflowToolbar>
								</infoToolbar>
								<CustomListItem>
									<HBox>
										<CheckBox selected="{completed}"  />
										<VBox justifyContent="Center">
											<Text text="{title}"/>
										</VBox>
									</HBox>
									<customData>
										<core:CustomData key="todo-item-completed" value="{= String(${completed})}" writeToDom="true" />
									</customData>
								</CustomListItem>
							</List>

						</f:content>
					</f:DynamicPage>
				</content>

				<footer>
					<OverflowToolbar id="toolbar-footer" visible="{= !!${view>/isMobile} }">
						<SegmentedButton selectedKey="all" selectionChange=".onFilter" class="sapMSegmentedButtonNoAutoWidth">
							<items>
								<SegmentedButtonItem text="All" key="all"/>
								<SegmentedButtonItem text="Active" key="active"/>
								<SegmentedButtonItem text="Completed" key="completed"/>
							</items>
						</SegmentedButton>
						<ToolbarSpacer />
						<Button id="clearCompleted-footer" enabled="{/itemsRemovable}" icon="sap-icon://delete" text="{i18n>CLEAR_COMPLETED}" press=".clearCompleted"/>
					</OverflowToolbar>
				</footer>

			</Page>
		</App>
</mvc:View>
