tag view-usage
	<self>
		<content-list>
			<li><ul @click.stop=Goto($components)> 'Components'
				<li @click.stop=Goto($ref)> 'ref'
				<li @click.stop=Goto($toggle)> 'toggle'
				<li @click.stop=Goto($router)> 'router'
			<li><ul @click.stop=Goto($tips)> 'Pro-router tips'
				<li @click.stop=Goto($param)> 'R.param'
				<li @click.stop=Goto($write)> 'R.write'
				<li @click.stop=Goto($gsetters)> 'Setters and getters'
		<h2$components.gradient> "Components"
		"This integration provides "
		<b> 3
		" components: "
		<b> "router"
		", "
		<b> "ref"
		" and "
		<b> "toggle"
		"."
		<br>
		<br>
		<$router.bordered> "<pro-router>"
		" displays current view."
		<br>
		<br>
		"The simplest application would look like this:"
		<imba-code file='src/main.imba'>
			"""
			imba{<c-op> '.'}mount {<c-tag> 'pro-router'}
			"""
		<br>
		"A bit more complex example:"
		<imba-code url="/{R.params.subview || ''}">
			"""
			{<c-tag-def> 'my-app'}
			    {<c-tag> 'self'}
			        {<c-tag> "pro-ref-f{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'} 
			        {<c-tag> "pro-router"}                        {<c-com> 'slot for current view'}

			{<c-tag-def> 'view-hello'}
			    {<c-tag> 'self'} 'Hello World!'

			{<c-tag-def> 'view-another-view'}
			    {<c-tag> 'self'} 'This is another view.'

			imba{<c-op> '.'}mount {<c-tag> 'my-app'}
			"""
			<div[d:vcc h:140px] slot="live">
				<example-menu[mb:30px]>
				<{ "example-{R.param('subview')}" }>			
		<br>
		"Notice that definition of a component with prefix {<.bordered> 'view-'} implies that there's a route."
		<pro-tip>
			"You can override current view and display another. For example defined by param from url:"
			<imba-code>
				<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}"
		<br>
		<br>
		<$ref.bordered> "<pro-ref>"
		" generates a link with a proper address hooked to the router."
		<br>
		<br>
		<b> "Examples:"
		<br>
		<imba-code url="/tips/about/usage/_local_value/1">
			<c-el>
				<c-tag> "pro-ref{<c-el> " go{<c-op> '='}{<c-str> '/exact/url'}"}"
				" "
				<c-com> "<a href=\"/exact/url\">"
			<br>
			<br>
			<c-el>
				<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
				" "
				<c-com> "<a href=\"/docs/about/usage\">"
			<br>
			<c-el>
				<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
				" "
				<c-com> "<a href=\"/docs\">"
			<br>
			<br>
			<c-el>
				<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
				" "
				<c-com> "<a href=\"/docs/about/usage/chapter/1\">"
			<br>
			<c-el>
				<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
				" "
				<c-com> "<a href=\"/docs/chapter/1\">"
			<br>
			<br>
			<c-el>
				<c-tag> "pro-ref{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
				" "
				<c-com> "<a href=\"/tips/about/usage/chapter/1\">"
			<br>
			<c-el>
				<c-tag> "pro-ref-f{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
				" "
				<c-com> "<a href=\"/tips/chapter/1\">"
			<br>
			<br>
			<c-com> "For external links use <a href=> directly:"
			<br>
			<c-tag> "a {<c-el> "href"}{<c-op> '='}{<c-str> 'https://example.com/link'}"
		<br>
		"As you can see you pass existing params further or forget them using "
		<.bordered> "<pro-ref-f>"
		"."
		<br>
		<pro-tip>
			"Notice "
			<b> "_local_value"
			" in url."
			<br>
			"Pro-router treats underscore prefixed values as local and never pass it further."
		<br>
		<br>
		<$toggle.bordered> "<pro-toggle>"
		" generates switch on/off element writing to url flag with a given name."
		<br>
		<br>
		<b> "Live examples:"
		<imba-code url=R.to_path!>
			<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'zoomed'}"}"
			" {<c-str> "Zoom in/out"}"
			<br>
			<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'}"}"
			" {<c-str> "Good night"}"
			<br>
			<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'} disabled{<c-op> '='}{<c-c> true}"}"
			" {<c-str> "Switch disabled"}"
			<div[d:hcc jc:space-around my:20px us:none h:20px] slot='live'>
				<pro-toggle.button param='zoomed'> 'Zoom in/out'
				<pro-toggle.button param='night'> 'Good night'
				<pro-toggle.button param='night' disabled=true> 'Switch disabled'
		<br>
		<h2$tips.gradient> "Pro-router tips"
		"Further reading is not about functionalities provided by this package itself but the ones you will be using straight from pro-router."
		<br>
		<br>
		<$param.example>
			<code-inline> "{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'key'}{<.c-br> ')'}"
			<p>
				"Use it to receive param value for given { <i> 'key' }."
				<br>
				"Value will be automatically processed with key { <b> 'getter' } if provided."
				<br>
				"It's awesome because you immidietaly work on a real object."
		<br>
		<pro-tip>
			<.example>
				<code-inline> "{<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}key"
				<p> "You can ommit getter by going straight for the parameter."
		<br>
		<br>
		<$write.example>
			<code-inline> "{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'key'}{<c-op> ','} value{<.c-br> ')'}"
			<p>
				"Use it to store the { <i> 'value' } under given param { <i> 'key' }."
				<br>
				"Value will be automatically processed with key { <b> 'setter' } if provided."
				<br>
				"It's awesome because you can easily store anything in a nice format this way."
		<pro-tip>
			"Writing doesn't change browser history. This way you can bind directly user input to url."
			<imba-code url="/{("user-input/" + R.params['user-input'] if R.params['user-input']) || ''}">
				<c-tag> "input{<c-c> '$v'} type{<c-op> '='}{<c-str> 'text'} value{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'user-input'}{<.c-br> ')'} {<c-op> '@keyup='}{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'user-input'}{<c-op> ', '}{<c-c> '$v'}{<c-op> '.'}value{<.c-br> ')'}"
				<div[d:vcc h:100px] slot="live">
					<input$v type='text' value=R.param('user-input') @keyup=R.write('user-input', $v.value)>
		<h3$gsetters.gradient> "Using getters and setters"
		"This is very simple yet powerful feature which can fullfil many different functions."
		<br>
		<br>
		<b> "Format a nice url:"
		<imba-code url="/{("title/" + R.params.title if R.params.title) || ''}">
			"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> ' '}{<c-op> ', '}{<c-str> '-'}{<.c-br> ')'}"
			<br>
			"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> '-'}{<c-op> ', '}{<c-str> ' '}{<.c-br> ')'}"

			<div[d:vcc h:100px] slot="live">
				<label> "Title: {R.param('title')}"
				<input$v2 type='text' value=R.param('title') @keyup=R.write('title', $v2.value)>
		<br>
		<br>
		<b> "Set default value:"
		<imba-code url="/{("name/" + R.params.name if R.params.name) || ''}">
			"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-fl> 'if '}{<c-str> 'Johny'}{<c-op> '!='} v"
			<br>
			"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-op> '||'} {<c-str> 'Johny'}"

			<div[d:vcc h:100px] slot="live">
				<label> "Hello {R.param('name')}!"
				<input$v3 type='text' value=(R.params.name ? R.param('name') : '') @keyup=R.write('name', $v3.value)>
		<br>
		<br>
		<b> "Give you right away a proper object:"
		<imba-code url="/{("number/" + R.params.number if R.params.number) || ''}{("/cucumber/" + R.params.cucumber if R.params.cucumber) || ''}">
			"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}number {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'}"

			<div[d:vcc h:150px] slot="live">
				<[d:inline-block]>
					<.button@click=(R.write 'number', R.param('number') - 1)> "-"
					" With getter: {R.param('number')} "
					<.button@click=(R.write 'number', R.param('number') + 1)> "+"
				<br>
				<[d:inlne-block]>
					<.button@click=(R.write 'cucumber', R.param('cucumber') - 1)> "-"
					" Without getter: {R.param('cucumber')} "
					<.button@click=(R.write 'cucumber', R.param('cucumber') + 1)> "+"
		<br>
		<br>
		<b> "Validates value:"
		<imba-code url="/{("one2four/" + R.params.one2four if R.params.one2four) || ''}">
			"""
			{<c-tag-def> "valid{<.c-br> '('}{<c-el> 'v'}{<.c-br> ')'}"}
			    {<c-c> 0} {<c-op> '<'} v {<c-op> 'and'} v {<c-op> '<'} {<c-c> 4}

			{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'} valid{<.c-br> '('}v{<.c-br> ')'} {<c-fl> '?'} v {<c-fl> ':'} {<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}one2four
			{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'}
			    {<c-fl> 'if'} v
			        {<c-let> 'number'} {<c-op> '='} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'}
			        {<c-fl> 'return'} number {<c-fl> 'if'} valid{<.c-br> '('}number{<.c-br> ')'}
			    {<c-c> 1}
			"""

			<div[d:vcc h:100px] slot="live">
				<[d:inline-block]>
					<.button@click=(R.write 'one2four', R.param('one2four') - 1)> "-"
					<b> " {R.param('one2four')} "
					<.button@click=(R.write 'one2four', R.param('one2four') + 1)> "+"
		
		<br>
		<a.button href='#/usage/'> "Reset playground"
		<br>
		<br>
		<br>
		"Complementary read: "
		<a href="http://router.maniak.pro/#/docs"> 'router.maniak.pro/#/docs'

R.setters.title = do |v| v.replaceAll(' ', '-')
R.getters.title = do |v| v.replaceAll('-', ' ')
R.setters.name = do |v| v if "Johny" != v
R.getters.name = do |v| v || "Johny"
R.getters.number = do |v| Number(v)

def valid(v)
	0 < v and v < 4

R.setters.one2four = do |v| valid(v) ? v : R.params.one2four
R.getters.one2four = do |v|
	if v
		let number = Number(v)
		return number if valid(number)
	1
css .example
	d:htl
	> mr: 10px

tag example-menu
	<self>
		<example-pro-ref-f.button params={}> "HELLO"
		<example-pro-ref-f.button params={ subview: 'another-view' }> "ANOTHER-VIEW"

tag example-pro-ref-f < pro-ref-f
	def render
		let link = go || url
		<self[d:inline].active=(R.to_path! == link) href=link @click.prevent=R.go(link)><slot>

tag example-hello
	<self> 'Hello World!'

tag example-another-view
	<self> 'This is another view.'

R.getters.subview = do |v| v || 'hello'