<ion-header>
    <button class="nav_btn nav_back floatLeft">
        <ion-back-button>
        </ion-back-button>
    </button>
    <div class="nav_title floatLeft">
      <h4>Student Profile</h4>
    </div>
    <button class="nav_btn nav_more floatLeft" (click)="popToggle()">
    </button>
    <div class="clear"></div>
</ion-header>
<ion-content>
  <div class="detail_wrapper">
      <div *ngIf ="student_details">
    <div class="detail_circle_img">
      
      <img [src]="student_details.img_src">
    </div>
    <h4>{{student_details.first_name}} {{student_details.last_name}}</h4>
    <div class="detail_grid">
        <ion-row>
            <ion-col col>
              <p>Student Number</p>
              <h3>{{student_details.student_number}}</h3>
            </ion-col>
            <ion-col col>
                <p>Graduation Year</p>
                <h3>{{student_details.graduation_year}}</h3>
            </ion-col>
            <ion-col col>
                <p>Grade</p>
                <h3>{{student_details.grade}}</h3>
            </ion-col>
          </ion-row>
          <ion-row>
              <ion-col col>
                <p>DOB</p>
                <h3>{{student_details.dob}}</h3>
              </ion-col>
              <ion-col col>
                  <p>School Name</p>
                  <h3>{{student_details.school_name}}</h3>
              </ion-col>
              <ion-col col>
                  <p>Gender</p>
                  <h3>{{student_details.gender}}</h3>
              </ion-col>
            </ion-row>
    </div>
  </div>
    <div class="detail_listing">
      <ul>
        <li (click)="goToPage('studentsprofile')">
          <img src="../../assets/imgs/m1.png" >
          <p>Student<br> Profile</p>
        </li>
        <li (click)="goToPage('healthcareforum')">
            <img src="../../assets/imgs/m2.png">
            <p>Health care<br> form</p>
          </li>
          <li (click)="goToPage('medicalauthorization')">
              <img src="../../assets/imgs/m3.png">
              <p>Medication <br>Authorization</p>
            </li>
            <li (click)="goToPage('treatmentauthorization')">
                <img src="../../assets/imgs/m4.png">
                <p>Treatment<br> Authorization</p>
              </li>
              <li (click)="goToPage('medicationtracking')">
                  <img src="../../assets/imgs/m5.png">
                  <p>Medication<br>Trackings</p>
                </li>
                <li (click)="goToPage('treatmenttrackings')">
                    <img src="../../assets/imgs/m6.png">
                    <p>Treatment<br>Trackings</p>
                  </li>
                  <li (click)="goToPage('screenings')">
                      <img src="../../assets/imgs/m7.png">
                      <p>Screenings</p>
                    </li>
                    <li (click)="goToPage('chartvisits')">
                        <img src="../../assets/imgs/m1.png">
                        <p>Chart Visits</p>
                      </li>
                      <li (click)="goToPage('immunizations')">
                          <img src="../../assets/imgs/m8.png">
                          <p>Immunizations</p>
                        </li>
                        <li (click)="goToPage('medicalhistory')">
                            <img src="../../assets/imgs/m9.png">
                            <p>Medical History</p>
                          </li>
                          <li (click)="goToPage('healthhistory')">
                              <img src="../../assets/imgs/m10.png">
                              <p>Health History</p>
                            </li>
      </ul>
    </div>
    
  </div>

  <div class="custom_popover" *ngIf="isToggle" [@slideInOut] (click)="popToggle()">
    <div class="popover_inner">
      <ul>
        <li>
          <img src="../../assets/imgs/asset_parent_request.png">
          <p>Parent Requests</p>
          <div class="clear"></div>
        </li>
        <li>
          <img src="../../assets/imgs/asset_change_request.png">
          <p>Change Requests</p>
          <div class="clear"></div>
        </li>
      </ul>
    </div>
  </div>
</ion-content>
