var login_template = `

<main>

<style>

	.separator {
	  display: flex;
	  align-items: center;
	  text-align: center;
	}

	.separator::before,
	.separator::after {
	  content: '';
	  flex: 1;
	  border-bottom: 1px solid #000;
	}

	.separator:not(:empty)::before {
	  margin-right: .25em;
	}

	.separator:not(:empty)::after {
	  margin-left: .25em;
	}

	.rb{
		border: 2px solid black;
		border-radius: 1em;
	}


	.rb_b{
		border: 2px solid black;
	}

	#main_form a {
    color: #000 !important;
    text-decoration: none;
}

</style>


<section class="vh-100">
  <div class="container-fluid">
    <div class="row">

			<div class="col-sm-6 px-0 d-none d-sm-block">
				<img src="img/background_new.png" alt="Login image" class="w-100 vh-100" style="object-fit: cover; object-position: left;">
			</div>

      <div class="col-sm-6 text-black">

        <div class="px-5 ms-xl-4 mt-5 pt-5 pt-xl-0 mt-xl-n5">

					<div id="login_div">
	          <form id="main_form">

	            <h3 class="fw-normal mb-3 pb-3"><b>Login</b></h3>

	            <div class="form-outline mb-4">
								<label class="form-label" for="login_mail">Email</label>
	              <input type="email" id="login_mail" class="form-control rb" placeholder="Email"/>
	            </div>

	            <div class="form-outline mb-4">
								<label class="form-label" for="login_pw">Passwort</label>
	              <input type="password" id="login_pw" class="form-control rb" placeholder="Passwort" />
	            </div>

	            <div class="pt-1 mb-4">
	              <button class="btn btn-outline-dark w-100 mt-1 rb_b" type="button" onclick="do_login();">Login
									<span id="login_spinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display:none;"></span>
								</button>
	            </div>

							<div id="pw_wrong_div" style="display:none">
								<span><b style="color:red">Login falsch!</b></span>
							</div>

							<a onclick="show_reset()" class="float-start" >Passwort vergessen?</a>

							<br>

							<div class="separator mt-2 mb-2">Oder</div>

							<a href="#register">Noch nicht registriert</a>

	          </form>
					</div>

					<div id="reset_div" style="display:none">

						<h3 class="fw-normal mb-3 pb-3"><b>Passwort zurücksetzten</b></h3>

						<p id="pw_body">Wenn Sie ihr Passwort vergessen haben, können Sie hier ein neues Passwortes anfordern. Im Anschluss können Sie in ihren Einstellungen ein neues Passwort vergeben.</p>

						<div class="form-outline mb-4">
							<label class="form-label" for="login_mail">Email:</label>
							<input type="email" id="resetmail" class="form-control rb" placeholder="Email"/>
						</div>

						<div class="pt-1 mb-4">
							<button class="btn btn-outline-dark w-100 mt-1 rb_b" type="button" onclick="reset_pw();">Passwort anfordern</button>
						</div>

					</div>

        </div>

      </div>

		</div>

  </div>
</section>
</main>


<script>
	function show_reset(){
			$("#login_div").hide();
			$("#reset_div").show();
	}


	function reset_pw(){

		var mail = $("#resetmail").val();

		$("#pw_body").html("...Sende...")

		$.post("/reset_pw", { mail: mail }).done(function( data ) {
			setTimeout(function(){
			$("#pw_body").html("Eine E-Mail mit dem neuem Passwort wurde gesendet!")
			},1000)

		  setTimeout(function(){ window.location.reload();},4500);
		});
	}
</script>

`;