<template name="username">
	<section class="full-page color-tertiary-font-color">
		<div class="wrapper">
			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
				<header>
					<h2>{{_ "Username_title"}}</h2>
					<p>{{_ "Username_description"}}</p>
				</header>
				{{#if username.error}}
					<div class="alert error-color error-background error-border">
						{{{_ "error-field-unavailable" field=username.username}}}
					</div>
				{{/if}}
				{{#if username.invalid}}
					<div class="alert error-color error-background error-border">
						{{{_ "Username_invalid" username.username}}}
					</div>
				{{/if}}
				{{#if username.empty}}
					<div class="alert error-color error-background error-border">
						{{{_ "Username_cant_be_empty"}}}
					</div>
				{{/if}}
				<div class="fields">
					<div class='input-text active'>
						{{#if username.ready}}
							<span>
								<label for="username">{{_ "Username"}}</label>
								<input type="text" name='username' id="username" value="{{username.username}}" dir="auto"/>
							</span>
							<i></i>
						{{else}}
							{{_ "Loading_suggestion"}}
						{{/if}}
					</div>
				</div>

				{{#if username.ready}}
					<div class="submit">
						<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
					</div>
				{{/if}}
			</form>
		</div>
	</section>
</template>
