add checkbox styling, driverslicence handling and validation

frontend/src/routes/auth/about/[id]/+page.svelte

@@ -20,6 +20,9 @@
   /** @type {App.Locals['user']}*/
   $: user = $page.data.user;
 
+  /** @type {App.Locals['licence_categories']} */
+  $: licence_categories = $page.data.licence_categories;
+
   /** @typedef {{name: string, src: string}} Avatar */
   const avatarFiles = import.meta.glob("$lib/img/Avatar-*.jpeg", {
     eager: true,
@@ -55,6 +58,7 @@
     { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
   ];
   const licenceStatusOptions = [
+    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
     { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
     { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
     { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
@@ -78,6 +82,7 @@
 
   onMount(() => {
     console.dir(user);
+    console.dir(licence_categories);
     avatars = Object.entries(avatarFiles).map(([path, module]) => {
       if (typeof path !== "string") {
         throw new Error("Unexpected non-string path");
@@ -437,6 +442,58 @@
           bind:value={user.drivers_licence.status}
           options={licenceStatusOptions}
         />
+        <InputField
+          name="licence_number"
+          type="text"
+          label={$t("licencce_number")}
+          bind:value={user.drivers_licence.licence_number}
+          placeholder={$t("placeholder.licence_number")}
+          toUpperCase={true}
+        />
+        <InputField
+          name="isued_date"
+          type="date"
+          label={$t("issued_date")}
+          bind:value={user.drivers_licence.issued_date}
+          placeholder={$t("placeholder.issued_date")}
+        />
+        <InputField
+          name="expiration_date"
+          type="date"
+          label={$t("expiration_date")}
+          bind:value={user.drivers_licence.expiration_date}
+          placeholder={$t("placeholder.expiration_date")}
+        />
+        <InputField
+          name="country"
+          label={$t("country")}
+          bind:value={user.drivers_licence.issuing_country}
+          placeholder={$t("placeholder.issuing_country")}
+        />
+        <div class="licence-categories">
+          <h3>{$t("licence_categories")}</h3>
+          <div class="checkbox-grid">
+            {#each licence_categories as category}
+              <div class="checkbox-item">
+                <div class="checkbox-label-container">
+                  <InputField
+                    type="checkbox"
+                    name="licence_categories[]"
+                    value={category.category}
+                    label={category.category}
+                    checked={user.drivers_licence.licence_categories != null &&
+                      user.drivers_licence.licence_categories.some(
+                        (cat) => cat.category === category.category
+                      )}
+                  />
+                </div>
+                <span class="checkbox-description">
+                  {$t(`licenceCategory.${category.category}`)}
+                </span>
+              </div>
+            {/each}
+          </div>
+        </div>
       </div>
       <div
         class="tab-content"
@@ -566,6 +623,54 @@
 {/if}
 
 <style>
+  .licence-categories {
+    margin-bottom: 20px;
+  }
+
+  .checkbox-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 5px;
+  }
+
+  .checkbox-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .checkbox-label-container {
+    flex: 0 0 auto;
+    margin-right: 10px;
+  }
+
+  .checkbox-description {
+    flex: 1;
+    font-size: 14px;
+    color: #9b9b9b;
+    text-align: right;
+    margin-left: 10px;
+  }
+
+  @media (min-width: 768px) {
+    .checkbox-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .checkbox-item {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .checkbox-description {
+      margin-left: 24px;
+      margin-top: 5px;
+      text-align: left;
+    }
+  }
   .subscription-info {
     display: flex;
     flex-wrap: wrap;