From 1bc53146b9f024f3cab613b227d29304d687c92b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 20 Mar 2025 21:51:00 +0100
Subject: [PATCH] wip

---
 src/components/donors/DonorDetail.svelte   |  41 +-
 src/components/orgs/OrgDetail.svelte       | 956 +++++++++++----------
 src/components/runners/RunnerDetail.svelte |   1 -
 src/components/teams/TeamDetail.svelte     | 599 ++++++-------
 4 files changed, 800 insertions(+), 797 deletions(-)

diff --git a/src/components/donors/DonorDetail.svelte b/src/components/donors/DonorDetail.svelte
index 561913ea..e139c663 100644
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -145,7 +145,6 @@
 			{original_data.middlename || ""}
 			{original_data.lastname}
 			<div data-id="donor_actions_${editable.id}">
-				<p class="text-base">Aktionen</p>
 				{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
 					{#if delete_triggered}
 						<button
@@ -226,8 +225,8 @@
 				{/each}
 			{:else}{$_("donor-has-no-associated-donations")}{/if}
 		</div>
-		<div class=" w-full">
-			<label for="firstname" class="font-medium text-gray-700"
+		<div class="mt-2 w-full">
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -239,7 +238,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -249,8 +248,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class=" w-full">
-			<label for="middlename" class="font-medium text-gray-700"
+		<div class="mt-2 w-full">
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -259,11 +258,11 @@
 				type="text"
 				bind:value={editable.middlename}
 				name="middlename"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-		<div class=" w-full">
-			<label for="lastname" class="font-medium text-gray-700"
+		<div class="mt-2 w-full">
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -275,7 +274,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -285,8 +284,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class=" w-full">
-			<label for="email" class="font-medium text-gray-700"
+		<div class="mt-2 w-full">
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -298,7 +297,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -308,8 +307,8 @@
 				</span>
 			{/if}
 		</div>
-		<div class=" w-full">
-			<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+		<div class="mt-2 w-full">
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -319,7 +318,7 @@
 				class:focus:ring-red-500={!isPhoneValidOrEmpty}
 				bind:value={editable.phone}
 				name="phone"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isPhoneValidOrEmpty}
 				<span
@@ -340,7 +339,7 @@
 				/>
 			</div>
 			<div class="ml-3">
-				<label for="comments" class="font-medium text-gray-700"
+				<label for="comments" class="font-semibold text-gray-700"
 					>{$_("receipt-needed")}</label
 				>
 			</div>
@@ -359,7 +358,7 @@
 					bind:value={editable.address.address1}
 					type="text"
 					name="address1"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !isAddress1Valid}
 					<span
@@ -379,7 +378,7 @@
 					bind:value={editable.address.address2}
 					type="text"
 					name="address2"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 			</div>
 			<div class="col-span-6">
@@ -395,7 +394,7 @@
 					bind:value={editable.address.postalcode}
 					type="text"
 					name="zipcode"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iszipcodevalid}
 					<span
@@ -418,7 +417,7 @@
 					bind:value={editable.address.city}
 					type="text"
 					name="city"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iscityvalid}
 					<span
diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index 56744350..a3774be5 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -1,488 +1,490 @@
 <script>
-  import {
-    GroupContactService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import toast from 'svelte-french-toast'
+	import {
+		GroupContactService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import toast from "svelte-french-toast";
 
-  import store from "../../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import { tick } from "svelte";
-  $: delete_triggered = false;
-  $: address_valid_or_none =
-    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false;
-  $: save_enabled = data_changed && address_valid_or_none;
-  let original = "";
-  let original_object = {};
-  let contacts = [];
-  let valueCopy = null;
-  let areaDom;
-  let copied = false;
-  export let params;
-  $: editable = {};
-  $: contact = {};
-  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(editable) === original);
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_orgs = [original_object];
-  $: registrationLink = `${config.baseurl_selfservice}/register/${editable.registrationKey}`;
-  const getContactLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    params.orgid
-  ).then((value) => {
-    data_loaded = true;
-    value.address_checked = value.address.address1 !== null;
-    if (value.address_checked === false) {
-      value.address = {
-        address1: "",
-        address2: "",
-        city: "",
-        postalcode: "",
-        country: "",
-      };
-    }
-    editable = Object.assign(editable, value);
-    editable = editable;
-    original_object = Object.assign(editable, value);
-    original = JSON.stringify(value);
-    GroupContactService.groupContactControllerGetAll().then((val) => {
-      contacts = val.map((r) => {
-        return { label: getContactLabel(r), value: r };
-      });
-      if (editable.contact) {
-        contact = contacts.find((g) => g.value.id == editable.contact.id);
-      } else {
-        contact = null;
-      }
-    });
-  });
-  let modal_open = false;
-  let delete_org = {};
-  function deleteOrganization() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      original_object.id,
-      false
-    )
-      .then((resp) => {
-        toast($_("organization-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_org = original_object;
-      });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-organization"));
-      let postdata = Object.assign({}, editable);
-      if (postdata.address_checked === false) {
-        postdata.address = null;
-      }
-      postdata.contact = postdata.contact?.id;
-      RunnerOrganizationService.runnerOrganizationControllerPut(
-        original_object.id,
-        postdata
-      )
-        .then((resp) => {
-          editable.registrationKey = resp.registrationKey;
-          original_object = Object.assign({}, editable);
-          original = JSON.stringify(original_object);
-          toast.success($_("updated-organization"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  async function copy() {
-    if (!editable.registrationKey) {
-      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
-      return;
-    }
-    valueCopy = registrationLink;
-    await tick();
-    areaDom.focus();
-    areaDom.select();
-    try {
-      const successful = document.execCommand("copy");
-      if (!successful) {
-        throw new Error();
-      }
-      toast($_("copied-link-to-clipboard"));
-      copied = true;
-    } catch (err) {
-      toast.error($_("error-whyile-copying-to-clipboard"));
-    }
-    // we can notifi by event or storage about copy status
-    valueCopy = null;
-  }
-  export let import_modal_open = false;
+	import store from "../../store";
+	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import PromiseError from "../base/PromiseError.svelte";
+	import Select from "svelte-select";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import { tick } from "svelte";
+	$: delete_triggered = false;
+	$: address_valid_or_none =
+		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
+		editable.address_checked === false;
+	$: save_enabled = data_changed && address_valid_or_none;
+	let original = "";
+	let original_object = {};
+	let contacts = [];
+	let valueCopy = null;
+	let areaDom;
+	let copied = false;
+	export let params;
+	$: editable = {};
+	$: contact = {};
+	$: data_loaded = false;
+	$: data_changed = !(JSON.stringify(editable) === original);
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
+	$: sponsoring_contracts_show = true;
+	$: cards_show = true;
+	$: certificates_show = true;
+	$: generate_orgs = [original_object];
+	$: registrationLink = `${config.baseurl_selfservice}/register/${editable.registrationKey}`;
+	const getContactLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+		params.orgid
+	).then((value) => {
+		data_loaded = true;
+		value.address_checked = value.address.address1 !== null;
+		if (value.address_checked === false) {
+			value.address = {
+				address1: "",
+				address2: "",
+				city: "",
+				postalcode: "",
+				country: "",
+			};
+		}
+		editable = Object.assign(editable, value);
+		editable = editable;
+		original_object = Object.assign(editable, value);
+		original = JSON.stringify(value);
+		GroupContactService.groupContactControllerGetAll().then((val) => {
+			contacts = val.map((r) => {
+				return { label: getContactLabel(r), value: r };
+			});
+			if (editable.contact) {
+				contact = contacts.find((g) => g.value.id == editable.contact.id);
+			} else {
+				contact = null;
+			}
+		});
+	});
+	let modal_open = false;
+	let delete_org = {};
+	function deleteOrganization() {
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
+			original_object.id,
+			false
+		)
+			.then((resp) => {
+				toast($_("organization-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_org = original_object;
+			});
+	}
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-organization"));
+			let postdata = Object.assign({}, editable);
+			if (postdata.address_checked === false) {
+				postdata.address = null;
+			}
+			postdata.contact = postdata.contact?.id;
+			RunnerOrganizationService.runnerOrganizationControllerPut(
+				original_object.id,
+				postdata
+			)
+				.then((resp) => {
+					editable.registrationKey = resp.registrationKey;
+					original_object = Object.assign({}, editable);
+					original = JSON.stringify(original_object);
+					toast.success($_("updated-organization"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	async function copy() {
+		if (!editable.registrationKey) {
+			toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
+			return;
+		}
+		valueCopy = registrationLink;
+		await tick();
+		areaDom.focus();
+		areaDom.select();
+		try {
+			const successful = document.execCommand("copy");
+			if (!successful) {
+				throw new Error();
+			}
+			toast($_("copied-link-to-clipboard"));
+			copied = true;
+		} catch (err) {
+			toast.error($_("error-whyile-copying-to-clipboard"));
+		}
+		// we can notifi by event or storage about copy status
+		valueCopy = null;
+	}
+	export let import_modal_open = false;
 </script>
 
 {#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
 <ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  current_runners={[]}
-  passed_team={{}}
-  passed_orgs={[]}
-  passed_org={editable}
-  opened_from="OrgDetail"
-  bind:import_modal_open
+	on:cancelDelete={(event) => {
+		import_modal_open = false;
+	}}
+	current_runners={[]}
+	passed_team={{}}
+	passed_orgs={[]}
+	passed_org={editable}
+	opened_from="OrgDetail"
+	bind:import_modal_open
 />
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_object.name}
-      <span data-id="org_actions_${editable.id}">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_orgs
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-          >
-            {$_("import-runners")}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteOrganization}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-delete")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-organization")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">{$_("home")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("organizations")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Org-Details #{params.orgid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("name")}
-        type="text"
-        bind:value={editable.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="contact" class="font-medium text-gray-700"
-        >{$_("contact")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
-        items={contacts}
-        showChevron={true}
-        placeholder={$_("no-contact-selected")}
-        noOptionsMessage={$_("no-contact-found")}
-        bind:selectedValue={contact}
-        on:select={(selectedValue) =>
-          (editable.contact = selectedValue.detail.value)}
-        on:clear={() => (editable.contact = null)}
-      />
-    </div>
-    <div>
-      <div class="flex items-start mt-2">
-        <div class="flex items-center h-5">
-          <input
-            bind:checked={editable.registrationEnabled}
-            id="toggle_selfservice_feature"
-            name="toggle_selfservice_feature"
-            type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          />
-        </div>
-        <div class="ml-3 text-sm">
-          <label
-            for="toggle_selfservice_feature"
-            class="font-medium text-gray-700"
-            >{$_("selfservice-registration")}</label
-          >
-        </div>
-      </div>
-      <div>
-        {#if editable.registrationEnabled}
-          <div class="text-sm w-full">
-            <button on:click={copy} class="inline-flex w-full">
-              <p
-                name="token"
-                class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
-              >
-                {#if editable.registrationKey}
-                  {registrationLink}
-                {:else}
-                  {$_("you-have-to-save-your-changes-to-generate-a-link")}
-                {/if}
-              </p>
-              <div
-                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  height="24"
-                  ><path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
-                  /></svg
-                >
-              </div>
-            </button>
-            {#if editable.registrationKey}
-              <p class="text-gray-500 text-xs">
-                {$_("click-to-copy-the-link-into-your-clipboard")}
-              </p>
-            {/if}
-          </div>
-        {/if}
-        <!--  -->
-        <div>
-          <div class="flex items-start mt-2">
-            <div class="flex items-center h-5">
-              <input
-                bind:checked={editable.address_checked}
-                id="toggle_address_checkbox"
-                name="toggle_address_checkbox"
-                type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-              />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="toggle_address_checkbox"
-                class="font-medium text-gray-700">{$_("address")}</label
-              >
-            </div>
-          </div>
-        </div>
-        {#if editable.address_checked === true}
-          <div class="col-span-6">
-            <label
-              for="address1"
-              class="block text-sm font-medium text-gray-700"
-              >{$_("address")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder="Address"
-              class:border-red-500={!isAddress1Valid}
-              class:focus:border-red-500={!isAddress1Valid}
-              class:focus:ring-red-500={!isAddress1Valid}
-              bind:value={editable.address.address1}
-              type="text"
-              name="address1"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-            />
-            {#if !isAddress1Valid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("address-is-required")}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label
-              for="address2"
-              class="block text-sm font-medium text-gray-700"
-              >{$_("apartment-suite-etc")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("apartment-suite-etc")}
-              bind:value={editable.address.address2}
-              type="text"
-              name="address2"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-            />
-          </div>
-          <div class="col-span-6">
-            <label for="zipcode" class="block text-sm font-medium text-gray-700"
-              >{$_("zip-postal-code")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("zip-postal-code")}
-              class:border-red-500={!iszipcodevalid}
-              class:focus:border-red-500={!iszipcodevalid}
-              class:focus:ring-red-500={!iszipcodevalid}
-              bind:value={editable.address.postalcode}
-              type="text"
-              name="zipcode"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-            />
-            {#if !iszipcodevalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("valid-zipcode-postal-code-is-required")}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label for="city" class="block text-sm font-medium text-gray-700"
-              >{$_("city")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("city")}
-              class:border-red-500={!iscityvalid}
-              class:focus:border-red-500={!iscityvalid}
-              class:focus:ring-red-500={!iscityvalid}
-              bind:value={editable.address.city}
-              type="text"
-              name="city"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-            />
-            {#if !iscityvalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("valid-city-is-required")}
-              </span>
-            {/if}
-          </div>
-        {/if}
-        <div class="text-sm w-full">
-          <span class="font-medium text-gray-700">{$_("distance")}</span>
-          <br />
-          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
-        </div>
-      </div>
-    </div>
-  </section>
+	<section class="container p-5">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="mr-2 flex items-center">
+							<svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+								<polyline points="9 22 9 12 15 12 15 22" /></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<a class="mr-2" href="/">{$_("home")}</a><svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 mr-2 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" /></svg
+							>
+						</li>
+						<li class="mr-2 flex items-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								width="24"
+								height="24"
+								><path fill="none" d="M0 0h24v24H0z" />
+								<path
+									d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
+								/></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<a class="mr-2" href="./">{$_("organizations")}</a><svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 mr-2 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" /></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<span class="mr-2">Org-Details #{params.orgid}</span>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-8 text-3xl font-extrabold leading-tight">
+			{original_object.name}
+			<span data-id="org_actions_${editable.id}">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+					<button
+						on:click={() => {
+							import_modal_open = true;
+						}}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+					>
+						{$_("import-runners")}
+					</button>
+				{/if}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteOrganization}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-delete")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-organization")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						on:click={submit}
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</span>
+		</div>
+		<div class="text-sm w-full">
+			<label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+			<input
+				autocomplete="off"
+				placeholder={$_("name")}
+				type="text"
+				bind:value={editable.name}
+				name="name"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full">
+			<label for="contact" class="font-medium text-gray-700"
+				>{$_("contact")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
+				items={contacts}
+				showChevron={true}
+				placeholder={$_("no-contact-selected")}
+				noOptionsMessage={$_("no-contact-found")}
+				bind:selectedValue={contact}
+				on:select={(selectedValue) =>
+					(editable.contact = selectedValue.detail.value)}
+				on:clear={() => (editable.contact = null)}
+			/>
+		</div>
+		<div>
+			<div class="flex items-start mt-2">
+				<div class="flex items-center h-5">
+					<input
+						bind:checked={editable.registrationEnabled}
+						id="toggle_selfservice_feature"
+						name="toggle_selfservice_feature"
+						type="checkbox"
+						class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					/>
+				</div>
+				<div class="ml-3 text-sm">
+					<label
+						for="toggle_selfservice_feature"
+						class="font-medium text-gray-700"
+						>{$_("selfservice-registration")}</label
+					>
+				</div>
+			</div>
+			<div>
+				{#if editable.registrationEnabled}
+					<div class="text-sm w-full">
+						<button on:click={copy} class="inline-flex w-full">
+							<p
+								name="token"
+								class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+							>
+								{#if editable.registrationKey}
+									{registrationLink}
+								{:else}
+									{$_("you-have-to-save-your-changes-to-generate-a-link")}
+								{/if}
+							</p>
+							<div
+								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									width="24"
+									height="24"
+									><path fill="none" d="M0 0h24v24H0z" />
+									<path
+										fill="currentColor"
+										d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
+									/></svg
+								>
+							</div>
+						</button>
+						{#if editable.registrationKey}
+							<p class="text-gray-500 text-xs">
+								{$_("click-to-copy-the-link-into-your-clipboard")}
+							</p>
+						{/if}
+					</div>
+				{/if}
+				<!--  -->
+				<div>
+					<div class="flex items-start mt-2">
+						<div class="flex items-center h-5">
+							<input
+								bind:checked={editable.address_checked}
+								id="toggle_address_checkbox"
+								name="toggle_address_checkbox"
+								type="checkbox"
+								class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+							/>
+						</div>
+						<div class="ml-3 text-sm">
+							<label
+								for="toggle_address_checkbox"
+								class="font-medium text-gray-700">{$_("address")}</label
+							>
+						</div>
+					</div>
+				</div>
+				{#if editable.address_checked === true}
+					<div class="col-span-6">
+						<label
+							for="address1"
+							class="block text-sm font-medium text-gray-700"
+							>{$_("address")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder="Address"
+							class:border-red-500={!isAddress1Valid}
+							class:focus:border-red-500={!isAddress1Valid}
+							class:focus:ring-red-500={!isAddress1Valid}
+							bind:value={editable.address.address1}
+							type="text"
+							name="address1"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !isAddress1Valid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("address-is-required")}
+							</span>
+						{/if}
+					</div>
+					<div class="col-span-6">
+						<label
+							for="address2"
+							class="block text-sm font-medium text-gray-700"
+							>{$_("apartment-suite-etc")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("apartment-suite-etc")}
+							bind:value={editable.address.address2}
+							type="text"
+							name="address2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+					</div>
+					<div class="col-span-6">
+						<label for="zipcode" class="block text-sm font-medium text-gray-700"
+							>{$_("zip-postal-code")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("zip-postal-code")}
+							class:border-red-500={!iszipcodevalid}
+							class:focus:border-red-500={!iszipcodevalid}
+							class:focus:ring-red-500={!iszipcodevalid}
+							bind:value={editable.address.postalcode}
+							type="text"
+							name="zipcode"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !iszipcodevalid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("valid-zipcode-postal-code-is-required")}
+							</span>
+						{/if}
+					</div>
+					<div class="col-span-6">
+						<label for="city" class="block text-sm font-medium text-gray-700"
+							>{$_("city")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("city")}
+							class:border-red-500={!iscityvalid}
+							class:focus:border-red-500={!iscityvalid}
+							class:focus:ring-red-500={!iscityvalid}
+							bind:value={editable.address.city}
+							type="text"
+							name="city"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !iscityvalid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("valid-city-is-required")}
+							</span>
+						{/if}
+					</div>
+				{/if}
+				<div class="text-sm w-full">
+					<span class="font-medium text-gray-700">{$_("distance")}</span>
+					<br />
+					<span class="text-gray-700"
+						>{(original_object.total_distance / 1000).toFixed(2)} km</span
+					>
+				</div>
+			</div>
+		</div>
+	</section>
 {:else}
-  {#await promise}
-    {$_("organization-detail-is-being-loaded")}
-  {:catch error}
-    <PromiseError />
-  {/await}
+	{#await promise}
+		{$_("organization-detail-is-being-loaded")}
+	{:catch error}
+		<PromiseError />
+	{/await}
 {/if}
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 44fa5d92..854a6429 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -159,7 +159,6 @@
 						bind:generate_runners
 					/>
 					<div>
-						<p class="text-base">Aktionen</p>
 						{#if delete_triggered}
 							<button
 								on:click={deleteRunner}
diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index 6302bab6..e1148d68 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -1,308 +1,311 @@
 <script>
-  import {
-    GroupContactService,
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import toast from 'svelte-french-toast'
+	import {
+		GroupContactService,
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import toast from "svelte-french-toast";
 
-  import store from "../../store";
-  import Select from "svelte-select";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-  import Teams from "./Teams.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
-    {},
-    {},
-    {},
-    [],
-    [],
-    false,
-  ];
-  export let params;
-  export let import_modal_open = false;
-  $: delete_triggered = false;
-  $: save_enabled = data_changed && teamdata.parentGroup != null;
-  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_teams = [original];
-  $: group = {};
-  $: contact = {};
-  //
-  const getContactLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const promise = RunnerTeamService.runnerTeamControllerGetOne(
-    params.teamid
-  ).then((value) => {
-    data_loaded = true;
-    teamdata = Object.assign(teamdata, value);
-    original = Object.assign(original, value);
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val.map((r) => {
-          delete r.contact;
-          r.teams = [];
-          return { label: r.name, value: r };
-        });
-        group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
-      }
-    );
-    GroupContactService.groupContactControllerGetAll().then((val) => {
-      contacts = val.map((r) => {
-        return { label: getContactLabel(r), value: r };
-      });
-      if (teamdata.contact) {
-        contact = contacts.find((g) => g.value.id == teamdata.contact.id);
-      } else {
-        contact = null;
-      }
-    });
-  });
-  function deleteTeam() {
-    RunnerTeamService.runnerTeamControllerRemove(original.id, false)
-      .then((resp) => {
-        toast($_("team-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_team = original;
-      });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-team"));
-      let postdata = teamdata;
-      postdata.parentGroup = teamdata.parentGroup.id;
-      postdata.contact = teamdata.contact?.id;
-      RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
-        .then((resp) => {
-          Object.assign(original, teamdata);
-          original = original;
-          toast.success($_("updated-team"));
-        })
-        .catch((err) => {});
-    }
-  }
+	import store from "../../store";
+	import Select from "svelte-select";
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import PromiseError from "../base/PromiseError.svelte";
+	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import Teams from "./Teams.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
+		{},
+		{},
+		{},
+		[],
+		[],
+		false,
+	];
+	export let params;
+	export let import_modal_open = false;
+	$: delete_triggered = false;
+	$: save_enabled = data_changed && teamdata.parentGroup != null;
+	$: data_loaded = false;
+	$: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
+	$: sponsoring_contracts_show = true;
+	$: cards_show = true;
+	$: certificates_show = true;
+	$: generate_teams = [original];
+	$: group = {};
+	$: contact = {};
+	//
+	const getContactLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const promise = RunnerTeamService.runnerTeamControllerGetOne(
+		params.teamid
+	).then((value) => {
+		data_loaded = true;
+		teamdata = Object.assign(teamdata, value);
+		original = Object.assign(original, value);
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				orgs = val.map((r) => {
+					delete r.contact;
+					r.teams = [];
+					return { label: r.name, value: r };
+				});
+				group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
+			}
+		);
+		GroupContactService.groupContactControllerGetAll().then((val) => {
+			contacts = val.map((r) => {
+				return { label: getContactLabel(r), value: r };
+			});
+			if (teamdata.contact) {
+				contact = contacts.find((g) => g.value.id == teamdata.contact.id);
+			} else {
+				contact = null;
+			}
+		});
+	});
+	function deleteTeam() {
+		RunnerTeamService.runnerTeamControllerRemove(original.id, false)
+			.then((resp) => {
+				toast($_("team-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_team = original;
+			});
+	}
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-team"));
+			let postdata = teamdata;
+			postdata.parentGroup = teamdata.parentGroup.id;
+			postdata.contact = teamdata.contact?.id;
+			RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
+				.then((resp) => {
+					Object.assign(original, teamdata);
+					original = original;
+					toast.success($_("updated-team"));
+				})
+				.catch((err) => {});
+		}
+	}
 </script>
 
 <ImportRunnerModal
-  current_runners={[]}
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  passed_team={teamdata}
-  passed_orgs={[]}
-  passed_org={{}}
-  opened_from="TeamDetail"
-  bind:import_modal_open
+	current_runners={[]}
+	on:cancelDelete={(event) => {
+		import_modal_open = false;
+	}}
+	passed_team={teamdata}
+	passed_orgs={[]}
+	passed_org={{}}
+	opened_from="TeamDetail"
+	bind:import_modal_open
 />
 <ConfirmTeamDeletion bind:modal_open bind:delete_team />
 {#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original.name}
-      <span data-id="org_actions_${teamdata.id}">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_teams
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_teams />
-        <GenerateRunnerCertificates
-          bind:certificates_show
-          bind:generate_teams
-        />
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-          >
-            {$_("import-runners")}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteTeam}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-delete")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-team")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">Home</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">Teams</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Team-Details #{params.teamid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">Name</label>
-      <input
-        autocomplete="off"
-        placeholder="Name"
-        type="text"
-        bind:value={teamdata.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="contact" class="font-medium text-gray-700"
-        >{$_("contact")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
-        items={contacts}
-        showChevron={true}
-        placeholder={$_("no-contact-selected")}
-        noOptionsMessage={$_("no-contact-found")}
-        bind:selectedValue={contact}
-        on:select={(selectedValue) =>
-          (teamdata.contact = selectedValue.detail.value)}
-        on:clear={() => (teamdata.contact = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="org" class="font-medium text-gray-700"
-        >{$_("organization")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.id.value.toString().startsWith(filterText.toLowerCase())}
-        items={orgs}
-        showChevron={true}
-        placeholder={$_("search-for-an-organization-by-name-or-id")}
-        noOptionsMessage={$_("no-organizations-found")}
-        bind:selectedValue={group}
-        on:select={(selectedValue) =>
-          (teamdata.parentGroup = selectedValue.detail.value)}
-        on:clear={() => (teamdata.parentGroup = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
-      <br />
-      <span class="text-gray-700"
-        >{(original.total_distance / 1000).toFixed(2)} km</span
-      >
-    </div>
-  </section>
+	<section class="container p-5">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="mr-2 flex items-center">
+							<svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+								<polyline points="9 22 9 12 15 12 15 22" /></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<a class="mr-2" href="/">Home</a><svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 mr-2 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" /></svg
+							>
+						</li>
+						<li class="mr-2 flex items-center">
+							<svg
+								class="flex-shrink-0 w-5 h-5 mr-2"
+								fill="currentColor"
+								width="24"
+								height="24"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									fill="currentColor"
+									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+								/></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<a class="mr-2" href="./">Teams</a><svg
+								stroke="currentColor"
+								fill="none"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-3 w-3 mr-2 stroke-current"
+								height="1em"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								><line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" /></svg
+							>
+						</li>
+						<li class="flex items-center">
+							<span class="mr-2">Team-Details #{params.teamid}</span>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-8 text-3xl font-extrabold leading-tight">
+			{#if group}
+				{group.label}{" > "}
+			{/if}
+			{original.name}
+			<span data-id="org_actions_${teamdata.id}">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_teams
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_teams />
+				<GenerateRunnerCertificates
+					bind:certificates_show
+					bind:generate_teams
+				/>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+					<button
+						on:click={() => {
+							import_modal_open = true;
+						}}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+					>
+						{$_("import-runners")}
+					</button>
+				{/if}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteTeam}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-delete")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-team")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						on:click={submit}
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</span>
+		</div>
+		<div class="text-sm w-full">
+			<label for="name" class="font-medium text-gray-700">Name</label>
+			<input
+				autocomplete="off"
+				placeholder="Name"
+				type="text"
+				bind:value={teamdata.name}
+				name="name"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full">
+			<label for="contact" class="font-medium text-gray-700"
+				>{$_("contact")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
+				items={contacts}
+				showChevron={true}
+				placeholder={$_("no-contact-selected")}
+				noOptionsMessage={$_("no-contact-found")}
+				bind:selectedValue={contact}
+				on:select={(selectedValue) =>
+					(teamdata.contact = selectedValue.detail.value)}
+				on:clear={() => (teamdata.contact = null)}
+			/>
+		</div>
+		<div class="text-sm w-full">
+			<label for="org" class="font-medium text-gray-700"
+				>{$_("organization")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.id.value.toString().startsWith(filterText.toLowerCase())}
+				items={orgs}
+				showChevron={true}
+				placeholder={$_("search-for-an-organization-by-name-or-id")}
+				noOptionsMessage={$_("no-organizations-found")}
+				bind:selectedValue={group}
+				on:select={(selectedValue) =>
+					(teamdata.parentGroup = selectedValue.detail.value)}
+				on:clear={() => (teamdata.parentGroup = null)}
+			/>
+		</div>
+		<div class="text-sm w-full">
+			<span class="font-medium text-gray-700">{$_("distance")}</span>
+			<br />
+			<span class="text-gray-700"
+				>{(original.total_distance / 1000).toFixed(2)} km</span
+			>
+		</div>
+	</section>
 {:else}
-  {#await promise}
-    {$_("team-detail-is-being-loaded")}
-  {:catch error}
-    <PromiseError />
-  {/await}
+	{#await promise}
+		{$_("team-detail-is-being-loaded")}
+	{:catch error}
+		<PromiseError />
+	{/await}
 {/if}