<div *ngIf="viewSpoof" class="action-container shadow">
  <form (ngSubmit)="onSpoofStart()">
    <div class="form-group">
      <label for="targets">arp.spoof.targets
        <small class="text-muted">
          Comma separated list of targets for the arp.spoof module.
        </small>
      </label>
      <input type="text" 
        class="form-control form-control-sm param-input" 
        name="targets" 
        id="targets" 
        placeholder="Current targets of arp.spoof" 
        [(ngModel)]="spoofOpts.targets">
    </div>

    <div class="form-group">
      <label for="targets">arp.spoof.whitelist
        <small class="text-muted">
          Comma separated list of IP addresses, MAC addresses or aliases to skip while spoofing.
        </small>
      </label>
      <input type="text" class="form-control form-control-sm param-input" id="whitelist" name="whitelist" [(ngModel)]="spoofOpts.whitelist">
    </div>

    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="fullDuplex" name="fullDuplex" [(ngModel)]="spoofOpts.fullduplex">
      <label class="form-check-label" for="fullDuplex">
        full-duplex spoofing
        <small class="text-muted">
          If set, both the targets and the gateway will be attacked, otherwise only the targets.
          <strong>If the router has ARP spoofing protections in place this will make the attack fail.</strong>
        </small>
      </label>
    </div>

    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="internal" name="internal" [(ngModel)]="spoofOpts.internal">
      <label class="form-check-label" for="internal">
        spoof local connections
        <small class="text-muted">
          If set, local connections among computers of the network will be spoofed, otherwise only connections going to and coming from the external networks.
        </small>
      </label>
    </div>

    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="ban" name="ban" [(ngModel)]="spoofOpts.ban">
      <label class="form-check-label" for="ban">
        ban mode
        <small class="text-muted">
          If set, packets coming from the targets will not be forwarded and they won't be able to reach the internet.
        </small>
      </label>
    </div>

    <hr/>

    <div class="form-group">
      <button type="submit" class="btn btn-sm btn-warning">
        <ng-container *ngIf="isSpoofing">
          <i class="fas fa-redo-alt"></i>
          Restart arp.spoof
        </ng-container>
        <ng-container *ngIf="!isSpoofing">
          <i class="fas fa-play"></i>
          Start arp.spoof
        </ng-container>
      </button>
      <button type="button" class="btn btn-sm btn-dark" style="margin-left: 5px" (click)="hideSpoofMenu()">
        Cancel
      </button>
    </div>
  </form>
</div>

<div class="table-responsive">
  <table class="table table-dark table-sm">
    <thead>
      <tr>
        <th width="1%" class="nowrap" sortable-column="ipv4" sort-type="ip" sort-direction="asc">IP</th>
        <th width="1%" class="nowrap" sortable-column="mac">MAC</th>
        <th sortable-column="hostname">Hostname</th>
        <th sortable-column="vendor">Vendor</th>
        <th width="1%" class="nowrap" sortable-column="sent">Sent</th>
        <th width="1%" class="nowrap" sortable-column="received">Recvd</th>
        <th width="1%" class="nowrap" sortable-column="last_seen">Seen</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngIf="hosts.length == 0">
        <td colspan="6" align="center">
          <i>empty</i>
        </td>
      </tr>

      <tr *ngFor="let host of hosts | search: omnibar.query" [class.alive]="host | alive:1000">
        <td class="nowrap">
          <div *ngIf="!scanState.scanning.includes(host.ipv4)" ngbDropdown [open]="visibleMenu == host.mac">
            <span>
              <input 
                *ngIf="viewSpoof"
                type="checkbox"
                style="margin-right: 15px"
                [attr.data-ip]="host.ipv4"
                class="spoof-toggle"
                [disabled]="host == iface || host == gateway"
                (change)="updateSpoofingList()"
                [checked]="isSpoofed(host)">

              <button class="btn btn-sm btn-dark btn-action" ngbDropdownToggle (click)="visibleMenu = (visibleMenu == host.mac ? null : host.mac)">
                {{ host.ipv4 }}
              </button>
              <div ngbDropdownMenu class="menu-dropdown">
                <ul>
                  <li>
                    <a (click)="visibleMenu = null; clipboard.copy(host.ipv4)">Copy</a>
                  </li>
                  <li>
                    <a (click)="visibleMenu = null; showScannerModal(host)">Scan Ports</a>
                  </li>
                  <li *ngIf="isSpoofed(host)">
                    <a (click)="showSpoofMenuFor(host, false)">Remove from arp.spoof.targets</a>
                  </li>
                  <li *ngIf="!isSpoofed(host)">
                    <a (click)="showSpoofMenuFor(host, true)">Add to arp.spoof.targets</a>
                  </li>
                </ul>
              </div>

              <i *ngIf="isSpoofed(host)" style="margin-left: 5px; color: #d2322d" ngbTooltip="Part of arp.spoof.targets" class="fas fa-radiation"></i>

            </span>
          </div>

          <span *ngIf="scanState.scanning.includes(host.ipv4)">
            {{ host.ipv4 }}
            <span class="badge badge-pill badge-warning" style="margin-left: 5px" ngbTooltip="Scanning {{ scanState.progress }}% ...">
              <span class="spinner-border spinner-border-sm" style="font-size:.7rem" role="status" aria-hidden="true"></span>
              {{ scanState.progress | number:'1.0-0' }}%
              <a style="cursor: pointer" (click)="api.cmd('syn.scan stop')" ngbTooltip="Stop scan">
                <i class="fas fa-stop"></i> 
              </a>
            </span>
          </span>

        </td>
        <td>
          <div ngbDropdown [open]="visibleMenu == host.mac + 'mac'">
            <button class="btn btn-sm btn-dark btn-action" ngbDropdownToggle (click)="visibleMenu = (visibleMenu == host.mac + 'mac' ? null : host.mac + 'mac')">
              {{ host.mac | uppercase }}
            </button>
            <div ngbDropdownMenu class="menu-dropdown">
              <ul>
                <li>
                  <a (click)="visibleMenu = null; clipboard.copy(host.mac.toUpperCase())">Copy</a>
                </li>
                <li>
                  <a (click)="visibleMenu = null; setAlias(host)">Set Alias</a>
                </li>
              </ul>
            </div>
          </div>
        </td>
        <td [class.empty]="!host.hostname && !host.alias">
          {{ host.hostname }}
          
          <span *ngIf="host.alias" (click)="setAlias(host)" class="badge badge-pill badge-secondary" style="cursor: pointer">
            {{ host.alias }}
          </span>
        </td>
        <td [class.empty]="!host.vendor">{{ host.vendor ? host.vendor : 'unknown' }}</td>
        <td [class.empty]="!host.sent" class="nowrap">{{ host.sent | size }}</td>
        <td [class.empty]="!host.received" class="nowrap">{{ host.received | size }}</td>
        <td class="time">{{ host.last_seen | date: 'HH:mm:ss'}}</td>
        <td class="metas nowrap">

          <span *ngIf="host.mac == iface.mac" class="badge badge-secondary btn-tiny">interface</span>
          <span *ngIf="host.mac == gateway.mac" class="badge badge-secondary btn-tiny">gateway</span>

          <span *ngFor="let group of groupMetas(host.meta.values) | keyvalue" class="btn-group drop-left">

            <div ngbDropdown [open]="visibleMeta == host.mac+group.key" placement="left">
              <button ngbDropdownToggle 
                class="btn btn-sm badge badge-warning btn-action drop-small btn-tiny"
                [class.badge-danger]="group.key == 'PORTS'"
                (click)="visibleMeta = (visibleMeta == host.mac+group.key ? null : host.mac+group.key)">
                {{ group.key }}
              </button>

              <div ngbDropdownMenu class="menu-dropdown">
                <table class="table table-sm table-dark">
                  <tbody>
                    <ng-container *ngIf="group.key == 'PORTS'">
                      <tr *ngFor="let port of host.meta.values.ports | keyvalue">
                        <td>{{ port.value.port }}</td>
                        <td [class.empty]="port.value.service == ''">{{ port.value.service ? port.value.service : '?' }}</td>
                        <td class="text-muted">{{ port.value.proto }}</td>
                        <td [class.empty]="port.value.banner == ''">{{ port.value.banner ? port.value.banner : 'no banner' }}</td>
                      </tr>
                    </ng-container>

                    <ng-container *ngIf="group.key != 'PORTS'">
                      <tr *ngFor="let item of group.value | keyvalue">
                        <th>{{ item.key == undefined || item.key === 'undefined' ? '' : item.key }}</th>
                        <td>{{ item.value }}</td>
                      </tr>
                    </ng-container>
                  </tbody>
                </table>
              </div>

            </div>

          </span>

        </td>
      </tr>
    </tbody>
  </table>
</div>

<div id="scannerModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="scannerModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="scannerModalTitle">
          <h5>Select Ports</h5>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form (ngSubmit)="doPortScan()">
          <div class="form-group row">
            <label for="scanIP" class="col-sm-1 col-form-label">IP</label>
            <div class="col-sm">
              <input type="text" class="form-control param-input" id="scanIP" value="">
            </div>
          </div>
          <div class="form-group row">
            <label for="startPort" class="col-sm-1 col-form-label">Start</label>
            <div class="col-sm">
              <input type="number" min="1" max="65535" class="form-control param-input" id="startPort" value="1">
            </div>
            <label for="endPort" class="col-sm-1 col-form-label">End</label>
            <div class="col-sm">
              <input type="number" min="1" max="65535" class="form-control param-input" id="endPort" value="1000">
            </div>
          </div>
          <div class="text-right">
            <button type="submit" class="btn btn-dark">Scan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="inputModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="inputModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">
          <h5 id="inputModalTitle"></h5>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form (ngSubmit)="doSetAlias()">
          <div class="form-group row">
            <div class="col">
              <input type="text" class="form-control param-input" id="in" value="">
              <input type="hidden" id="inhost" value="">
            </div>
          </div>
          <div class="text-right">
            <button type="submit" class="btn btn-dark">Ok</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
