<div class="animated fadeIn">
   <!--/.row-->
   <div class="row">
      <!--/.col-->
      <div class="col-md-12 mb-4">
       <!-- Nav tabs -->
       <tabset>
          <tab>
              <ng-template tabHeading> Answer BookLet</ng-template> 
              <div class="row">
                              
                  <div class="form-group col-sm-3">
                      <label for="statusName">Status Name <span class="symbol required"></span></label>
                      <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                    </div>
                    <div class="form-group col-sm-4 saveBtn">
                        <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                    </div>
                    
            </div>
              <div class="row">

                  <div class="col-md-12">
                    <div class="card">
                      <div class="card-header">
                          <i class="fa fa-align-justify"></i> View Answer Booklet Status
                      </div>
                      <div class="card-body">
                        <div class="row">
                            <div class="form-group col-sm-3 ">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                    <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                  </div>
                          </div>
                                <div class="form-group col-sm-3 ">
                                    <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                  </div>
                                 
                        </div><!--/.row-->
                            <div class="row">
                                <div class="col-lg-12 col-xs-12">
                                  <table class="table table-bordered table-responsive table-hover">
                                    <thead>
                                      <tr>
                                        <th>Status Name</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr *ngFor="let book of bookStatus">
                                          <td>{{book.statusName}}</td>
                                          <td>{{book.type}}</td>
                                          <td>
                                            <span class="badge badge-success">{{book.status}}</span>
                                          </td>
                                          <td>
                                              <a><i class="fa fa-pencil-square-o"></i></a>
                                          </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                    <li class="page-item active">
                                      <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                  </ul>
                                </div>
                                <!--/.col-->
                              </div>
                              <!--/.row-->
                      </div>
                    </div>
                  </div><!--/.col-->
            </div>
              </tab>
              <tab>
                  <ng-template tabHeading> Courier</ng-template> 
                  <div class="row">
                              
                      <div class="form-group col-sm-3">
                          <label for="statusName">Status Name <span class="symbol required"></span></label>
                          <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                        </div>
                        <div class="form-group col-sm-4 saveBtn">
                            <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                            <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                        </div>
                        
                </div>
                  <div class="row">
    
                      <div class="col-md-12">
                        <div class="card">
                          <div class="card-header">
                              <i class="fa fa-align-justify"></i> View Courier Status
                          </div>
                          <div class="card-body">
                            <div class="row">
                                <div class="form-group col-sm-3 ">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                        <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                      </div>
                              </div>
                                    <div class="form-group col-sm-3 ">
                                        <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                      </div>
                                     
                            </div><!--/.row-->
                                <div class="row">
                                    <div class="col-lg-12 col-xs-12">
                                      <table class="table table-bordered table-responsive table-hover">
                                        <thead>
                                          <tr>
                                            <th>Status Name</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr *ngFor="let courier of courierStatus">
                                              <td>{{courier.statusName}}</td>
                                              <td>{{courier.type}}</td>
                                              <td>
                                                <span class="badge badge-success">{{courier.status}}</span>
                                              </td>
                                              <td>
                                                  <a><i class="fa fa-pencil-square-o"></i></a>
                                              </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <ul class="pagination">
                                        <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                        <li class="page-item active">
                                          <a class="page-link" href="#">1</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                      </ul>
                                    </div>
                                    <!--/.col-->
                                  </div>
                                  <!--/.row-->
                          </div>
                        </div>
                      </div><!--/.col-->
                </div>
                  </tab>
                  <tab>
                      <ng-template tabHeading> Fees</ng-template> 
                      <div class="row">
                              
                          <div class="form-group col-sm-3">
                              <label for="statusName">Status Name <span class="symbol required"></span></label>
                              <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                            </div>
                            <div class="form-group col-sm-4 saveBtn">
                                <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                                <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                            </div>
                            
                    </div>
                      <div class="row">
        
                          <div class="col-md-12">
                            <div class="card">
                              <div class="card-header">
                                  <i class="fa fa-align-justify"></i> View Fees Status
                              </div>
                              <div class="card-body">
                                <div class="row">
                                    <div class="form-group col-sm-3 ">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                            <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                          </div>
                                  </div>
                                        <div class="form-group col-sm-3 ">
                                            <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                          </div>
                                         
                                </div><!--/.row-->
                                    <div class="row">
                                        <div class="col-lg-12 col-xs-12">
                                          <table class="table table-bordered table-responsive table-hover">
                                            <thead>
                                              <tr>
                                                <th>Status Name</th>
                                                <th>Type</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              <tr *ngFor="let fees of feesStatus">
                                                  <td>{{fees.statusName}}</td>
                                                  <td>{{fees.type}}</td>
                                                  <td>
                                                    <span class="badge badge-success">{{fees.status}}</span>
                                                  </td>
                                                  <td>
                                                      <a><i class="fa fa-pencil-square-o"></i></a>
                                                  </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <ul class="pagination">
                                            <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                            <li class="page-item active">
                                              <a class="page-link" href="#">1</a>
                                            </li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                          </ul>
                                        </div>
                                        <!--/.col-->
                                      </div>
                                      <!--/.row-->
                              </div>
                            </div>
                          </div><!--/.col-->
                    </div>
                      </tab>
                      <tab>
                          <ng-template tabHeading> Form</ng-template> 
                          <div class="row">
                              
                              <div class="form-group col-sm-3">
                                  <label for="statusName">Status Name <span class="symbol required"></span></label>
                                  <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                                </div>
                                <div class="form-group col-sm-4 saveBtn">
                                    <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                                    <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                                </div>
                                
                        </div>
                          <div class="row">
            
                              <div class="col-md-12">
                                <div class="card">
                                  <div class="card-header">
                                      <i class="fa fa-align-justify"></i> View Form Status
                                  </div>
                                  <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-sm-3 ">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                                <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                              </div>
                                      </div>
                                            <div class="form-group col-sm-3 ">
                                                <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                              </div>
                                             
                                    </div><!--/.row-->
                                        <div class="row">
                                            <div class="col-lg-12 col-xs-12">
                                              <table class="table table-bordered table-responsive table-hover">
                                                <thead>
                                                  <tr>
                                                    <th>Status Name</th>
                                                    <th>Type</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                  </tr>
                                                </thead>
                                                <tbody>
                                                  <tr *ngFor="let form of formStatus">
                                                      <td>{{form.statusName}}</td>
                                                      <td>{{form.type}}</td>
                                                      <td>
                                                        <span class="badge badge-success">{{form.status}}</span>
                                                      </td>
                                                      <td>
                                                          <a><i class="fa fa-pencil-square-o"></i></a>
                                                      </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                              <ul class="pagination">
                                                <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                                <li class="page-item active">
                                                  <a class="page-link" href="#">1</a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                              </ul>
                                            </div>
                                            <!--/.col-->
                                          </div>
                                          <!--/.row-->
                                  </div>
                                </div>
                              </div><!--/.col-->
                        </div>
                          </tab>
                          <tab>
                              <ng-template tabHeading> Mark Card </ng-template> 
                              <div class="row">
                              
                                  <div class="form-group col-sm-3">
                                      <label for="statusName">Status Name <span class="symbol required"></span></label>
                                      <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                                    </div>
                                    <div class="form-group col-sm-4 saveBtn">
                                        <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                                    </div>
                                    
                            </div>
                              <div class="row">
                
                                  <div class="col-md-12">
                                    <div class="card">
                                      <div class="card-header">
                                          <i class="fa fa-align-justify"></i> View Mark Card Status
                                      </div>
                                      <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-sm-3 ">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                                    <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                                  </div>
                                          </div>
                                                <div class="form-group col-sm-3 ">
                                                    <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                                  </div>
                                                 
                                        </div><!--/.row-->
                                            <div class="row">
                                                <div class="col-lg-12 col-xs-12">
                                                  <table class="table table-bordered table-responsive table-hover">
                                                    <thead>
                                                      <tr>
                                                        <th>Status Name</th>
                                                        <th>Type</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                      </tr>
                                                    </thead>
                                                    <tbody>
                                                      <tr *ngFor="let mark of markCardStatus">
                                                          <td>{{mark.statusName}}</td>
                                                          <td>{{mark.type}}</td>
                                                          <td>
                                                            <span class="badge badge-success">{{mark.status}}</span>
                                                          </td>
                                                          <td>
                                                              <a><i class="fa fa-pencil-square-o"></i></a>
                                                          </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                  <ul class="pagination">
                                                    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                                    <li class="page-item active">
                                                      <a class="page-link" href="#">1</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                                  </ul>
                                                </div>
                                                <!--/.col-->
                                              </div>
                                              <!--/.row-->
                                      </div>
                                    </div>
                                  </div><!--/.col-->
                            </div>
                              </tab>
                              <tab>
                              <ng-template tabHeading> Study Material </ng-template> 
                              <div class="row">
                              
                                  <div class="form-group col-sm-3">
                                      <label for="statusName">Status Name <span class="symbol required"></span></label>
                                      <input type="text" class="form-control" id="statusName" placeholder="Enter status name">            
                                    </div>
                                    <div class="form-group col-sm-4 saveBtn">
                                        <button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
                                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                                    </div>
                                    
                            </div>
                              <div class="row">
                
                                  <div class="col-md-12">
                                    <div class="card">
                                      <div class="card-header">
                                          <i class="fa fa-align-justify"></i> View Study Material Status
                                      </div>
                                      <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-sm-3 ">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                                    <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
                                                  </div>
                                          </div>
                                                <div class="form-group col-sm-3 ">
                                                    <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
                                                  </div>
                                                 
                                        </div><!--/.row-->
                                            <div class="row">
                                                <div class="col-lg-12 col-xs-12">
                                                  <table class="table table-bordered table-responsive table-hover">
                                                    <thead>
                                                      <tr>
                                                        <th>Status Name</th>
                                                        <th>Type</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                      </tr>
                                                    </thead>
                                                    <tbody>
                                                      <tr *ngFor="let material of studyMaterialStatus">
                                                          <td>{{material.statusName}}</td>
                                                          <td>{{material.type}}</td>
                                                          <td>
                                                            <span class="badge badge-success">{{material.status}}</span>
                                                          </td>
                                                          <td>
                                                              <a><i class="fa fa-pencil-square-o"></i></a>
                                                          </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                  <ul class="pagination">
                                                    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                                    <li class="page-item active">
                                                      <a class="page-link" href="#">1</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                                  </ul>
                                                </div>
                                                <!--/.col-->
                                              </div>
                                              <!--/.row-->
                                      </div>
                                    </div>
                                  </div><!--/.col-->
                            </div>
                              </tab>
         </tabset>
         </div>
         </div>
    </div>

    
    