<div class="row">
  <div class="col-2 mod-nav">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a (click)="curMod = 0; successMessage = '';" class="nav-link" [class.active]="curMod === 0">
        <i class="fas fa-cog" style="margin-right: 5px"></i>
        Main
      </a>

      <a (click)="curMod = 1; successMessage = '';" class="nav-link" [class.active]="curMod === 1">
        <i class="fas fa-ethernet" style="margin-right: 5px"></i>
        Network
      </a>

      <a *ngFor="let mod of modules | search: omnibar.query" (click)="curMod = mod; successMessage = '';"
        href="#/advanced/{{ mod.name }}" class="nav-link" [class.active]="curMod && curMod.name == mod.name"
        [class.text-muted]="!mod.running">
        <i class="fas fa-{{ mod.name | modicon }}" style="margin-right: 5px"></i>
        {{ mod.name }}
        <i *ngIf="api.settings.isPinned(mod.name)" class="fas fa-thumbtack float-right shadow"
          style="transform: rotate(45deg); font-size: .7rem"></i>
      </a>

    </div>
  </div>
  <div class="col-10 mod-content">

    <div *ngIf="curMod === 0" class="container-fluid shadow-sm">

      <div class="row">
        <div class="col-12">
          <h4>Status</h4>

          <table class="table table-dark table-sm">
            <tbody>
              <tr>
                <th>Connected To</th>
                <td>
                  {{ api.settings.URL() }}
                  <span class="text-muted">
                    polled every {{ api.settings.interval }}ms with a ping of {{ api.ping }}ms
                    <strong *ngIf="api.paused">
                      (paused)
                    </strong>
                  </span>
                </td>
              </tr>
              <tr>
                <th>API Version</th>
                <td>
                  {{ api.session.version }}
                  <span class="text-muted">
                    compiled with {{ api.session.goversion }} for {{ api.session.os }} {{ api.session.arch }}
                  </span>
                </td>
              </tr>

              <tr>
                <th>CPU</th>
                <td>Using {{ api.session.resources.max_cpus }} of {{ api.session.resources.cpus }} logical CPUs
                  <span class="text-muted">({{ api.session.resources.goroutines }} goroutines)</span>
                </td>
              </tr>
              <tr>
                <th>MEM</th>
                <td>
                  Heap: {{ api.session.resources.alloc | size }} Sys: {{ api.session.resources.sys | size }}
                  <span class="text-muted">
                    gc cycles: {{ api.session.resources.gcs }}
                  </span>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <h4>Options</h4>

          <table class="table table-dark table-sm">
            <tbody>
              <tr *ngFor="let arg of session.options | keyvalue | search: omnibar.query">
                <th width="1%">{{ arg.key }}</th>
                <td>
                  <div class="input-group">
                    <input type="text" class="form-control form-control-sm param-input" name="{{ arg.key }}"
                      id="{{ arg.key }}" [(ngModel)]="arg.value" readonly />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <h4>Variables</h4>

          <table class="table table-dark table-sm">
            <tbody>
              <tr *ngFor="let val of session.env.data | keyvalue | search: omnibar.query">
                <th width="1%">{{ val.key }}</th>
                <td>
                  <div class="input-group">
                    <input type="text" class="form-control form-control-sm param-input" name="{{ val.key }}"
                      id="{{ val.key }}" [(ngModel)]="val.value" readonly />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

    <div *ngIf="curMod === 1" class="container-fluid shadow-sm">

      <div class="row">
        <div class="col-12">
          <h4>Interfaces</h4>

          <table class="table table-sm table-dark">
            <tbody>
              <ng-container *ngFor="let iface of api.session.interfaces | search: omnibar.query">
                <tr>
                  <td width="1%" class="nowrap">
                    <span class="badge badge-secondary" style="margin-right: 5px">{{ iface.name }}</span>
                    <small class="text-muted">{{ iface.flags }}</small>
                  </td>
                  <td>
                    <span *ngIf="iface.mac != '0'">
                      {{ iface.mac | uppercase }}
                      <small class="text-muted" *ngIf="iface.vendor">{{ iface.vendor }}</small>
                    </span>
                  </td>
                </tr>
                <tr *ngIf="iface.addresses.length == 0">
                  <td colspan="2" style="padding-left:50px">
                    <span class="text-muted">not connected</span>
                  </td>
                </tr>
                <tr *ngFor="let a of iface.addresses">
                  <td colspan="2" style="padding-left:50px">
                    {{ a.address }} <small class="text-muted">{{ a.type }}</small>
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </table>

        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <h4>Packets per Protocol</h4>

          <table class="table table-dark table-sm">
            <tbody>
              <tr *ngFor="let proto of session.packets.protos | keyvalue | search: omnibar.query">
                <th width="10%">{{ proto.key }}</th>
                <td>
                  <ngb-progressbar type="info" [value]="proto.value" [max]="pktTot">
                    {{ proto.value }}
                  </ngb-progressbar>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>



    <div *ngIf="curMod !== 0 && curMod !== 1" class="container-fluid shadow-sm">
      <div class="row">
        <div class="col-12">
          <p class="mod-description">
            {{ curMod.description }}
          </p>
          <a (click)="api.settings.pinToggle(curMod.name)"
            ngbTooltip="{{ api.settings.isPinned(curMod.name) ? 'Unpin' : 'Pin' }} this module to the navigation bar."
            style="cursor:pointer;margin-right: 15px">
            <i class="fas fa-thumbtack shadow"
              [ngStyle]="{'transform': api.settings.isPinned(curMod.name) ? 'rotate(45deg)' : ''}"></i>
          </a>
          <span *ngIf="curMod.running" class="badge badge-success">
            Running
          </span>
          <span *ngIf="!curMod.running" class="badge badge-danger">
            Not running
          </span>
          <hr />
        </div>
      </div>

      <div *ngIf="successMessage" class="row">
        <div class="col-12">
          <div class="alert alert-dismissable fade show alert-success" role="alert">
            {{ successMessage }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <h4>Commands</h4>

          <p *ngIf="(curMod.handlers | json) == '{}'">No commands available for this module.</p>

          <div *ngFor="let cmd of curMod.handlers | search: omnibar.query" class="form-group">
            <label>
              <button class="btn btn-sm badge badge-pill badge-warning" (click)="showCommandModal(cmd)">
                <i class="fas fa-play"></i>
                {{cmd.name}}
              </button>
            </label>
            <p class="form-text text-muted">{{ cmd.description }}</p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <h4>Parameters</h4>

          <p *ngIf="(curMod.parameters | json) == '{}'">No parameters available for this module.</p>

          <div *ngFor="let p of curMod.parameters | keyvalue | search: omnibar.query" class="form-group">
            <label for="{{ p.key }}">
              {{p.key}}
            </label>
            <p class="form-text text-muted">{{ p.value.description }}</p>

            <div class="input-group">
              <input type="text" class="form-control form-control-sm param-input" name="{{p.key}}" id="{{p.key}}"
                (keyup.enter)="saveParam(p.value)" [(ngModel)]="p.value.current_value" />

              <div class="input-group-append">
                <button class="btn btn-sm btn-dark" type="button" (click)="saveParam(p.value)">
                  <i class="far fa-save"></i>
                </button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div id="commandModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="commandModalTitle"
  [ngModel]="curCmd" name="fieldName" ngDefaultControl>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="commandModalTitle">
          <h6>{{ curCmd.name }}</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)="doRunCommand()">
          <p class="form-text text-muted">
            {{ curCmd.description }}
          </p>
          <div *ngFor="let token of curCmd.tokens" class="form-group">
            <label for="tok{{ token.id }}">{{ token.label }}</label>
            <input type="text" id="tok{{ token.id }}" class="form-control param-input" value="">
          </div>
          <div class="text-right">
            <button type="submit" class="btn btn-sm btn-warning">
              <i class="fas fa-play"></i> Run
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>