<div class="table-responsive">
  <table class="table table-dark table-sm">
    <thead>
      <tr>
        <th style="width:1%" sortable-column="rssi" sort-direction="asc">RSSI</th>
        <th style="width:1%" class="nowrap" sortable-column="mac">MAC</th>
        <th sortable-column="name">Name</th>
        <th sortable-column="vendor">Vendor</th>
        <th sortable-column="flags">Flags</th>
        <th style="width:1%" sortable-column="connectable">Connectable</th>
        <th style="width:1%" sortable-column="services">Services</th>
        <th style="width:1%" class="nowrap" sortable-column="last_seen">Seen</th>
      </tr>
    </thead>
    <tbody>

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

      <ng-container *ngFor="let device of devices | search: omnibar.query">
        <tr *ngIf="!currDev || currDev.mac == device.mac" [class.alive]="device | alive:100">
          <td>
            <ui-signal-indicator [signalstrength]="device.rssi"></ui-signal-indicator>
          </td>
          <td>
            <div ngbDropdown [open]="visibleMenu == device.mac">
              <button class="btn btn-sm btn-dark btn-action" ngbDropdownToggle (click)="visibleMenu = (visibleMenu == device.mac ? null : device.mac)">
                {{ device.mac | uppercase }}
              </button>
              <div ngbDropdownMenu class="menu-dropdown">
                <ul>
                  <li>
                    <a (click)="visibleMenu = null; clipboard.copy(device.mac.toUpperCase())">Copy</a>
                  </li>
                  <li>
                    <a (click)="visibleMenu = null; setAlias(device)">Set Alias</a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
          
          <td [class.empty]="!device.name && !device.alias">
            {{ (device.name ? device.name : device.alias ? '' : 'none') | unbash }}
            <span *ngIf="device.alias" (click)="setAlias(device)" class="badge badge-pill badge-secondary" style="cursor:pointer;">
              {{ device.alias }}
            </span>
          </td>

          <td [class.empty]="!device.vendor">{{ device.vendor ? device.vendor : 'unknown' }}</td>
          <td [class.empty]="!device.flags">{{ device.flags ? device.flags : 'none' }}</td>
          <td align="center">
            <i class="fas fa-check" *ngIf="device.connectable" style="color:green"></i>
            <i class="fas fa-times" *ngIf="!device.connectable" style="color:red"></i>
          </td>
          <td align="center">
            <span *ngIf="currScan && device.services.length == 0" class="badge badge-warning">
              <span *ngIf="currScan.mac == device.mac" ngbTooltip="Scanning ...">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              </span>
              <span *ngIf="currScan.mac != device.mac" ngbTooltip="Another device is being scanned ...">
                <i class="fas fa-eye"></i>
              </span>
            </span>

            <span *ngIf="device.services.length > 0">
              <span style="cursor:pointer;" class="badge badge-danger" (click)="currDev = (currDev ? null : device)">
                {{ device.services.length }}
                <i *ngIf="!currDev" class="fas fa-angle-right"></i>
                <i *ngIf="currDev && currDev.mac == device.mac" class="fas fa-angle-down"></i>
              </span>
            </span>

            <span *ngIf="!currScan" style="cursor:pointer; margin-left:5px" class="badge badge-warning" (click)="enumServices(device)">
              <i *ngIf="device.services.length == 0" ngbTooltip="Scan" class="fas fa-eye"></i>
              <i *ngIf="device.services.length > 0" ngbTooltip="Refresh" class="fas fa-sync-alt"></i>
            </span>
          </td>
          <td class="time">{{ device.last_seen | date: 'HH:mm:ss' }}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>

  <table *ngIf="currDev" class="table table-sm table-dark">
    <thead>
      <tr>
        <th>Handles</th>
        <th>
          <span class="badge badge-primary" style="margin-right: 10px">
          Service
          </span>
          <i class="fas fa-chevron-right"></i>
          <span class="badge badge-secondary" style="margin-left: 10px">
          Characteristics
          </span>
        </th>
        <th>Properties</th>
        <th>Data</th>
        <th width="1%"></th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let svc of currDev.services">
      <tr>
        <td>
          {{ svc.handle }}
          <i class="fas fa-chevron-right"></i>
          {{ svc.end_handle }}
        </td>
        <td>
          <span *ngIf="svc.name">
            <span class="badge badge-primary" style="margin-right: 10px">
              {{ svc.name }}
            </span>
            <span class="text-muted">{{ svc.uuid }}</span>
          </span>
          <span *ngIf="!svc.name" class="badge badge-primary">
            {{ svc.uuid }}
          </span>
        </td>
        <td></td>
        <td></td>
      </tr>
      <tr *ngFor="let ch of svc.characteristics">
        <td style="padding-left:50px">
          <span class="text-muted">{{ ch.handle }}</span>
        </td>
        <td style="padding-left:50px"> 
          <span *ngIf="ch.name">
            <span class="badge badge-secondary" style="margin-right: 10px">
              {{ ch.name }}
            </span>
            <span class="text-muted">{{ ch.uuid }}</span>
          </span>
          <span *ngIf="!ch.name" class="badge badge-secondary">
            {{ ch.uuid }}
          </span>
        </td>
        <td>
          {{ ch.properties.join(', ') | unbash }}
        </td>
        <td>
          <span class="text-muted">
            {{ ch.data | unbash }}
          </span>
        </td>
        <td>
          <button *ngIf="ch.properties.join().indexOf('WRITE') != -1" class="btn btn-sm btn-warning" ngbTooltip="Write" (click)="showWriteModal(currDev, ch)">
            write
          </button>
        </td>
      </tr>
      </ng-container>
    </tbody>
  </table>
</div>

<div id="writeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="writeModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="writeModalTitle">
          <h5>Write Data</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)="doWrite()">
          <div class="form-group row">
            <label for="writeMAC" class="col-sm-1 col-form-label">MAC</label>
            <div class="col-sm">
              <input type="text" class="form-control" id="writeMAC" value="">
            </div>
          </div>
          <div class="form-group row">
            <label for="writeUUID" class="col-sm-1 col-form-label">UUID</label>
            <div class="col-sm">
              <input type="text" class="form-control" id="writeUUID" value="">
            </div>
          </div>
          <div class="form-group row">
            <label for="writeData" class="col-sm-1 col-form-label">Data</label>
            <div class="col-sm">
              <input type="text" class="form-control" id="writeData" value="">
            </div>
          </div>
          <div class="text-right">
            <button type="submit" class="btn btn-dark">Write</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>
