<style>
	.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-{{ vars.message_type }}" role="alert">{{ strings.message|raw }}</div>

<form action="{{ hrefs.form_action }}" method="post" class="form-horizontal" id="loginform" class="shield-2fa-custom">
	{% for hidden_field_name,hidden_field_value in vars.form_hidden_fields %}
		<input type="hidden" id="{{ hidden_field_name }}" name="{{ hidden_field_name }}" value="{{ hidden_field_value }}" />
	{% endfor %}

	{% for key_field, field in vars.login_fields %}
		{% include '/components/login_intent/login_field_'~field.slug~'.twig' %}
	{% endfor %}

	{% if flags.can_skip_mfa %}
		<div class="row">
			<div class="my-2">
				<div class="input-group">
					<label class="form-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="row submit mt-4">
		<div class="col-6 order-2 text-end">
			<button type="submit" id="mainSubmit" class="pull-right btn btn-success">
				{{ strings.verify_my_login }}</button>
		</div>
		<div class="col-6 order-1 text-start">
			<button class="btn btn-outline-dark" 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
  let timeRemaining = {{ vars.time_remaining }};
  // Update the count down every 1 second
  let 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>