<div class="animated fadeIn">
    <!--/.row-->
    <div class="row">
     <!--/.col-->
     <div class="col-md-12 mb-4">
      <!-- Nav tabs -->
      <tabset>
        <tab>
          <ng-template tabHeading> View Session</ng-template> 
          <div class="row">

                <div class="col-md-12">
                  <div class="card">
                    <div class="card-header">
                        <i class="fa fa-align-justify"></i> View Session Details
                    </div>
                    <div class="card-body">
                      <div class="row">
                          <div class="form-group col-sm-4 ">
                              <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>Session Name</th>
                                      <th>Session Date</th>
                                      <th>Status</th>
                                      <th>Action</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                        <td>Jul-2018	</td>
                                      <td>20-07-2018</td>
                                      <td>
                                          <span class="badge badge-success">Active</span>
                                        </td>
                                      <td>
                                          <a><i class="fa fa-pencil-square-o"></i></a> &nbsp;
                                          <a (click)="viewSessionModal.show()"><i class="fa fa-eye"></i></a>
                                      </td>
                                    </tr>
                                    <tr>
                                        <td>June-2018	</td>
                                      <td>20-06-2018</td>
                                      <td>
                                          <span class="badge badge-success">Active</span>
                                        </td>
                                      <td>
                                          <a><i class="fa fa-pencil-square-o"></i></a> &nbsp;
                                          <a (click)="viewSessionModal.show()"><i class="fa fa-eye"></i></a>
                                      </td>
                                    </tr>
                                    <tr>
                                        <td>Apr-2018	</td>
                                      <td>20-05-2018</td>
                                      <td>
                                          <span class="badge badge-success">Active</span>
                                        </td>
                                      <td>
                                          <a><i class="fa fa-pencil-square-o"></i></a> &nbsp;
                                          <a (click)="viewSessionModal.show()"><i class="fa fa-eye"></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> Add Session</ng-template>
          <div class="col-md-12">
              <form action="" method="post" class="form-horizontal">
                  <div class="form-group row">
                      <div class="col-md-12">
                      <div class="card">
                          <div class="card-header">
                              <i class="fa fa-align-justify"></i> Add Session Details
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="form-group col-sm-4">
                                        <label for="effectivefrom">Session Date <span class="symbol required"></span></label>
                                        <input type="date" class="form-control" id="sessionDate" placeholder="dd-mm-yyyy">            
                                      </div>
                                      <div class="form-group col-sm-4">
                                          <label for="sessionName">Session Name <span class="symbol required"></span></label>
                                          <input type="text" class="form-control" id="sessionName" placeholder="Enter session name">            </div>
                      <div class="form-group col-sm-4">
                          <label for="adduniversity">University <span class="symbol required"></span></label>
                          <select class="form-control" id="adduniversity">
                            <option>Select Multiple University</option>
                            <option>Anna University</option>
                            <option>SRM University</option>
                            <option>Karpagam University</option>
                            <option>Hindustan University</option>
                          </select>
                        </div>
                    
                        </div>
                        </div>
                        <div class="card-footer">
              
                            <div class="col-lg-12 col-xs-12 endBtn" align="right">
                                <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>
                        </div>
                  </div>
                </form>
          </div>    </tab>
      </tabset>
    </div><!--/.col-->
    </div>
    <!--/.row-->
    </div>
    <!-- view session modal-->
<div bsModal #viewSessionModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Session University Details</h5>
          <button type="button btn-dark" class="close" (click)="viewSessionModal.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-lg-12 col-xs-12">
                  <table class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>University ID</th>
                        <th>University Name</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>CHE002</td>
                        <td>
                          <span>Anna University</span>
                        </td>
                      </tr>
                      <tr>
                          <td>CBE2200</td>
                          <td>
                            <span>Karpagam University</span>
                          </td>
                        </tr>
                        
                    </tbody>
                  </table>
                </div>
                <!--/.col-->
                
              </div>
              <!--/.row-->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" (click)="viewSessionModal.hide()">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
  <!-- end session  modal -->

    
    