<div class="ui-g" *ngIf="probeHost">
  <div>
    <label>IP Version</label>
  </div>
  <div class="ui-g-12 ui-bottom-space-20">
    <div class="ui-g-6 ui-g-nopad">
      <p-radioButton name="group1" value="v4" label="IPv4" [(ngModel)]="ipVer"></p-radioButton>
    </div>
    <div class="ui-g-6 ui-g-nopad">
      <p-radioButton [disabled]="!SUPPORT_V6" name="group1" value="v6" label="IPv6" [(ngModel)]="ipVer"></p-radioButton>
    </div>
  </div>

  <div *ngIf="ipVer === 'v4' else V6" class="ui-g-12">
    <div>
      <div>
        <p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
      </div>
      <label>Range</label>
    </div>
    <div class="ui-g-12">
      <of-ip-input [hostIp]="startIP" (inputIp)="onInputIP($event, 0)" [title]="'From'" [fixed]="fixedIPrange"></of-ip-input>
    </div>
    <div class="ui-g-12">
      <of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'" [fixed]="fixedIPrange"></of-ip-input>
    </div>
    <div class="ui-g-12">
      <p-multiSelect (onFocus)="onIPExcludeFocus()" [options]="ipArray" optionLabel="ip" [(ngModel)]="excludeIPs" [panelStyle]="{minWidth:'12em'}"
        selectedItemsLabel="{0} hosts are excluded." maxSelectedLabels="2" defaultLabel="Add exclude IP"></p-multiSelect>
    </div>
    <div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
      {{ipErrMsg}}
    </div>
  </div>

  <ng-template #V6>
    <!-- TODO -->
  </ng-template>

  <div class="ui-g-12">
    <div>
      <p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
    </div>
  </div>
  <div class="ui-g-12 ui-bottom-space-20">
    <div class="ui-g-6 ui-g-nopad">
      TCP &nbsp;
      <p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
    </div>
    <div class="ui-g-6 ui-g-nopad">
      UDP &nbsp;
      <p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
    </div>
  </div>

  <div class="ui-g-12">
    <label>Range</label>
  </div>
  <div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
    <div class="ui-g-6">
      <input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
        (keyup)="onInputPort(startPort.value, 0)">
    </div>
    <div class="ui-g-6">
      <input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
        (keyup)="onInputPort(endPort.value, 1)">
    </div>
    <div class="ui-g-12 ui-g-nopad" style="margin-left: 0.5em">
        <a style="cursor: pointer" (click)="portExcludeDisplay = true">
          <span *ngIf="excludePorts.length === 0">Add Exclude Ports</span>
          <span *ngIf="excludePorts.length > 0">{{excludePorts.length}} ports are excluded.</span>
        </a>
      </div>
  </div>

  <div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
    {{portErrMsg}}
  </div>

  <div class="ui-g-12">
    <div>
      <p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)"
        binary="true"></p-checkbox>
    </div>
  </div>

  <div class="ui-g-12 ui-g-nopad">
    <of-service-selector [disabled]="!serviceChecked" (change)="includeServices = $event"></of-service-selector>
  </div>

  <div class="ui-g-12" dir="rtl">
    <button type="submit" [disabled]="!validation" label="Discovery Start" pButton class="ui-button-width-fit" (click)="onRequestDiscovery()"></button>
  </div>
</div>

<p-dialog [(visible)]="portExcludeDisplay" [modal]="true" [responsive]="true" [width]="400">
  <p-header>
    Add Ports to exclude.
  </p-header>
  <p-chips [(ngModel)]="portChips" [addOnTab]="true" [allowDuplicate]="false" (onAdd)="onAddExcludePort($event)" (onRemove)="onRemoveExcludePort($event)"
    [max]="20" placeholder="e.g. 1025~65535"></p-chips>
  <p-footer>
    <button type="button" pButton icon="fa-check" (click)="portExcludeDisplay=false" label="Done"></button>
  </p-footer>
</p-dialog>