var profil_template = `

	<style>
		.profile_pic_big{
			height: 12em;
			width: 12em;
			border-radius: 50%;
		}

		#edit_btn{
			left: 0em;
			top: 0em;
			position: relative;
		}

		@media only screen and (max-width: 991px) {
		  .border-end {
		    border-right: 0px solid #dee2e6 !important;
		  }
		}

	</style>

	<div>

		<div class="row">

			<div class="col-12 col-lg-4 border-end">

				<div class="mb-3 d-flex justify-content-center">
					<div id="edit_btn" onclick="open_img_upload()">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
						  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
						  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
						</svg>
					</div>

					<img class="profile_pic_big" src="{{it.userpic | safe}}" onclick="open_img_upload()">
					<input class="form-control" type="file" id="profil_pic_upload" onchange="upload_profile_picture()" style="display:none;">
				</div>

				<p><b>Name:</b> {{it.Full_name}}</p>
				<p><b>E-Mail:</b> {{it.Mail}}</p>
				<p><b>Firma:</b> {{it.Company}}</p>

				<div class="mb-3">
				  <label for="phone" class="form-label"><b>Telefonnummer: </b></label>
				  <input type="text" class="form-control" name="Phone" value="{{it.Phone}}" onchange="update_field(this)" autocomplete="off">
				</div>

				<div class="mb-3">
					<label for="mobile" class="form-label"><b>Mobilnummer: </b></label>
					<input type="text" class="form-control" name="Mobile" value="{{it.Mobile}}" onchange="update_field(this)" autocomplete="off">
				</div>

				<div class="mb-3">
						<label for="new_pw" class="form-label"><b>Neues Passwort: </b></label>
						<input type="password" class="form-control" id="new_pw" aria-describedby="Neues Passwort" placeholder="Neues Passwort" autocomplete="off">
				</div>

				<div class="d-lg-none">
					<button id="reset_pw_1" class="btn btn-primary float-start" onclick="reset_pw();">Passwort zurücksetzen</button>
				</div>

			</div>

			<div class="col-12 col-lg-8 mt-5">
				<div class="btn-group d-flex" role="group" aria-label="...">
				  <button id="shipping_btn" type="button" class="btn btn-primary w-100 p-2" onclick="show_shipping()" style="word-break: break-all;">Lieferadresse</button>
				  <button id="bill_btn" type="button" class="btn btn-secondary w-100 p-2" onclick="show_bill()" style="word-break: break-all;">Rechnungsadresse</button>
				</div>


				<div id="div_shipping" class="mt-4" >
							<div class="mb-3">
								<label for="Shipping_attention" class="form-label"><b>Empfänger: </b></label>
								<input type="text" class="form-control" name="Shipping_attention" value="{{it.Shipping_attention}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Shipping_place" class="form-label"><b>Ort: </b></label>
								<input type="text" class="form-control" name="Shipping_place" value="{{it.Shipping_place}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Shipping_plz" class="form-label"><b>Postleitzahl: </b></label>
								<input type="text" class="form-control" name="Shipping_plz" value="{{it.Shipping_plz}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Shipping_street" class="form-label"><b>Strasse: </b></label>
								<input type="text" class="form-control" name="Shipping_street" value="{{it.Shipping_street}}" onchange="update_field(this)" autocomplete="off">
							</div>

				</div>

				<div id="div_bill" style="display:none" class="mt-4"  >

							<div class="mb-3">
								<label for="Bill_attention" class="form-label"><b>Empfänger: </b></label>
								<input type="text" class="form-control" name="Bill_attention" value="{{it.Bill_attention}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Bill_place" class="form-label"><b>Ort: </b></label>
								<input type="text" class="form-control" name="Bill_place" value="{{it.Bill_place}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Bill_plz" class="form-label"><b>Postleitzahl: </b></label>
								<input type="text" class="form-control" name="Bill_plz" value="{{it.Bill_plz}}" onchange="update_field(this)" autocomplete="off">
							</div>

							<div class="mb-3">
								<label for="Bill_street" class="form-label"><b>Strasse: </b></label>
								<input type="text" class="form-control" name="Bill_street" value="{{it.Bill_street}}" onchange="update_field(this)" autocomplete="off">
							</div>
				</div>

			</div>

		</div>

		<div class="row">
			<div class="col-12 col-lg-4">
				<div class="d-none d-lg-block">
					<button id="reset_pw_2" class="btn btn-primary float-start" onclick="reset_pw();">Passwort zurücksetzen</button>
				</div>
			</div>

			<div class="col-12 col-lg-8">
				<button type="button" class="btn btn-primary" name="button" onclick="save_settings()">Änderungen speichern</button>
			</div>

		</div>

	</div>

	<script>

		function show_shipping(){
			$("#div_shipping").show();
			$("#div_bill").hide();
			$("#shipping_btn").addClass("btn-primary");
			$("#shipping_btn").removeClass("btn-secondary")
			$("#bill_btn").addClass("btn-secondary");
			$("#bill_btn").removeClass("btn-primary")
		}

		function show_bill(){
			$("#div_bill").show();
			$("#div_shipping").hide();
			$("#shipping_btn").addClass("btn-secondary");
			$("#shipping_btn").removeClass("btn-primary")
			$("#bill_btn").addClass("btn-primary");
			$("#bill_btn").removeClass("btn-secondary")
		}

		function open_img_upload(){
			$('#profil_pic_upload').trigger('click');
		}

		function update_field( in_e ){

			var field_name = $( in_e ).attr("name");
			var field_val = $(in_e).val();

			console.log( field_name );
			console.log( field_val );
			
			$.post("/update_profile", { name: field_name, val: field_val}).done(function( data ){});
		}

		function upload_profile_picture(){

			var formData = new FormData();

			var si = $('#profil_pic_upload')[0].files[0];

			var si_base64 = si

			formData.append('pic', si );

			bootbox.dialog({ message: '<h2>Speichere <div class="spinner-border" role="status"><span class="sr-only"></span></div> </h2> ',closeButton: false});

			var reader = new FileReader();
      reader.onload = function () {
            si_base64 = reader.result.replace("data:", "").replace(/^.+,/, "");
						si_base64 = "data:image/png;base64," + si_base64;
						$.ajax({
								url: 'update_profile_picture', // URL zum Hochladen der Datei
								type: 'POST',
								data: formData,
								processData: false,
								contentType: false,
								success: function(response) {
										user_pic = si_base64;
										localStorage.setItem("pic", user_pic);
										window.location.reload();
								},
								error: function(jqXHR, textStatus, errorThrown) {
										bootbox.alert('Fehler!',function(){ window.location.reload(); });
								}
							});

			}

			reader.readAsDataURL(si);
		}

		function reset_pw(){

			var new_pw = $("#new_pw").val();

			if( new_pw == ""){
				bootbox.alert("Passwort darf nicht leer sein!");
				return;
			}

			$.post("/reset_user_pw", { new_pw : new_pw}).done(function( data )
			{
				if( data != "error" && data != "")
				{
					bootbox.alert("Passwort geändert!");
				}else{
					bootbox.alert("Fehler! Passwort nicht geändert!");
				}
			}).fail(function(xhr, status, error) {
        bootbox.alert("Fehler! Passwort nicht geändert!");
    	});


		}


		function save_settings(){
			bootbox.alert("Gespeichert!");
		}

	</script>
`;