Add dynamic filtering

client/src/pages/learningPath/learningPathPage/LearningPathPage.vue

@@ -12,6 +12,7 @@ import {
   useCourseDataWithCompletion,
   useCurrentCourseSession,
 } from "@/composables";
+import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -65,17 +66,26 @@ const changeViewType = (viewType: ViewType) => {
         ></CircleProgress>
       </div>
 
+      <div v-if="!useMobileLayout && false" class="flex-grow">
+        <CourseSessionDueDatesList
+          :course-session-id="courseSession.id"
+          :max-count="2"
+        ></CourseSessionDueDatesList>
+      </div>
       <!-- Right -->
       <div v-if="!useMobileLayout" class="flex-grow">
-        <p>Zulassungsprofil</p>
-        <div>
-          <button class="btn-primary" @click="filter = 'nonlife'">Nichtleben</button>
-          <button class="btn-secondary" @click="filter = 'life'">Leben</button>
-          <button class="btn-secondary" @click="filter = 'sick'">
-            Krankenzusatzversicherung
+        <h5 class="mb-4">Zulassungsprofil:</h5>
+        <div class="mb-4 flex gap-4">
+          <button
+            v-for="profile in course?.profiles"
+            :key="profile"
+            :class="filter == profile || !filter ? 'tag-active' : 'tag-inactive'"
+            @click="filter = profile"
+          >
+            {{ profile }}
           </button>
         </div>
-        <p><a href="#" @click="filter = ''">Alle anzeigen (Allbranche)</a></p>
+        <a class="link" @click="filter = ''">Alle anzeigen (Allbranche)</a>
       </div>
     </div>