css
	html, body m:0 p:0
	body ff:mono bgc:gray9
	a c:violet6 td:none td@hover:underline
	.active, .activated filter:brightness(130%)
	.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none
	.button@hover, .button.active bxs:md filter:hue-rotate(5deg) ml:0px pl:12px td:none
	.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block
	.bordered p:2.5px bw:1.5px c:violet9
	.night filter:invert(100%)
	.gradient
		bg:linear-gradient(to right,violet7,blue6,violet7)
		fw:normal
		-webkit-background-clip:text
		-webkit-text-fill-color:transparent

tag App
	css
		d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto
		@lt-xs m:0 px:0 rd:0

	<self.night=R.param('night')>
		<param-preview>
		<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router"
		<[d:flex flw:wrap w:100% jc:space-between]>
			<Menu>
			<pro-router[mx:40px maw:750px]>
		###
		<pro-ref view="b" params={ project: 2}> "b/project/2"
		<pro-ref-f view="c" params={ book: 3}> "c/book/3"
		
		<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)>
		###

tag Menu
	<self[d:flex fld:column mx:auto mb: 50px]>
		<pro-ref.button view=v> v.toUpperCase! for v in R.views
		###
		<pro-ref.button view="foo"> 'WRONG WAY!'
		<pro-toggle.button param="night">
			<label> "NIGHT"
			<input type='checkbox' checked=R.param('night')>
		###

tag param-preview
	<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}"

extend tag view-home
	<self>
		"What is "
		<b> "pro-router"
		" you can see here: "
		<a href="http://router.maniak.pro"> "router.maniak.pro"
		<br>
		"What is "
		<a href="https://imba.io"> "imba"
		" you surely know."
		<br>
		"This package integrates both."
		<br>
		<br>
		"Go to your project directory and run:"
		<br>
		<br>
		<code> "npm install pro-router-imba2 --save"

tag view-installation
	<self>
		"For your convenience package provides "
		<b> "vite plugin"
		" and installation command"
		"."
		<br>
		"Vite plugin will automatically define views for the router. Thanks to pro-router paradigm you will not write route definitions at all."
		<br>
		<br>
		"1. Create imba project (or go to directory of an existing one):"
		<br>
		<pre><code>
			"""
			npx imba create my-app
			cd my-app
			npm install
			"""
		<br>
		"2. Install pro-router-imba2 and run development server:"
		<pre><code>
			"""
			npm install pro-router-imba2 --save
			npx pro-router init
			npm run dev
			"""
		<br>
		"3. Add "
		<.bordered> "<pro-router>"
		" component to your app (in "
		<.bordered> "src/main.imba"
		" file)."
		<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>
			"""
			{<c-tag-def> 'my-app'}
			    {<c-tag> 'self'}
			        {<c-tag> "pro-ref{<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-home'}
			    {<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'}
			"""
		<br>
		"4. Everything is already set."

tag imba-code < pre
	prop file
	css bgc:gray8 d:block
		code bd:0 rd:0 
			&.file bgc:amber3 d:block
			&.content c:gray3
	<self>
		<code.file> file if file
		<code.content><slot>

tag c-el
	css d:inline c:gray3
tag c-op < c-el
	css c:white fw:bold
tag c-c < c-el
	css c:blue3
tag c-com < c-el
	css c:gray5
	<self>
		"# "
		<slot>
###
tag c-class < c-el
	<self[c:amber4]>
		<c-dot>
		<slot>
###
tag c-tag < c-el
	<self[c:white]>
		"<"
		<[c:blue4 d:inline]><slot>
		">"

tag c-tag-def < c-el
	<self[c:blue4]>
		"tag "
		<[c:green5 d:inline]><slot>

tag view-usage
	<self> "List of components"

tag view-examples
	<self> "Examples:"

tag view-why-to-use-it
	<self> "Why?"

imba.mount <App> if import.meta.env.MODE is 'development'