<style>
	.message {
		padding: 15px;
		margin-bottom: 30px;
	}
	.submit.form-group {
		margin-top: 25px;
	}
	.input-group-addon a {
		font-weight: bold;
		display: block;
	}
	a.input-help {
		display: inline-block;
		padding: 0 0.5rem;
	}
	#countdown {
		font-weight: bolder;
	}
	#TimeRemaining {
		margin-top: 30px;
		padding: 10px;
	}
	#skip_mfa {
		margin: 10px 10px 5px 20px;
	}
</style>

<div class="alert alert-{{ data.message_type }}" role="alert">{{ strings.message }}</div>

<form action="{{ hrefs.form_action }}" method="post" class="form-horizontal">
	<input type="hidden" name="{{ data.login_intent_flag }}" value="1" />
	{% if not hrefs.redirect_to is empty %}
		<input type="hidden" name="redirect_to" value="{{ hrefs.redirect_to }}" />
	{% endif %}
	{% if not hrefs.redirect_to is empty %}
		<input type="hidden" name="cancel_href" value="{{ hrefs.cancel_href }}" />
	{% endif %}

	{% for key_field, aField in data.login_fields %}
		<div class="form-row {% if aField.type == "hidden" %}d-none{% endif %}">
			<div class="form-group col">
				<label for="{{ aField.id|default(aField.name) }}">{{ aField.text }}</label>
				<div class="input-group">
					<input type="{{ aField.type }}"
						   name="{{ aField.name }}"
						   value="{{ aField.value }}"
						   class="form-control{% for class in aField.classes|default([]) %} {{ class }}{% endfor %}"
						   id="{{ aField.id|default(aField.name) }}"
						   placeholder="{{ aField.placeholder }}"
						   autocomplete="off"
						   {% if key_field == 0 %}autofocus{% endif %}
							{% for datakey, dataval in aField.datas|default([]) %}
								data-{{ datakey }}="{{ dataval }}"
							{% endfor %}
					/>

					{% if flags.show_branded_links %}
						<div class="input-group-append">
							<div class="input-group-text">
								<a href="{{ aField.help_link }}"
								   target="_blank" class="input-help">&quest;</a>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>

	{% endfor %}

	{% if flags.can_skip_mfa %}
		<div class="form-row">
			<div class="form-group mb-0">
				<div class="input-group">
					<label for="skip_mfa">
						<input type="checkbox" value="Y" name="skip_mfa" id="skip_mfa">
						{{ strings.skip_mfa }}
					</label>
				</div>
			</div>
		</div>
	{% endif %}

	<div class="form-group row submit">
		<div class="col-6 order-2 text-right">
			<button type="submit" id="mainSubmit" class="pull-right btn btn-success">
				{{ strings.verify_my_login }}</button>
		</div>
		<div class="col-6 order-1 text-left">
			<button class="btn btn-outline-danger" name="cancel" value="1">
				&larr; {{ strings.cancel }}</button>
		</div>
	</div>
</form>

<div class="row justify-content-center">
	<div class="col">
		<p id="TimeRemaining" class="text-center text-dark">
			{{ strings.time_remaining }}:
			<span id="countdown">{{ strings.calculating }}</span>
		</p>
	</div>
</div>

<script type="text/javascript">
	// Set the date we're counting down to
	var timeRemaining = {{ data.time_remaining }};
	// Update the count down every 1 second
	var x = setInterval( function () {
			timeRemaining -= 1;
			var timeRemainingText = '';
			if ( timeRemaining < 0 ) {
				timeRemainingText = '{{ strings.login_expired }}';
				clearInterval( x );
				loginExpired();
				document.getElementById( "TimeRemaining" ).innerHTML = timeRemainingText;
			}
			else {
				var minutes = Math.floor( timeRemaining / 60 );
				var seconds = Math.floor( timeRemaining % 60 );
				if ( minutes > 0 ) {
					timeRemainingText = minutes + " minutes and " + seconds
						+ " {{ strings.seconds }}";
				}
				else {
					timeRemainingText = timeRemaining.toFixed( 0 )
						+ " {{ strings.seconds }}";
				}
				document.getElementById( "countdown" ).innerHTML = timeRemainingText;
			}
		},
		1000
	);

	function loginExpired() {
		document.getElementById( "mainSubmit" ).setAttribute( 'disabled', 'disabled' );
		document.getElementById( "TimeRemaining" ).className = "text-center alert alert-danger";
	}
</script>