AltitudeWeb/frontend/src/app/pages/particles/components/frames/frames.component.html

<div class="card-div">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Frames</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div class="frames-container">
        <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
          (selectedIndexChange)="switchFrame(frames[$event])">
          @for (frameId of frames; track frameId) {
            <mat-tab [label]="frameId">
              <div class="frame-content">
                <h3>Particles in {{ frameId }}</h3>
                <div class="particles-list">
                  @for (particle of particleData.frames[frameId]; track particle; let i = $index) {
                    <div class="particle-item">
                      <span class="particle-item-text">
                        Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
                        , {{ particle.z.toFixed(2) }})
                      </span>
                      <button mat-icon-button (click)="removeParticle(frameId, i)">
                        <mat-icon>delete</mat-icon>
                      </button>
                      <button mat-icon-button (click)="highlightParticle(frameId, i)">
                        <mat-icon>lightbulb</mat-icon>
                      </button>
                    </div>
                  }
                  @if (!particleData.frames[frameId] || particleData.frames[frameId].length === 0) {
                    <div
                      class="no-particles">
                      No particles in this frame. Click on the plane to add particles.
                    </div>
                  }
                </div>
                <div class="frame-actions">
                  <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
                    [disabled]="frames.length <= 1">
                    Remove Frame
                  </button>
                </div>
              </div>
            </mat-tab>
          }
        </mat-tab-group>
        <div class="add-frame">
          <button mat-raised-button color="primary" (click)="addFrame()">
            Add New Frame
          </button>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>