

<div class="row top-row">
  <div class="btn-group-right" >
    <div class="btn-group-img-right">
      <a routerLink="/admin/skill">
        <img src="{{img_path + 'add_button.png'}}">
      </a>
    </div>
    <div class="btn-group-text">
      <p class="btn-group-text-right">Skills</p>
    </div>
  </div>
</div>
<app-data-table [data]="tableData" (edit)="edit($event)" (delete)="delete($event)"></app-data-table>

<!-- <div class="row users-container">
  <div class="table-responsive admin">
    <table class="table table-bordered table-hover admin-table">
      <thead>
      <tr>
        <th>Skillmaster</th>
        <th>Skill Set</th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let skill of masterSkills;">
        <td>{{skill.pgSkillTrackMstr.description}}</td>
        <td><span *ngFor="let skilDlts of skillMstrs(skill.pgSkillTrackMstr.skillTrackMstrId); let row=index">{{skilDlts.description}}<span *ngIf="row+1 !== skillMstrs(skill.pgSkillTrackMstr.skillTrackMstrId).length">, </span></span></td>
        <td class="actions">
          <mat-icon id="icon-edit" routerLink="/admin/skill/i">edit</mat-icon>
          <mat-icon id="icon-delete">delete</mat-icon>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div> -->

<!-- Modal -->
<div id="adminModal" class="modal fade skill-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Skillset </h4>
      </div>

      <label *ngIf="!successResp" for="assessment" class="modal-err-msg">{{errMsg}}</label>

      <form [formGroup]="userForm"
            class="ui form"
            [class.error]="!userForm.valid && userForm.touched" >
        <div class="modal-body admin-modal-body">
          <div class="row">
            <div class="col-xs-12">
              <div class="modal-form-group">
                <label for="skillMaster" class="modal-input-label">Skill Master</label>
                <input type="text"  id="skillMaster" class="modal-input" placeholder="Enter" formControlName="skillMaster" required>
              </div>
            <div class="modal-form-group">
                <label for="skillCategory" class="modal-input-label">Skill Category</label>
                <input type="text"  id="skillCategory" class="modal-input" placeholder="Enter" formControlName="skillCategory" required>
              </div>
            <div class="modal-form-group">
                <label for="skillDetails" class="modal-input-label">Skill Details</label>
                <input type="text"  id="skillDetails" class="modal-input" placeholder="Enter" formControlName="skillDetails" required>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button"  (click)="onSubmit(userForm.value)" class="modal-btn" [attr.data-dismiss]=dismiss>ADD</button>
        </div>

      </form>
    </div>

  </div>
</div>
