<ion-header>
  <div class="nav_title floatLeft">
    <h4>Students Details</h4>
  </div>
  <button class="nav_btn floatRight" (click)="logout()">
      <ion-icon name="log-out" ></ion-icon>
  </button>
  <div class="clear"></div>
</ion-header>
<ion-content>
  <div class="list_wrapper">
    <ul *ngIf="student_data">
      <li (click)="goToPage('details','1')">
        <div class="image_div">
         
            <img src="../../assets/imgs/asset_img1.png">
        </div>
        <div class="other_details">
          <div class="col_div">
            <p>First Name</p>
            <h3><strong>{{student_data[0].first_name}}</strong></h3>
            <p>Last Name</p>
            <h3>{{student_data[0].last_name}}</h3>
          </div>
          <div class="col_div borderNone">
              <p>Student Number</p>
              <h3>{{student_data[0].student_number}}</h3>
            
              <p>School Name</p>
              <h3>{{student_data[0].school_name}}</h3>
          </div>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </li>
      <li (click)="goToPage('details','2')">
          <div class="image_div">
              <img src="../../assets/imgs/asset_img2.png">
          </div>
          <div class="other_details">
            <div class="col_div">
              <p>First Name</p>
              <h3><strong>{{student_data[1].first_name}}</strong></h3>
              <p>Last Name</p>
              <h3>{{student_data[1].last_name}}</h3>
            </div>
            <div class="col_div borderNone">
                <p>Student Number</p>
                <h3>{{student_data[1].student_number}}</h3>
              
                <p>School Name</p>
                <h3>{{student_data[1].school_name}}</h3>
            </div>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </li>
        <li (click)="goToPage('details','3')">
            <div class="image_div">
                <img src="../../assets/imgs/asset_img3.png">
            </div>
            <div class="other_details">
              <div class="col_div">
                <p>First Name</p>
                <h3><strong>{{student_data[2].first_name}}</strong></h3>
                <p>Last Name</p>
                <h3>{{student_data[2].last_name}}</h3>
              </div>
              <div class="col_div borderNone">
                  <p>Student Number</p>
                  <h3>{{student_data[2].student_number}}</h3>
                
                  <p>School Name</p>
                  <h3>{{student_data[2].school_name}}</h3>
              </div>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </li>
    </ul>
  </div>
   
</ion-content>
