<mat-dialog-content>
  <div>
    <mat-form-field>
      <mat-label>Profile Service URL(s) or TPU name</mat-label>
      <input
        matInput
        placeholder="localhost:6009,localhost:6010"
        required
        [(ngModel)]="serviceAddr"
        (ngModelChange)="serviceAddrChanged($event)"
      />
    </mat-form-field>
  </div>

  <div>
    <mat-radio-group
      aria-label="address type"
      i18n-aria-label="Radio buttons to select address type"
      [(ngModel)]="addressType"
      (ngModelChange)="addressTypeChanged($event)"
    >
      Address Type:
      <mat-radio-button value="ip">IP Address</mat-radio-button>
      <mat-radio-button value="tpu">TPU Name</mat-radio-button>
    </mat-radio-group>
  </div>

  <br />

  <div>
    <mat-form-field>
      <mat-label>Profiling duration(ms)</mat-label>
      <input
        matInput
        type="number"
        [(ngModel)]="duration"
      />
    </mat-form-field>
  </div>

  <div>
    <mat-form-field appearance="outline">
      <mat-label>Host Trace (TraceMe) Level</mat-label>
      <mat-select
        matTooltip="{{ hostTracerTooltip }}"
        matTooltipPosition="above"
        [(ngModel)]="hostTracerLevel"
      >
        <mat-option value="0">disable</mat-option>
        <mat-option value="1">critical</mat-option>
        <mat-option value="2">info</mat-option>
        <mat-option value="3">verbose</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div>
    <mat-form-field appearance="outline">
      <mat-label>Device Trace Level</mat-label>
      <mat-select [(ngModel)]="deviceTracerLevel">
        <mat-option value="0">disable</mat-option>
        <mat-option value="1">enable</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div>
    <mat-form-field appearance="outline">
      <mat-label>Python Trace Level</mat-label>
      <mat-select [(ngModel)]="pythonTracerLevel">
        <mat-option value="0">disable</mat-option>
        <mat-option value="1">enable</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div [hidden]="!isTpuName">
    <div>
      <mat-form-field>
        <mat-label>Subset of worker TPUs to profile (optional)</mat-label>
        <input
          matInput
          placeholder="List of IPs, e.g. 10.4.1.2:8466,10.4.1.3:8466"
          [(ngModel)]="workerList"
        />
      </mat-form-field>
    </div>
  </div>

  <div>
    <mat-expansion-panel class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Advanced options
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div>
        <mat-form-field>
          <mat-label>Automatically retry N times when no trace event is collected</mat-label>
          <input
            matInput
            type="number"
            [(ngModel)]="numRetry"
          />
        </mat-form-field>
      </div>

      <div>
        <mat-form-field>
          <mat-label>Delay the start of profiling (milliseconds)</mat-label>
          <input
            matInput
            type="number"
            [(ngModel)]="delay"
          />
        </mat-form-field>
      </div>

      <div>
        Extra Options:
        <div *ngFor="let option of extraOptions; let i = index">
          <mat-form-field>
            <input matInput placeholder="Key" aria-label="Key" [(ngModel)]="option.key" />
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Value" aria-label="Value" [(ngModel)]="option.value" />
          </mat-form-field>
          <button mat-button (click)="removeExtraOption(i)">Remove</button>
        </div>
        <button mat-button (click)="addExtraOption()">Add Option</button>
      </div>
    </mat-expansion-panel>
  </div>
</mat-dialog-content>

<mat-dialog-actions>
  <button mat-raised-button [disabled]="!serviceAddr" (click)="captureProfile()">
    {{ captureButtonLabel | uppercase }}
  </button>
  <button mat-raised-button (click)="close()">
    {{ closeButtonLabel | uppercase }}
  </button>
</mat-dialog-actions>
