@def #mat ../component/material.tpl
@def
	settings %.view,%.css
	events,test-form1,test-grid,test-touch %.view
	test-form1 %.view,../binding/persist.js
	test-svg #mat,../svg.js,../component/Pie.tpl,test-svg.view
	testman,+/lcov,+/lcov/{file} %.view
	test-material-ui #mat,../component/Slider.tpl,test-material-ui.view

@el anim-page
	.content.loader.abs

@el form-js
	form[action="javascript:"][method=POST]

@el top
	.bg-1
		.top.t-1.App-row
			.right
				@child
			.right.lang &each: lng in _.list
				a.hand - {lng.upper()} -
					&on:"click", _.setLang.bind(null, lng)
					&class:"selected", lng == _.current
					&class:"lang-" + lng
			a[href="#home"].home-link Header
			span.sizeHint Responsive
@el Menu
	.bg-2
		.Menu.App-row.js-viewRender
			@el nav-row
				a.Menu-item.waves
					&class: "selected", (route._u || View.home).indexOf(this.href.split("#")[1]) == 0
			nav-row[href="#home"] Home
			nav-row[href="#users"] Users
			nav-row[href="#settings"] Settings
			nav-row[href="#test"] Test

@el Footer
	.bg-1
		.Footer.App-row.grid-3.c2
			.Footer-item.col-4
				dt litejs.com
				dd>a[href="#help"] How to use
				dd>a[href="#privacy"] Privacy
			.Footer-item.col-4
				dt Contacts
				dd>a[href="mailto:mail@to.com"] email
				dd>a[href="https://fb.com/LiteJS#info"] Fb

@view public #body
	&kb: {h: history.setUrl.bind(null, "home"), u: history.setUrl.bind(null, "users"), "shift+s": history.setUrl.bind(null, "settings")}
	.App.max-height
		top
		Menu
		.rel.App-row
			@child
		.Footer-spacer
	Footer

@view #private #body
	.App.max-height
		top
			.p2
				span {user.name}
				button.c0 Logout
					&on:"click", "logout"
		Menu
			@child
		.Footer-spacer
	Footer

@view 404 public
	anim-page
		h2 Error 404
		\ Page not found.
		\ Maybe you want to look something else?

@view home public
	&on: "show", Fn('document.title="Home!"')
	anim-page
		h2 Home
		div _welcome
			&on: "click", Fn("this.style.fontStyle = this.style.fontStyle == 'italic' ? '' : 'italic'")
		div &txt: _("_welcome")
			&on: "mouseover", Fn("El.addClass(this,'bg3'),El.txt(this, El.txt(this) == _('_welcome') ? 'Over!' : _('_welcome'))")
			&on: "mouseout", Fn("El.rmClass(this,'bg3'),El.txt(this, _('_welcome'))")
		div &txt: _(welcomeText)
		div &txt: _(nonExistingWelcomeText)
		div
			&if: Math.random() > .5
			&txt: "If"
		.time
			&txt: "Init '\" " + started.date()
		.time
			&txt: "Load " + new Date().date()


@view users public
	&kb: {q: Fn('document.title="Qsers!"')}
	&on: "show", Fn('document.title="Users!"')
	anim-page
		h2 Users
		ul.users &list: Data("users")
			li
				a
					&txt: item.name
					&title: _("_welcome")
					&href: "#users/" + item.id

@view users/{userId} public
	anim-page
		form-js
			&schemaToForm: "schema/user.json", "edit", "form1"

@view users/{userId}/{pageId} public
	anim-page
		h3 {page.get("name")}

@view login public
	anim-page
		form[action="javascript:"][method=POST]
			&emitForm:"login"
			fieldset.grid-2.login
				legend Login
				.error {route.error||""}
				label.row
					.col-12.col-md-4.login__label Username
					.col-12.col-md-8>input[name=name]
				label.row
					.col-12.col-md-4.login__label Password
					.col-12.col-md-8>input[name=pass][type=password]
				.row
					.col-12.col-md-4
					.col-12.col-md-8>input.btn[type=submit] Log In


@view ok public
	anim-page
		h1 Ok!

@view-link test-view-link ok

@css
	.tip {
		position: relative;
		margin: 1.5em 0;
		padding: .75em 1.5em .75em;
		background-color: rgba(255, 255, 255, .8);
		border: 1px solid #f55;
		border-left-width: .4em;
		border-radius: .4em;
	}
	.tip:before {
		position: absolute;
		top: .4em;
		left: -.6em;
		width: 1em;
		height: 1em;
		line-height: 1em;
		color: #fff;
		text-align: center;
		content: "!";
		background-color: #f55;
		border-radius: 50%;
		font-size: 1.8em;
	}
	.seg {
		height: 1em;
		font-size: 140px;
		color: rgba(0,0,0,0.6);
	}

@view test public
	anim-page
		h2 Test
		ul
			li>a[href="#testman"] Testman
			li>a[href="#events"] Events
			li>a[href="#broken-link"] Test broken link
			li>a[href="#test-view-link"] Test View link
			li>a[href="#test-form1"] Test form
			li>a[href="#test-svg"] Test SVG
			li>a[href="#test-grid"] Test grid
			li>a[href="#test-material-ui"] Test Material-UI
			li>a[href="iframe.html#test1"] Iframe
			li>a[href="//localhost:81/litejs/litejs/ui/iframe.html#test2"] Iframe 81
		@rel user home vnd.app.home
			.home {home.name}
		@rel user home vnd.app.home.v2
			.home {home.homeName}
		.tip
			@rel is not implemented
		h2 Seven-segment display
		.seg
			Segment7[data-value=1]
			Segment7[data-value=2]
			Segment7[data-value=3]
			Segment7[data-value=4]
			Segment7[data-value=5]
			Segment7[data-value=6]
			Segment7[data-value=7]
			Segment7[data-value=8]
			Segment7[data-value=9]
			Segment7[data-value=0]