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

<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>