{namespace neos=Neos\Neos\ViewHelpers}
<f:layout name="Default" />

<f:section name="head">
	<title><neos:backend.translate id="login.index.title">Login to</neos:backend.translate> {site.name}</title>
	<f:for each="{styles}" as="style">
		<link rel="stylesheet" href="{f:uri.resource(path: style)}" />
	</f:for>
	<f:if condition="{settings.userInterface.backendLoginForm.backgroundImage}">
		<style type="text/css">
			.neos-login-box:before {
				background-image: url({f:uri.resource(path: settings.userInterface.backendLoginForm.backgroundImage)});
			}
		</style>
	</f:if>
	<script src="{f:uri.resource(path: 'Library/jquery/jquery-2.0.3.js')}"></script>
	<script src="{f:uri.resource(path: 'Library/jquery-ui/js/jquery-ui-1.10.4.custom.js')}"></script>
</f:section>

<f:section name="body">
	<f:if condition="{settings.userInterface.backendLoginForm.backgroundImage}">
		<f:then>
			<body class="neos" style="background-image:url({f:uri.resource(path: settings.userInterface.backendLoginForm.backgroundImage)});">
		</f:then>
		<f:else>
			<body class="neos">
		</f:else>
	</f:if>
		<div class="neos-modal-centered">
			<main class="neos-login-main">
				<div class="neos-login-box {f:if(condition: settings.userInterface.backendLoginForm.backgroundImage, then: 'background-image-active')}">
					<figure class="neos-login-box-logo">
						<img class="neos-login-box-logo-resource" src="{f:uri.resource(path: 'Images/Login/Logo.svg')}" width="200px" height="200px" alt="Neos Logo" />
					</figure>

					<h1 class="neos-login-heading">
						<neos:backend.translate id="login.index.title">Login to</neos:backend.translate>
						<strong>{site.name}</strong>
					</h1>
					<div class="neos-login-body neos">
						<f:form name="login" action="authenticate">
							<f:form.hidden name="lastVisitedNode"/>
							<fieldset>
								<f:if condition="{username}">
									<f:then>
										<div class="neos-controls">
											<f:form.textfield required="required" id="username" type="text"
															  placeholder="{neos:backend.translate(id: 'username', value: 'Username')}"
															  class="neos-span12"
															  name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][username]"
															  additionalAttributes="{aria-label:'{neos:backend.translate(id: \'username\', value: \'Username\')}'}"
															  value="{username}"/>
										</div>
										<div class="neos-controls">
											<f:form.textfield required="required" id="password" type="password"
															  placeholder="{neos:backend.translate(id: 'password', value: 'Password')}"
															  class="neos-span12"
															  name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][password]"
															  additionalAttributes="{autofocus:'autofocus', aria-label:'{neos:backend.translate(id: \'password\', value: \'Password\')}'}"/>
										</div>
									</f:then>
									<f:else>
										<div class="neos-controls">
											<f:form.textfield required="required" id="username" type="text"
															  placeholder="{neos:backend.translate(id: 'username', value: 'Username')}"
															  class="neos-span12"
															  name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][username]"
															  additionalAttributes="{autofocus:'autofocus', aria-label:'{neos:backend.translate(id: \'username\', value: \'Username\')}'}"
															  value="{username}"/>
										</div>
										<div class="neos-controls">
											<f:form.textfield required="required" id="password" type="password"
															  placeholder="{neos:backend.translate(id: 'password', value: 'Password')}"
															  class="neos-span12"
															  name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][password]"
															  additionalAttributes="{aria-label:'{neos:backend.translate(id: \'password\', value: \'Password\')}'}"/>
										</div>
									</f:else>
								</f:if>
								<div class="neos-actions">
									<!-- Forgot password link will be here -->
									<f:form.button type="submit" class="neos-span5 neos-pull-right neos-button neos-login-btn">
										<neos:backend.translate id="login" value="Login"/>
									</f:form.button>
									<button class="neos-span5 neos-pull-right neos-button neos-login-btn neos-disabled neos-hidden">
										<neos:backend.translate id="authenticating" value="Authenticating"/>
										<span class="neos-ellipsis"></span>
									</button>
									<f:flashMessages as="flashMessages">
										<f:for each="{flashMessages}" as="flashMessage">
											<f:if condition="{flashMessage.severity} === 'OK'">
												<div class="neos-tooltip neos-bottom neos-in neos-tooltip-success">
											</f:if>
											<f:if condition="{flashMessage.severity} === 'Notice'">
												<div class="neos-tooltip neos-bottom neos-in neos-tooltip-notice">
											</f:if>
											<f:if condition="{flashMessage.severity} === 'Warning'">
												<div class="neos-tooltip neos-bottom neos-in neos-tooltip-warning">
											</f:if>
											<f:if condition="{flashMessage.severity} === 'Error'">
												<script>
													$(function () {
														$('fieldset').effect('shake', {times: 1}, 60);
													});
												</script>
												<div class="neos-tooltip neos-bottom neos-in neos-tooltip-error">
											</f:if>
											<div class="neos-tooltip-arrow"></div>
											<div class="neos-tooltip-inner" role="alert">{neos:backend.translate(id:
												'flashMessage.{flashMessage.code}', package: 'Neos.Neos', value: flashMessage)}
											</div>
										</f:for>
									</f:flashMessages>
								</div>
							</fieldset>
						</f:form>
					</div>
				</div>
			</main>
			<footer class="neos-login-footer">
				<p>
					<a href="http://neos.io" target="_blank">Neos</a> –
					© 2006-{f:format.date(date: 'now', format: 'Y')} This is free software, licensed under GPL3 or higher, and you are welcome to redistribute it under certain conditions;
					Neos comes with ABSOLUTELY NO WARRANTY;
					See <a href="http://neos.io" target="_blank">neos.io</a> for more details. Obstructing the appearance of this notice is prohibited by law.
				</p>
			</footer>
		</div>

		<script src="{f:uri.resource(path: '2/js/bootstrap.min.js', package: 'Neos.Twitter.Bootstrap')}"></script>
		<script>
			if ($('#username').val()) {
				$('#password').focus();
			}
			$('form').on('submit', function() {
				$('.neos-login-btn').toggleClass('neos-hidden');
			});
			try {
				$('form[name="login"] input[name="lastVisitedNode"]').val(sessionStorage.getItem('Neos.Neos.lastVisitedNode'));
			} catch(e) {}
		</script>
	</body>
</f:section>
