<!DOCTYPE html>
<!--
  ~
  ~ Copyright © 2015-2017 Antergos
  ~
  ~ index.html
  ~
  ~ This file is part of Web Greeter
  ~
  ~ web-greeter is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License,
  ~ or any later version.
  ~
  ~ web-greeter is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU General Public License for more details.
  ~
  ~ The following additional terms are in effect as per Section 7 of the license:
  ~
  ~ The preservation of all legal notices and author attributions in
  ~ the material or in the Appropriate Legal Notices displayed
  ~ by works containing it is required.
  ~
  ~ You should have received a copy of the GNU General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LightDM Web Greeter</title>

	<!--For testing the theme in a web browser -->
	<!--<script type="text/javascript" src="../_vendor/js/mock.js"></script>-->

	<!-- Vendor CSS -->
	<link rel="stylesheet" type="text/css" href="../../_vendor/css/bootswatch-paper.bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="../../_vendor/fonts/font-awesome/font-awesome.min.css"/>

	<!-- Theme's CSS -->
	<link rel="stylesheet" type="text/css" href="css/style.css">

	<!-- Vendor JavaScript -->
	<script src="../../_vendor/js/jquery.min.js"></script>
	<script src="../../_vendor/js/bootstrap.min.js"></script>
	<script src="../../_vendor/js/js.cookie.min.js"></script>

	<!-- Theme JavaScript -->
	<script src="js/translations.js"></script>
	<script src="js/greeter.js"></script>

</head>

<body>

<!-- BG Switcher -->
<a id="bg-switch-toggle" href="#" class="btn btn-primary btn-lg toggle close_wallpapers">
	<i class="fa fa-bars"></i>
</a>

<div id="bg-switch-wrapper">
	<div class="bg-switch-container">
		<a id="bg-switch-close" href="#" class="btn btn-default btn-lg pull-right toggle close_wallpapers">
			<i class="fa fa-times"></i>
		</a>

		<div class="bg-switch">
			<h3 data-i18n="background_options">${i18n}</h3>
			<div class="clearfix"></div>
			<div class="bgs">
				<a href="#" data-img="random" class="bg clearfix">
					<div class="random">
						<span data-i18n="random">${i18n}</span>
					</div>
				</a>
				<!--Background thumbnails will be added here dynamically -->
			</div>
		</div>
	</div>
</div>
<!-- /BG Switcher Sidebar -->

<!-- Full Page Image Header Area -->
<div id="top" class="header">
	<div class="login-wrapper">
		<div class="login-cell">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<!-- Login Dialog -->
						<div id="login" class="panel panel-default login-box">
							<div class="panel-heading text-center">
									<span class="pull-left">
										<img src="img/antergos.png" data-greeter-config="logo" alt="Antergos"/>
									</span> <span class="welcome"></span>
								<span id="hostname" class="pull-right"></span>
							</div>
							<div id="panelfix" class="panel-body panel-shadow">
								<div class="panel-group" id="accordion">
									<div class="panel panel-default panel-shadow time-panel">

										<div id="collapseOne" class="panel-collapse collapse in">
											<div id="timewrap" class="panel-body panel-shadow time-panel text-center">
												<a id="trigger" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
													<!-- Clock Widget -->
													<span id="current_time" class="time text-center"></span>
													<i class="fa fa-toggle-up"></i> </a>

											</div>

										</div>

									</div>
									<div class="panel panel-default panel-shadow panel-flow">
										<!-- User Selection Widget -->
										<div id="collapseTwo" class="panel-collapse panel-shadow collapse">
											<div id="list-group" class="panel-body panel-shadow panel-wrap">

												<div class="user-wrap2">

													<div id="user-list2" class="list-group"></div>
													<a id="user-target2" class="user-toggle cancel_auth" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
														<i class="fa fa-toggle-down" style="position:absolute;"></i>
													</a>

												</div>
												<!-- Password Input -->
												<div id="passwordArea" class="password">
													<table border="0" align="center">
														<tr>
															<td>
																<div class="input-group">
																	<input id="passwordField" title="input password" type="password" class="password form-control"/>

																	<div class="input-group-btn">
																		<div class="btn-group">
																			<button class="btn btn-primary submit_passwd" type="button" title="submit password">
																				<i class="fa fa-sign-in"></i>
																			</button>
																			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" title="show options menu">
																				<i class="fa fa-caret-down"></i>
																			</button>
																			<ul class="dropdown-menu pull-right" title="options menu">
																				<li>
																					<a href="#" class="cancel_auth" data-i18n="cancel" title="cancel">
																						<i class="fa fa-times"></i> ${i18n}</a>
																				</li>
																				<li>
																					<a href="#" onclick="$(document.location.reload(true))" data-i18n="reset" title="reset">
																						<i class="fa fa-refresh"></i> ${i18n}</a>
																				</li>
																				<li>
																					<a href="#" data-i18n="debug_log" title="debug log">
																						<i class="fa fa-bug"></i> ${i18n}</a>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>
															</td>

														</tr>
													</table>
													<div id="timerArea" class="timer">
														<i class="fa fa-spinner"></i>
													</div>
												</div>
												<!-- Status Area -->
												<div id="statusArea" class="status">
													<div class="alert alert-dismissible alert-danger fade in">
														<button type="button" class="close cancel_auth" data-dismiss="alert" aria-hidden="true">&nbsp;&times;</button>
													</div>
												</div>

											</div>
										</div>
									</div>

								</div>
							</div>

							<div class="panel-footer">
								<div id="session-list" class="btn-group pull-left hidden">
									<button type="button" class="btn btn-default selected"></button>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										<span class="fa fa-caret-down"></span></button>
									<ul id="sessions" class="dropdown-menu"></ul>
								</div>
								<div id="actionsArea" class="btn-group pull-right"></div>

							</div>

						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

<div id="logArea" class="log"></div>

<div class="modal">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close fa fa-close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title" data-i18n="confirm_system_action">${i18n}</h4>
			</div>
			<!--<div class="modal-body">
			</div>-->
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" data-i18n="cancel">${i18n}</button>
				<button type="button" class="btn btn-primary"></button>
			</div>
		</div>
	</div>
</div>

<!-- Custom JavaScript for the BG Switcher & Clock Toggle -->
<script>
	// TODO: Move this stuff into greeter.js
	$('#bg-switch-wrapper').on('transitionend', function() {
		if ( $(this).hasClass('active') ) {
			$('#bg-switch-toggle').hide(0);
			$('#bg-switch-close').show(0);
		} else {
			$('#bg-switch-close').hide(100);
			$('#bg-switch-toggle').show(100);
		}
	});
	$( "#bg-switch-close, #bg-switch-toggle" ).click( function( e ) {
		e.preventDefault();
		$('#bg-switch-wrapper').toggleClass( "active" );
	} );

	$( '#collapseTwo' ).on( 'shown.bs.collapse', function() {
		$(this).find( 'a' ).filter( ':not(.dropdown-menu *)' ).each( function( index ) {
			$( this ).attr( 'tabindex', index + 1 );
		} );
	} );
	$( '#collapseTwo' ).on( 'hidden.bs.collapse', function() {
		$(this).find( 'a' ).filter( ':not(.dropdown-menu *)' ).each( function( index ) {
			$( this ).attr( 'tabindex', -1 );
		} );
	} );

</script>

</body>

</html>