header tabs in results

sae-csc/src/app/pages/main/main.ts

@@ -26,6 +26,7 @@ export class Main {
 
   constructor(private store: Store<StateInterface>) {
     this.store.select(state => state.app).subscribe(app => {
+      console.log('app', app);
       this.appState = app;
     });
   }

sae-csc/src/app/pages/similar-cases/similar-cases.html

@@ -2,9 +2,8 @@
 
   <header>
     <div class="row">
-      <div class="title-box">
+      <div (click)="displayHeaderTabs = !displayHeaderTabs" class="title-box">
         {{ appState.resumeTitle }}
-
       </div>
       <div class="actions">
         <button class="button">
@@ -16,8 +15,37 @@
         </button>
       </div>
     </div>
+    @if (displayHeaderTabs) {
+      <div class="post-tabs">
+        <div class="tabs">
+
+
+          <div (click)="activeTab = 'summarized'"
+               [ngClass]="{ 'is-active' : activeTab == 'summarized' }"
+               class="tab-item ">
+            Summarized question
+          </div>
+          <div (click)="activeTab = 'original'"
+               [ngClass]="{ 'is-active' : activeTab == 'original' }"
+               class="tab-item">
+            Original question
+          </div>
+        </div>
+        <div class="body">
+          @if (activeTab == 'summarized') {
+            {{ appState.toText }}
+          } @else {
+            <!--          original question-->
+            {{ appState.fromText }}
+
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum dolor fugit illo laboriosam necessitatibus neque placeat quam ullam unde. Accusamus asperiores, aspernatur atque autem commodi, dicta doloremque doloribus enim error et illo ipsam labore laborum libero natus necessitatibus nemo officiis perferendis placeat, quo reprehenderit sapiente sint vitae voluptatem voluptatum?
+          }
+        </div>
+      </div>
+    }
+
     <div class="row filters-row">
-      <!--      <sae-filters-group></sae-filters-group>-->
+      <sae-filters-group></sae-filters-group>
     </div>
   </header>
   <main>

sae-csc/src/app/pages/similar-cases/similar-cases.scss

@@ -42,6 +42,61 @@
     }
   }
 
+  .post-tabs {
+    border-radius: 10px;
+    background: #E3EAF1;
+    padding: 16px;
+
+    .tabs {
+      display: flex;
+      flex-direction: row;
+      justify-content: stretch;
+      align-items: center;
+      gap: 4px;
+
+      div {
+        flex-grow: 1;
+      }
+    }
+
+    .tab-item {
+      color: #49454F;
+      text-align: center;
+      font-size: 14px;
+      font-style: normal;
+      line-height: 24px;
+      font-weight: 600;
+      border-bottom: solid 1px #333;
+      cursor: pointer;
+
+      &:hover {
+        color: white;
+      }
+
+      &.is-active {
+        color: #000;
+
+        border-bottom: solid 3px #000;
+
+        &:hover {
+          color: white;
+        }
+
+
+      }
+    }
+
+    .body {
+      color: #1B1D27;
+      font-family: Barlow;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 22.4px */
+      min-height: 100px;
+    }
+  }
+
   .toggle-ai-suggestion {
     color: #A86CFD;
   }

sae-csc/src/app/pages/similar-cases/similar-cases.ts

@@ -1,18 +1,20 @@
 import {Component} from '@angular/core';
-import {BotTalks} from '../../../../../my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks';
+import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
 import {CaseResult} from './case-result/case-result';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
 import {StateInterface} from '../../redux/reducers';
 import {Store} from '@ngrx/store';
+import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'app-similar-cases',
   imports: [
     BotTalks,
-    // ReactiveFormsModule,
     CaseResult,
     BottomNavigation,
-    // FormsModule
+    FiltersGroup,
+    NgClass,
   ],
   templateUrl: './similar-cases.html',
   styleUrl: './similar-cases.scss'
@@ -22,6 +24,8 @@ export class SimilarCases {
   public displayedTab: 'similar-cases' | 'technical-manual' = 'similar-cases';
 
   public appState: any = {};
+  activeTab: string = "summarized";
+  displayHeaderTabs: boolean = false;
 
   constructor(private store: Store<StateInterface>) {
     this.store.select(state => state.app).subscribe(app => {