<div class="table-responsive">
  <table class="table table-dark table-sm">
    <thead>
      <tr>
        <th width="1%" sortable-column="address" sort-direction="asc">Address</th>
        <th sortable-column="type">Type</th>
        <th width="1%" sortable-column="payloads">Data</th>
        <th width="1%" sortable-column="channels">Channels</th>
        <th width="1%" class="nowrap" sortable-column="last_seen">Seen</th>
      </tr>
    </thead>
    <tbody>

      <tr *ngIf="devices.length == 0">
        <td colspan="4" align="center">
          <i>empty</i>
        </td>
      </tr>

      <tr *ngFor="let device of devices | search: omnibar.query" [class.alive]="device | alive:5000">
        <td class="nowrap">
          <span *ngIf="state.sniffing == device.address">
            {{ device.address | uppercase }}

            <span *ngIf="device.alias" (click)="setAlias(device)" class="badge badge-pill badge-secondary" style="margin-left:5px; cursor: pointer">
              {{ device.alias }}
            </span>

            <span class="badge badge-pill badge-warning" style="margin-left: 5px">
              <span class="spinner-border spinner-border-sm" style="font-size:.7rem" role="status" aria-hidden="true"></span>
              <span *ngIf="state.injecting">
                injecting ...
              </span>
              <span *ngIf="!state.injecting">
                sniffing ...
                <a style="cursor: pointer" (click)="api.cmd('hid.sniff clear')" ngbTooltip="Stop sniffing">
                  <i class="fas fa-stop"></i> 
                </a>
              </span>
            </span>
          </span>

          <div *ngIf="state.sniffing != device.address" ngbDropdown [open]="visibleMenu == device.address">
            <button class="btn btn-sm btn-dark btn-action" ngbDropdownToggle (click)="visibleMenu = (visibleMenu == device.address ? null : device.address)">
              {{ device.address | uppercase }}
            </button>
            <div ngbDropdownMenu class="menu-dropdown">
              <ul>
                <li>
                  <a (click)="visibleMenu = null; clipboard.copy(device.address.toUpperCase())">Copy</a>
                </li>
                <li>
                  <a (click)="visibleMenu = null; api.cmd('hid.sniff ' + device.address);">Sniff</a>
                </li>
                <li>
                  <a (click)="visibleMenu = null; showInjectModal(device);">Inject Script</a>
                </li>
                <li>
                  <a (click)="visibleMenu = null; setAlias(device)">Set Alias</a>
                </li>
              </ul>
            </div>

            <span *ngIf="device.alias" (click)="setAlias(device)" class="badge badge-pill badge-secondary" style="margin-left:5px; cursor: pointer">
              {{ device.alias }}
            </span>
          </div>
        </td>
        <td [class.empty]="!device.type">
          {{ device.type ? device.type : 'unknown'}}
        </td>
        <td [class.empty]="device.payloads_size == 0" class="nowrap">
          <span *ngIf="device.payloads_size == 0">0</span>

          <div ngbDropdown *ngIf="device.payloads_size > 0">
            <button  
             class="btn btn-sm badge badge-warning btn-action drop-small"
             ngbTooltip="Show payloads for this device."
             (click)="showPayloadsModal(device)">
              {{ device.payloads_size | size }}
              <i class="fas fa-eye"></i>
            </button>
          </div>

        </td>
        <td class="nowrap">{{ device.channels.join(', ') }}</td>
        <td class="nowrap time">{{ device.last_seen | date: 'HH:mm:ss' }}</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="injectModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="injectModalTitle" [ngModel]="injDev" name="fieldName" ngDefaultControl>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="injectModalTitle">
          <h6>Over-the-Air DuckyScript Injection</h6>
        </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)="doInjection()" name="injForm">
          <div *ngFor="let token of injDev.tokens" class="form-group">
            <label for="tok{{ token.id }}">
              {{ token.label }}
              <a *ngIf="token.id == 'DATA'" ngbTooltip="Open DuckyScript reference documentation." href="https://github.com/hak5darren/USB-Rubber-Ducky/wiki/Duckyscript" target="_blank">
                <i class="fas fa-question-circle"></i>
              </a>
            </label>
            <ng-container [ngSwitch]="token.id">
              <select *ngSwitchCase="'LAYOUT'" class="form-control param-input" id="tok{{ token.id }}" name="tok{{ token.id }}">
                <option *ngFor="let l of state.layouts" value="{{ l }}" [selected]="l == 'US'">{{ l }}</option>
              </select>

              <textarea 
                *ngSwitchCase="'DATA'" 
                rows="10" 
                id="tok{{ token.id }}" 
                name="tok{{ token.id }}" 
                class="form-control param-input" 
                style="font-size:.8rem" required>{{ token.value }}</textarea>

              <input *ngSwitchDefault type="text" id="tok{{ token.id }}" name="tok{{ token.id }}" class="form-control param-input" value="{{ token.value }}" required>
            </ng-container>
          </div>
          <div class="text-right">
            <button type="submit" name="injBtn" class="btn btn-sm btn-warning">
              <i class="fas fa-play"></i> Run
            </button> 
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="payloadsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="payloadsModalTitle" [ngModel]="curDev" name="fieldName" ngDefaultControl>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="payloadsModalTitle">
          <h5>Last {{ curDev.payloads.length }} payloads of {{ curDev.payloads_size | size }}</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" style="max-height:600px; overflow-y: scroll">
        <span *ngFor="let p of curDev.payloads" class="payload">
          {{ p.split(' ').splice(1).join(' ') }}<br/>
        </span>
      </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>
