large update wip

src/app/components/application/application.component.html

@@ -0,0 +1,150 @@
+<div class="container application">
+  <header class="header">
+    <button mat-button type="button" (click)="goBack()" class="back-button">
+      <mat-icon>arrow_back</mat-icon>
+      Go Back
+    </button>
+    <h2>🛰 Application Details</h2>
+  </header>
+
+  @if (isApplicationDetailsLoading) {
+    <div class="loading-container">
+      <mat-spinner diameter="50"></mat-spinner>
+      <p class="loading-text">Loading application details...</p>
+    </div>
+  } @else if (hasApplicationData) {
+    <div class="content-wrapper">
+
+      <!-- Navigation -->
+      <div class="navigation-controls">
+        <button 
+          mat-icon-button 
+          [disabled]="!canGoToPrevious()" 
+          (click)="goToPrevious()" 
+          class="nav-button"
+          title="Previous Application"
+        >
+          <mat-icon>chevron_left</mat-icon>
+        </button>
+
+        <span class="navigation-info">
+          {{ currentIndex() + 1 }} of {{ applicationList().length }}
+        </span>
+
+        <button 
+          mat-icon-button 
+          [disabled]="!canGoToNext()" 
+          (click)="goToNext()" 
+          class="nav-button"
+          title="Next Application"
+        >
+          <mat-icon>chevron_right</mat-icon>
+        </button>
+      </div>
+
+      <!-- Application Card -->
+      <div class="application-card">
+
+        <!-- Profile Section -->
+        <div class="profile-section">
+          @if (currentApplication().profileImage) {
+            <div class="profile-image-container">
+              <img
+                [src]="environment.hostUrl + '/uploads/' + currentApplication().profileImage"
+                [alt]="currentApplication().fullName"
+                class="profile-image"
+              />
+            </div>
+          }
+
+          <div class="profile-info">
+            <h3 class="candidate-name">{{ currentApplication().fullName }}</h3>
+            <div class="basic-info">
+              <div class="info-item">
+                <mat-icon>person</mat-icon>
+                <span>{{ currentApplication().age }} years old</span>
+              </div>
+              <div class="info-item">
+                <mat-icon>location_on</mat-icon>
+                <span>{{ currentApplication().cityOrRegion }}</span>
+              </div>
+              @if (currentApplication().email) {
+                <div class="info-item">
+                  <mat-icon>email</mat-icon>
+                  <span>{{ currentApplication().email }}</span>
+                </div>
+              }
+              @if (currentApplication().phoneNumber) {
+                <div class="info-item">
+                  <mat-icon>phone</mat-icon>
+                  <span>{{ currentApplication().phoneNumber }}</span>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <!-- Application Details -->
+        <div class="details-grid">
+          @if (getHobbiesArray().length > 0) {
+            <div class="detail-section">
+              <h4><mat-icon>favorite</mat-icon> Hobbies</h4>
+              <div class="hobbies-container">
+                @for (hobby of getHobbiesArray(); track hobby) {
+                  <mat-chip class="hobby-chip">{{ hobby }}</mat-chip>
+                }
+              </div>
+            </div>
+          }
+
+          @if (currentApplication().justification) {
+            <div class="detail-section full-width">
+              <h4><mat-icon>rocket_launch</mat-icon> Journey Justification?</h4>
+              <p class="detail-content">{{ currentApplication().justification }}</p>
+            </div>
+          }
+
+          @if (currentApplication().createdAt) {
+            <div class="detail-section">
+              <h4><mat-icon>calendar_today</mat-icon> Application Date</h4>
+              <p class="detail-content">
+                {{ formatDate(currentApplication().createdAt) }}
+              </p>
+            </div>
+          }
+        </div>
+
+        <!-- Edit Button or Info -->
+        <div class="edit-controls">
+          @if (canEdit()) {
+            <button
+              mat-raised-button
+              (click)="editApplication()"
+              class="edit-button"
+            >
+              <mat-icon>edit</mat-icon>
+              Edit Application
+            </button>
+          } @else {
+            <p class="edit-info">You can edit your application only during 3 days</p>
+          }
+        </div>
+
+        <!-- Raw JSON Data -->
+        <details class="raw-data-section">
+          <summary>View Raw Data</summary>
+          <pre class="raw-data">{{ currentApplication() | json }}</pre>
+        </details>
+      </div>
+    </div>
+  } @else {
+    <div class="no-data">
+      <mat-icon class="no-data-icon">inbox</mat-icon>
+      <p>No application data available</p>
+      <button mat-button (click)="goBack()" class="back-button">
+        <mat-icon>arrow_back</mat-icon>
+        Return to List
+      </button>
+    </div>
+  }
+</div>