[[ if (! logged_in) { ]]

<div class="mediaDrawer fixed animate signin">
	<span class="close">X</span>
	<div class="box">
		<form id="signIn" method="post">
			<input type="hidden" name="_csrf" value="[[- token ]]">
			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign in with Facebook</span></a>
			<b class="signin-tagline">– or the ol' fashion way –</b>
			<li>
				<label class="description" for="usernameInput">Username:</label>
				<div>
					<input id="usernameInput" name="username" class="element text medium" type="text" maxlength="255" value=""/> 
				</div>
			</li> 
			<li>
				<label class="description" for="passwordInput">Password:</label>
				<div>
					<input id="passwordInput" name="password" class="element text medium" type="password" maxlength="255" value=""/> 
				</div> 
			</li>
			<li class="buttons">
				<input id="saveForm" class="button_text" type="submit" value="Submit" />
			</li>
			<div class="errors">
				<div>There was a problem with your submission:</div>
				<div class="errorList"></div>
			</div>
			<br><br>
			<a data-role="show-signup-modal" href="#">Make a new account</a><br>
			<a data-role="forgot-password" href="#">Forgot your password?</a>
		</form>
	</div>
</div>

<div class="mediaDrawer fixed animate signup">
	<span class="close">X</span>
	<div class="box">
		<form id="signUp" method="post">
			<input type="hidden" name="_csrf" value="[[- token ]]">
			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign up with Facebook</span></a>
			<b class="signin-tagline">– or the ol' fashion way –</b>
			<li>
				<label class="description" for="usernameInput">Username:</label>
				<div>
					<input id="usernameInput" name="username" class="element text medium" type="text" maxlength="255"> 
				</div>
			</li>
			<li>
				<label class="description" for="emailInput">Email:</label>
				<div>
					<input id="emailInput" name="email" class="element text medium" type="text" maxlength="255"> 
				</div>
			</li> 
			<li>
				<label class="description" for="passwordInput1">Password:</label>
				<div>
					<input id="passwordInput1" name="password" class="element text medium" type="password" maxlength="255"> 
				</div> 
			</li>
			<li>
				<label class="description" for="passwordInput2">Again!</label>
				<div>
					<input id="passwordInput2" class="element text medium" type="password" maxlength="255"> 
				</div> 
			</li>
			<li class="buttons">
				<input id="saveForm" class="button_text" type="submit" value="Submit" />
			</li>
			<div class="errors">
				<div>There was a problem with your submission:</div>
				<div class="errorList"></div>
			</div>
		</form>
	</div>
</div>

<div class="mediaDrawer fixed animate passwordForgot">
	<span class="close">X</span>
	<div class="box">
		<form id="forgotPw" method="post" autocomplete="off">
			<input type="hidden" name="_csrf" value="[[- token ]]">
			<li>
				Forgot your password?  Enter the email address you used to sign up
				and we can reset it for you.
			</li>
			<li>
				<label class="description" for="emailInput">Email:</label>
				<div>
					<input id="emailInput" name="email" class="element text medium" type="text" maxlength="255" value="" autocomplete="off" spellcheck="false"> 
				</div>
			</li> 
			<li class="buttons">
				<input id="saveForm" class="bb button" type="submit" value="Submit">
			</li>
			<div class="errors">
				<div>There was a problem with your submission:</div>
				<div class="errorList"></div>
			</div>
		</form>
	</div>
</div>

<div class="mediaDrawer fixed animate passwordReset">
	<div class="box">
		<form id="resetPassword" method="post">
			<input type="hidden" name="_csrf" value="[[- token ]]">
			<input type="hidden" name="nonce">
			Please reset your password.
			<br><br>
			<li>
				<label class="description" for="passwordInput1">Password:</label>
				<div>
					<input id="passwordInput1" name="password" class="element text medium" type="password" maxlength="255">
				</div> 
			</li>
			<li>
				<label class="description" for="passwordInput2">Again!</label>
				<div>
					<input id="passwordInput2" class="element text medium" type="password" maxlength="255">
				</div> 
			</li>
			<li class="buttons">
				<input id="saveForm" class="bb button" type="submit" value="Submit" />
			</li>
			<div class="errors">
				<div class="errorList"></div>
			</div>
		</form>
	</div>
</div>

<div class="mediaDrawer fixed animate usernameTaken">
	<div class="box">
		<form id="usernameTaken" method="post" autocomplete="off">
			We're sorry, the username <b id="usernameThatIsTaken"></b> is already being used.
			<br><br>
			Please choose another username.
			<br><br>
			<li>
				<label class="description" for="usernameInput">Username:</label>
				<div>
					<input id="usernameInput" name="username" class="element text medium" type="text" maxlength="255" value="" autocomplete="off" spellcheck="false"> 
				</div>
			</li>
			<li class="buttons">
				<input id="saveForm" class="bb button" type="submit" value="Submit">
			</li>
			<div class="errors">
				<div class="errorList"></div>
			</div>
		</form>
	</div>
</div>

[[ } ]]