<!doctype html>
<html>
	<head>
		<title>Tilde Friends Sign-in</title>
		<link type="text/css" rel="stylesheet" href="/static/style.css" />
		<link type="image/svg+xml" rel="icon" href="/static/tildefriends.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
		<h1 style="text-align: center">Tilde Friends Sign-in</h1>
		<tf-auth id="auth"></tf-auth>
		<script>
			window.litDisableBundleWarning = true;
		</script>
		<script type="module">
			import {LitElement, html} from '/lit/lit-all.min.js';
			let g_data = $AUTH_DATA;
			let app = document.getElementById('auth');
			Object.assign(app, g_data);

			class TfAuthElement extends LitElement {
				static get properties() {
					return {
						code_of_conduct: {type: String},
						error: {type: String},
						have_administrator: {type: Boolean},
						name: {type: String},
						tab: {type: String},
					};
				}

				constructor() {
					super();
					this.tab = 'login';
				}

				render() {
					let self = this;
					return html`
						<style>
							[name="tab"] {
								display: none;
							}
							[name="tab"]+label {
								background-color: #586e75;
								padding: 1em;
								display: inline-block;
								flex: 1 0;
								text-align: center;
								cursor: pointer;
							}
							[name="tab"]+label:hover {
								background-color: #dc322f;
							}
							[name="tab"]:checked+label {
								background-color: #93a1a1;
								border: 2px solid #eee8d5;
							}
							.error {
								color: #f00;
								border: 1px solid #f00;
								margin: 4px;
								padding: 8px;
							}
							form label {
								padding-top: 1em;
								font-weight: bold;
							}
							form input {
								font-size: x-large;
								padding: 4px;
							}
							input[type="submit"] {
								margin-top: 1em;
								margin-bottom: 1em;
								padding: 1em;
							}
						</style>
						<div style="display: flex; flex-direction: column; max-width: 1280px; margin: auto">
							<h1 ?hidden=${this.name}>Welcome.</h1>
							<h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1>

							<div style="display: flex; flex-direction: row; width: 100%">
								<input type="radio" name="tab" id="login" value="Login" ?checked=${this.tab == 'login'} @change=${() => (self.tab = 'login')}></input>
								<label for="login" id="login_label">Login</label>

								<input type="radio" name="tab" id="register" value="Register" ?checked=${this.tab == 'register'} @change=${() => (self.tab = 'register')}></input>
								<label for="register" id="register_label">Register</label>

								<input type="radio" name="tab" id="guest" value="Guest" ?checked=${this.tab == 'guest'} @change=${() => (self.tab = 'guest')}></input>
								<label for="guest" id="guest_label">Guest</label>

								<input type="radio" name="tab" id="change" value="Change Password" ?checked=${this.tab == 'change'} @change=${() => (self.tab = 'change')}></input>
								<label for="change" id="change_label">Change Password</label>
							</div>

							<div ?hidden=${this.tab != 'login' && this.tab != 'register' && this.tab != 'change'}>
								<div id="error" ?hidden=${this.error === undefined} class="error">
									${this.error}
								</div>
								<form method="POST" style="display: flex; flex-direction: column">
									<label for="name">Name:</label>
									<input type="text" id="name" name="name"></input>

									<label for="password">${this.tab == 'change' ? 'Old ' : ''}Password:</label>
									<input type="password" id="password" name="password"></input>

									<label ?hidden=${this.tab != 'change'} for="new_password">New Password:</label>
									<input ?hidden=${this.tab != 'change'} type="password" id="new_password" name="new_password"></input>

									<label ?hidden=${this.tab != 'register' && this.tab != 'change'} for="confirm">Confirm ${this.tab == 'change' ? 'New ' : ''}Password:</label>
									<input ?hidden=${this.tab != 'register' && this.tab != 'change'} type="password" id="confirm" name="confirm"></input>

									<input id="loginButton" type="submit" name="submit" value="Login"></input>
									<input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input>
									<input type="hidden" name="change" value="${this.tab == 'change' ? 1 : 0}"></input>
								</form>
							</div>
							<div ?hidden=${this.tab != 'guest'}>
								<form method="POST" style="display: flex; flex-direction: column">
									<input type="submit" id="guestButton" name="guestButton" value="Proceed as Guest"></input>
								</form>
							</div>

							<div ?hidden=${this.have_administrator} class="notice">
								There is currently no administrator.  You will be made administrator.
							</div>

							<h2>Code of Conduct</h2>
							<textarea readonly rows="20" cols="80" style="resize: none">${this.code_of_conduct}</textarea>
						</div>
					`;
				}
			}
			customElements.define('tf-auth', TfAuthElement);
		</script>
	</body>
</html>