[[ 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="info">– 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>
		</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="info">– 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>

[[ } ]]