<div class="container">
  <p-card header="Port Knocker (Минимальный UI)">
    <form [formGroup]="form" (ngSubmit)="execute()" class="p-fluid">
      <div class="grid">
        <div class="col-12">
          <label>Targets</label>
          <input
            pInputText
            type="text"
            formControlName="targets"
            placeholder="tcp:host:port;udp:host:port"
            class="w-full"
          />
        </div>

        <div class="col-12 md:col-6">
          <label>Delay</label>
          <input
            pInputText
            type="text"
            formControlName="delay"
            placeholder="1s"
            class="w-full"
          />
        </div>

        <div class="col-12 md:col-6 flex align-items-center gap-2">
          <p-checkbox formControlName="waitConnection" [binary]="true"></p-checkbox>
          <label class="checkbox-label">Wait connection</label>
        </div>

        <div class="col-12">
          <button
            pButton
            type="submit"
            label="Execute"
            class="w-full"
            [loading]="executing"
            [disabled]="executing || form.invalid"
          ></button>
        </div>
      </div>
    </form>

    <p-divider></p-divider>

    <div class="grid">
      <div class="col-12">
        <p-progressBar
          [value]="executing ? 100 : 0"
          [mode]="executing ? 'indeterminate' : 'determinate'"
        ></p-progressBar>
        <div class="mt-2 text-600" *ngIf="executing">
          Elapsed: {{ elapsedMs / 1000 | number : '1.1-1' }}s
        </div>
        <div class="mt-2 text-600" *ngIf="!executing && result">
          {{ result }}
        </div>
        <div class="mt-2 text-red-600" *ngIf="!executing && error">
          {{ error }}
        </div>
      </div>
    </div>
  </p-card>
</div>
