import 	{
			Component,
			NgModule
		} 								from '@angular/core'

import	{	RouterModule			}	from '@angular/router'

import	{
			SharedModule,
			MainMenuModule,
			MainMenuEntry,
			TranslationsModule,
			provideMainMenuEntry
		}								from '@rcc/common'


const	en =	{
					'EXAMPLE_PAGE_MENU_ENTRY':	'ExamplePage',
					'EXAMPLE_TRANSLATION': 		'Translated text example (en)'
				}

const	de =	{
					'EXAMPLE_PAGE_MENU_ENTRY':	'Beispielseite',
					'EXAMPLE_TRANSLATION': 		'Übersetztes Textbeispiel (de)'
				}



@Component({
	template:  	`
					<ion-content>

						<h1> My example page </h1>

						<p> My example content </p>

						<p  [id] = "'EXAMPLES.EXAMPLE_TRANSLATION' | toID:'rcc-e2e'"> {{'EXAMPLES.EXAMPLE_TRANSLATION' | translate }} </p>

					</ion-content>
				`,
})
export class MyExamplePage{}


@Component({
	template:	`
					<ion-item routerLink = "examples/example-page">
						<ion-label [id] = "'EXAMPLES.EXAMPLE_PAGE_MENU_ENTRY' | toID:'rcc-e2e'">{{ "EXAMPLES.EXAMPLE_PAGE_MENU_ENTRY" | translate }}</ion-label>
					</ion-item>
				`
})
export class MyExampleMenuEntry {}


const routes 				=	[
									{
										path: 		'examples/example-page',
										component: 	MyExamplePage
									}
								]


@NgModule({
	imports: [
		SharedModule,
		RouterModule.forChild(routes),
		TranslationsModule.forChild("EXAMPLES", {en, de})

	],
	providers: [
		provideMainMenuEntry({position: -1, component: MyExampleMenuEntry})
	],
	declarations:[
		MyExamplePage,
		MyExampleMenuEntry
	]
})
export class ExamplePageModule {}