1  <script lang="ts">
 2    import type { Application } from '$lib/utils/rpgf/types/application';
 3    import RpgfApplicationDetailsCard from '../rpgf-application-details-card/rpgf-application-details-card.svelte';
 4    import TitleAndValue from '../title-and-value/title-and-value.svelte';
 5  
 6    interface Props {
 7      application: Application;
 8    }
 9  
10    let { application }: Props = $props();
11  </script>
12  
13  {#each application.customDatasetValues as dataset}
14    <RpgfApplicationDetailsCard title={dataset.datasetName} key="custom-dataset-{dataset.datasetId}">
15      <div class="fields" style:display="flex" style="flex-direction: column" style:gap="1rem">
16        {#each Object.entries(dataset.values) as [fieldName, value]}
17          <TitleAndValue title={fieldName}>
18            {#if value}
19              {value ?? '—'}
20            {:else}
21              <span style:color="var(--color-foreground-level-5">Unknown</span>
22            {/if}
23          </TitleAndValue>
24        {/each}
25      </div>
26    </RpgfApplicationDetailsCard>
27  {/each}