<div class="container">
  <div class="row">
    <div class="col-sm-3" pull-left *ngIf="sets.length > 0">
      <div align="center" class="panel panel-default" style="width:100%">
        <div class="panel-heading">
          <h2> Add parcel </h2>
        </div>
        <div class="input-group">
          <input #width type="text" class="form-control" placeholder="Parcel's width" aria-describedby="basic-addon2">
          <span class="input-group-addon" id="basic-addon2">cm</span>
        </div>
        <div class="input-group">
          <input #height type="text" class="form-control" placeholder="Parcel's height" aria-describedby="basic-addon2">
          <span class="input-group-addon" id="basic-addon2">cm</span>
        </div>
        <div class="input-group">
          <input #depth type="text" class="form-control" placeholder="Parcel's depth" aria-describedby="basic-addon2">
          <span class="input-group-addon" id="basic-addon2">cm</span>
        </div>
        <div class="input-group">
          <textarea #packageInfo class="form-control" placeholder="Package info"></textarea>
        </div>
        <!-- <tbody>
          <tr>
            <div class="col-md-3">
              <input type="file" ng2FileSelect [uploader]="uploader" single />
            </div>
          </tr>
          <tr *ngFor="let item of uploader.queue">
            <td nowrap>
              <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
              <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
              <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
              <button type="button" class="btn btn-success btn-xs" (click)="item.upload();
                  addParcel(width.value, height.value, depth.value, packageInfo.value);
                  width.value=''; height.value=''; depth.value='';">
                  <span class="glyphicon glyphicon-upload"></span>Upload
              </button>
              <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                  <span class="glyphicon glyphicon-trash"></span> Remove
              </button>
          </tr>
        </tbody> -->
        <tr>
          <input (click)="addParcel(width.value, height.value, depth.value, packageInfo.value);
                  width.value=''; height.value=''; depth.value=''; packageInfo.value=''" class="btn btn-success" type="submit" value="Add">
        </tr>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default" style="width:100%">
        <thead>
          <tr>
            <th>
              <div class="panel-heading" align=center>
                <h3>Add new set</h3>
                <input [(ngModel)]="setField" (keyUp.enter)="addSet(setField)">
                <button (click)="addSet(setField)">Add</button>
              </div>
            </th>
            <th>
              <div class="panel-heading" align=center>
                <h4> Select set of parcels </h4>
                <div class="row">
                  <select class="selectpicker show-tick" data-style="btn-primary" [(ngModel)]="selectedSet" (change)="updateCurrentSet()">
                    <optgroup label="Sets">
                  <option *ngFor="let set of sets">{{set}}</option>
                  </optgroup>
              </select>
                  <button type="button" *ngIf="sets.length > 0" (click)="deleteSet(selectedSet)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button>
                </div>
              </div>
            </th>
          </tr>
        </thead>
        <table class=" table table-hover">
          <thead>
            <tr>
              <th>
                ID
              </th>
              <th>
                Width
              </th>
              <th>
                Height
              </th>
              <th>
                Depth
              </th>
              <th>
                Group
              </th>
              <th>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let parcel of parcels" (click)="onSelect(parcel)" [class.selected]="parcel === selectedParcel">
                <td scope="row">#{{parcel.id}}</td>
                <td>{{parcel.width}}</td>
                <td>{{parcel.height}}</td>
                <td>{{parcel.depth}}</td>
                <td>{{parcel.parcelGroup}}</td>
                <td>
                  <button (click)="deleteParcel(parcel); $event.stopPropagation()" type="button" class="btn btn-danger">Delete</button>
                </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-3">
      <div *ngIf="selectedParcel">
        <div align="center" class="panel panel-default" style="width:100%">
          <div class="panel-heading" align=center>
            <h2> Edit parcel</h2>
          </div>
          <h3>
            Parcel with ID: {{selectedParcel.id}}
          </h3>
          <tr>
            <input (click)="goToDetail()" class="btn btn-warning" type="submit" value="Edit">
          </tr>
          <tr>
            <input (click)="downloadImage(selectedParcel.parcelQRCodeId, selectedParcel.whichSet)" class="btn btn-primary" type="submit" value="Download QR Code">
          </tr>
        </div>
      </div>
    </div>
  </div>
</div>