import input 	from "/elements/input.js"

import page 	from "/elements/page.js"


class label{

	constructor( text ) {

		this.text	= text;

	}

	background		= "#0000002e"

	borderRadius	= 6;

	margin			= 10;

	padding			= 26;

}

class a extends input{

	boxAlignItems		= "center"

	boxJustifyContent	= "center";

	boxColor			= "black"

}


class b extends input{

	//background			= "blue";

	boxAlignItems		= "center"

	boxJustifyContent	= "center";

	boxColor			= "black"

}

class c extends input{

	//background			= "yellow";

	boxAlignItems		= "center"

	boxJustifyContent	= "center";

	boxColor			= "black"


}

class d extends input{

	//boxBackground		= "grey";

	boxAlignItems		= "center"

	boxJustifyContent	= "center";

	boxColor			= "black"


}

class gridA{

	display				= "grid";
	
	gridTemplate			=	`

							"label          label"
						    "a             	a"
						    "b              d"
						    "c          	d" 
						`;

	height			= 400;

	width			= "100%"

	label		= new label("This is the first Grid, Press tab to navigate trough the inputs.");

	a			= new a();

	b			= new b();

	c			= new c();

	d			= new d();

}


class gridB{

	display				= "grid";
	
	gridTemplate			=	`

							"label          label"
						    "d             	d"
						    "a              empty"
						    "b          	b" 
						`;

	height			= 400;

	width			= "100%"

	label		= new label("This is the second Grid, Press tab to navigate trough the inputs.");

	a			= new a();

	b			= new b();

	c			= new c();

	d			= new d();

}

export default class gridExample extends page{

	flexDirection	= "column"


	gridA	= new gridA();

	gridB	= new gridB();

}