<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 *ngIf="caplets.length == 0" class="nav-link">
        Install 
      </a>

      <a *ngIf="caplets.length > 0" (click)="onUpdateAll()" class="nav-link" class="btn btn-sm btn-secondary" style="margin:10px">
        <i class="fas fa-download"></i>
        Update All
      </a>

      <a 
         *ngFor="let cap of caplets | search: omnibar.query" 
         (click)="curCap = cap; successMessage = ''; errorMessage = '';"
         class="nav-link" [class.active]="curCap && curCap.name == cap.name">
        {{ cap.name.split('/').pop() }} <small class="text-muted">{{ cap.size | size:0 }}</small>

        <div *ngIf="curCap && curCap.name == cap.name && cap.scripts.length> 0" style="padding-left:15px">
          <small *ngFor="let script of cap.scripts" class="text-muted">
            {{ script.path.split('/').pop() }} {{ script.size | size:0 }}
            <br/>
          </small>
        </div>
      </a>
      
    </div>
  </div>

  <div class="col-10 mod-content">
    
    <div *ngIf="caplets.length == 0" class="container-fluid shadow-sm">
      <div class="row">
        <div class="col-12">
          <p class="mod-description">
            No caplets installed so far.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <button type="button" class="btn btn-warning" (click)="api.cmd('caplets.update')">
            <i class="fas fa-download"></i>
            Install
          </button>
          <br/>
          <br/>
        </div>
      </div>
    </div>

    <div *ngIf="successMessage" 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 *ngIf="errorMessage" class="alert alert-dismissable fade show alert-danger" role="alert">
      {{ errorMessage }}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div *ngFor="let item of curScripts()" class="container-fluid shadow-sm">
      <div class="row">
        <div class="col-12">

          <div class="btn-group" style="width:100%; margin-bottom:10px" role="group">
            <button class="btn btn-sm btn-dark" (click)="saveCaplet(item)" ngbTooltip="Save caplet code.">
              <i class="fas fa-save"></i>
            </button>
            <button *ngIf="item.path.indexOf('.cap') != -1" class="btn btn-sm btn-dark" (click)="runCaplet(item)" ngbTooltip="Run this caplet.">
              <i class="fas fa-play"></i>
            </button>
            <input 
                 type="text" 
                 class="form-control form-control-sm param-input disabled" 
                 style="width:100%"
                 value="{{ item.path }}" disabled readonly/>
          </div>

          <textarea 
            rows="{{ item.code.length <= 30 ? item.code.length : 30 }}" 
            id="capCode{{ item.index }}"
            name="capCode{{ item.index }}"
            class="form-control param-input caplet" required>{{ item.code.join("\n") }}</textarea>

          <br/>
        </div>

      </div>

  </div>
</div>
