Switch to translatable data

app/components/admin/Answer.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { getFlagEmoji } from '#shared/utils/flag';
 import { fullDate } from '~~/server/utils/date';
 
-const { d, t } = useI18n();
+const { d, t, locale } = useI18n();
+const { tKey } = useI18nKey();
+
 const props = defineProps<{
   answer: {
     id: number;
@@ -9,6 +12,7 @@ const props = defineProps<{
     updatedAt: string;
     team: { id: number; name: string };
     final: boolean;
+    lang: string;
     review: {
       internalNote: string | null;
       rankingValue: number | null;
@@ -25,12 +29,14 @@ const props = defineProps<{
     } | null;
   };
   quest: {
-    title: string;
+    title_de: string;
+    title_en: string;
     pictureRequired: boolean;
     textRequired: boolean;
     points: number;
     extraPoints: number | null;
-    extraText: string | null;
+    extraText_de: string | null;
+    extraText_en: string | null;
     textSolution: string | null;
   };
 }>();
@@ -139,7 +145,7 @@ async function submit() {
         <ClickableImage
           v-if="answer.picture?.url"
           :src="answer.picture.url"
-          :title="`${quest.title}  –  ${answer.team.name}`"
+          :title="`${tKey(quest, 'title')}  –  ${answer.team.name}`"
           class="h-48"
         />
         <h3 v-if="quest.textSolution">Solution:</h3>
@@ -172,6 +178,17 @@ async function submit() {
             messages="Special showcase at the end, before the final leaderboard"
           />
         </div>
+        <p
+          v-if="answer.lang"
+          :class="answer.lang !== locale ? 'py-2 text-xl text-red-500' : ''"
+        >
+          Users language is {{ t(`locales.${answer.lang}`) }}
+          {{
+            getFlagEmoji(
+              answer.lang.toLowerCase() === 'en' ? 'GB' : answer.lang
+            )
+          }}
+        </p>
         <VaTextarea
           v-model="formData.cloned.value.review"
           label="Review"