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

<div class="card-div">
  <mat-card>
    <mat-card-header class="frame-header-fullwidth">
      <div class="frame-header-row" mat-card-title>
        <span class="frame-title-text">Frames</span>
        <div>
          <ng-content></ng-content>
          <button mat-icon-button color="warn" (click)="removeFrame(currentFrame)"
                  matTooltip="Delete {{currentFrame}}"
                  [disabled]="frames.length <= 1">
            <mat-icon [class.can-delete]="frames.length > 1" [class.can-not-delete]="frames.length <= 1">
              delete
            </mat-icon>
          </button>
          <button mat-icon-button (click)="addFrame()" matTooltip="Add Frame">
            <mat-icon class="add-button">add</mat-icon>
          </button>
        </div>
      </div>
    </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>
            </mat-tab>
          }
        </mat-tab-group>
      </div>
    </mat-card-content>
  </mat-card>
</div>