From 6fc983d47e847d87e2cb72b3e36906efba3fd44a Mon Sep 17 00:00:00 2001
From: Laurens Weijs <laurens.weijs@rijksoverheid.nl>
Date: Thu, 7 Nov 2024 15:18:39 +0100
Subject: [PATCH] Add Help Wanted uitklappertje

---
 frontend/src/components/HelpWanted.vue | 23 +++++++++++++++++++++++
 frontend/src/components/Question.vue   |  2 ++
 2 files changed, 25 insertions(+)
 create mode 100644 frontend/src/components/HelpWanted.vue

diff --git a/frontend/src/components/HelpWanted.vue b/frontend/src/components/HelpWanted.vue
new file mode 100644
index 00000000..409e04e5
--- /dev/null
+++ b/frontend/src/components/HelpWanted.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <details class="rvo-expandable-text">
+      <summary class="rvo-expandable-text__summary">
+    <span
+      class="utrecht-icon rvo-icon rvo-icon-info rvo-icon--md rvo-icon--hemelblauw"
+      role="img"
+      aria-label="Info"
+    ></span>
+        Hulp nodig?
+      </summary>
+      <div class="rvo-expandable-text__details"
+           style="width: 55%">Je hebt aangegeven dat je hulp nodig hebt.
+        Voor advies kun je een e-mail sturen naar
+        <a class="rvo-link" href="mailto:ai-verordening@minbzk.nl">
+          ai-verordening@minbzk.nl
+        </a> of op de pleio-omgeving <a class="rvo-link" target="_blank" href="https://algoritmes.pleio.nl">
+          https://algoritmes.pleio.nl</a></div>
+    </details>
+  </div>
+</template>
+<script setup lang="ts">
+</script>
diff --git a/frontend/src/components/Question.vue b/frontend/src/components/Question.vue
index f7d56922..6aac31a6 100644
--- a/frontend/src/components/Question.vue
+++ b/frontend/src/components/Question.vue
@@ -3,6 +3,7 @@ import BetaversionLabel from '@/components/betaversion-label.vue'
 import Sources from '@/components/Sources.vue'
 import { Answer } from '@/models/DecisionTree'
 import SubResult from '@/components/SubResult.vue'
+import HelpWanted from '@/components/HelpWanted.vue'
 
 interface Props {
   id: string
@@ -34,6 +35,7 @@ defineEmits(['answered', 'back'])
           <span v-html="question"></span>
           <slot />
         </p>
+        <HelpWanted style="margin-top: -2%; margin-bottom: 5%"/>
       </div>
 
       <!-- Answers section -->