<div *ngIf="!isLoggedIn" class="form-container">
	<p>Please log in:</p>
	<label for="email">Your @nachklang.art email: </label>
	<input id="email" type="text" aria-label="Your Email" [(ngModel)]="email"><br>
	<label for="password">Password: </label>
	<input id="password" type="password" aria-label="Password" (keyup.enter)="login()" [(ngModel)]="password"><br>
	<button (click)="login()">Login</button>
	<br><br>
	<p>If you dont' have an account yet, please use the following form to register:</p>
	<label for="name">Your full name: </label>
	<input id="name" type="text" aria-label="Your Name" [(ngModel)]="name"><br>
	<label for="registerEmail">Your @nachklang.art email: </label>
	<input id="registerEmail" type="text" aria-label="Your Email" [(ngModel)]="registerEmail"><br>
	<label for="registerPassword">Password: </label>
	<input id="registerPassword" type="password" aria-label="Password" [(ngModel)]="registerPassword"><br>
	<label for="registerPasswordConfirm">Confirm password: </label>
	<input id="registerPasswordConfirm" type="password" aria-label="Password" (keyup.enter)="register()" [(ngModel)]="registerPasswordConfirm"><br>
	<p *ngIf="!checkPasswordPolicy()">Passwords have to use uppercase and lowercase letters, numbers and must have at least 12 characters!</p>
	<p *ngIf="!checkPasswordsMatch()">Passwords do not match!</p>
	<button (click)="register()">Register</button>
</div>
<div *ngIf="isLoggedIn">
	<span>Logged in as {{getUserName()}}</span>
	<span *ngIf="checkUserInactive()">&nbsp;(inactive)</span>
	<span>&nbsp;</span>
	<button (click)="logout()">Logout</button>
	<span>&nbsp; | &nbsp;</span>
	<span>Calendar: </span>
	<select [(ngModel)]="selectedCalendar" (change)="handleCalendarChange()">
		<option value="" disabled selected hidden>Select calendar</option>
		<option value="public">Public</option>
		<option value="members">Internal - Members</option>
		<option value="choir">Internal - Choir</option>
		<option value="management">Internal - Management</option>
	</select>
	<span>&nbsp; | &nbsp;</span>
	<span>Filter: </span>
	<select [(ngModel)]="eventFilter" (change)="getEvents()">
		<option value="all">All Events</option>
		<option value="future">Future Events only</option>
		<option value="past">Past Events only</option>
	</select>
	<span>&nbsp; | &nbsp;</span>
	<span>Sorting: </span>
	<select [(ngModel)]="eventSorting" (change)="sortEvents()">
		<option value="start_asc">Start Date - Ascending</option>
		<option value="start_desc">Start Date - Descending</option>
		<option value="created_asc">Created Date - Ascending</option>
		<option value="created_desc">Created Date - Descending</option>
	</select>
	<span>&nbsp; | &nbsp;</span>
	<button (click)="getEvents()">Reload Events</button>
	<div style="height: 1em;"></div>
	<app-events-table [events]="this.events" [selectedCalendar]="getCalendarId(selectedCalendar)"></app-events-table>
</div>