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

<div class="card-div">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Particle Properties</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Particle Name</mat-label>
          <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Display Name</mat-label>
          <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Particle Type</mat-label>
          <mat-select [(ngModel)]="particleData.particle_type">
            @for (type of particleTypes; track type) {
              <mat-option [value]="type">{{ type }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Lore</mat-label>
          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Display Item</mat-label>
          <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Permission</mat-label>
          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Package Permission</mat-label>
          <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Frame Delay</mat-label>
          <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Repeat</mat-label>
          <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline">
          <mat-label>Repeat Delay</mat-label>
          <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
            placeholder="Enter repeat delay">
          </mat-form-field>
        </div>

        <div class="form-row">
          <mat-form-field appearance="outline">
            <mat-label>Random Offset</mat-label>
            <input matInput type="number" [(ngModel)]="particleData.random_offset"
              placeholder="Enter random offset">
            </mat-form-field>
          </div>

          <div class="form-row">
            <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
          </div>
        </mat-card-content>
      </mat-card>
    </div>