import * as sfw from 'sfw';
const { Div, Label, H1: Title, Input, Button } = sfw.element.native;

const css = await sfw.css(import.meta.url, './index.css');

export default class LoginView extends sfw.element.Container {
	#user
	#password

	constructor() {
		super({ css });

		this.onlogin = () => {};

		this.body.append(
			Div.new({
				id: 'container',
				children: [
					Div.new({ id: 'title', innerText: 'Memora' }),
					Div.new({
						id: 'box',
						children: [

							Div.new({
								id: 'form',
								children: [
									Label.new({ innerText: 'User' }),
									this.#user = Input.new({ }),

									Label.new({ innerText: 'Password' }),
									this.#password = Input.new({ type: 'password' }),
								]
							}),
							Button.new({
								innerText: 'Login',
								onclick: () => this.onlogin(this.#user.value, this.#password.value),
							}),
						]
					}),
					Div.new({
						id: 'subtitle',
						innerText: 'Where nostalgia is home.',
					}),
				]
			})
		);
	}
}