<ion-header>
    <button class="nav_btn nav_back floatLeft">
    <ion-back-button>
    </ion-back-button>
    </button>
    <div class="nav_title floatLeft">
    <h4>Screenings</h4>
    </div>
    <div class="clear"></div>
   </ion-header>
   <ion-content>
    <div class="list_wrapper">
    <ul>
    <li>
    <div class="list_main" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
    <div class="col-10 floatLeft">
    <h3><strong>Scoliosis Screenings</strong></h3>
    </div>
    <div class="clear"></div>
    </div>
    <div class="list_sub" *ngIf="isGroupShown(0)">
      <div class="list_sub_inner" *ngFor = "let medical of scoliosis_screenings_data ">
          <div class="list_bar">
              <div class="col floatLeft">
              <p>Student Number</p>
              <h3>{{medical.student_number}}</h3>
              </div>
              <div class="col floatLeft borderNone">
              <p>Date Screening Provided</p>
              <h3>{{medical.date}}</h3>
              </div>
               <div class="clear"></div>
              </div>
              <div class="list_bar">
              <div class="col floatLeft">
              <p>Screening Outcome</p>
              <h3>{{medical.outcome}}</h3>
              </div>
              <div class="col floatLeft borderNone">
              <p>Note</p>
              <h3>Test</h3>
              </div>
              <div class="clear"></div>
              </div>
              <div class="list_bar">
                <div class="col floatLeft">
                <p>Action</p>
                <h3></h3>
                </div>
               
                <div class="clear"></div>
                </div>
      </div>
      <hr>
      <!-- <div class="list_sub_inner">
          <div class="list_bar">
              <div class="col floatLeft">
              <p>Name of Medicine</p>
              <h3>Potassium Chloride</h3>
              </div>
              <div class="col floatLeft borderNone">
              <p>TDosage Units</p>
              <h3>2 Days</h3>
              </div>
               <div class="clear"></div>
              </div>
              <div class="list_bar">
              <div class="col floatLeft">
              <p>Times Per Day</p>
              <h3>06/11/2019 11:00 AM</h3>
              </div>
              <div class="col floatLeft borderNone">
              <p>Times Per Day</p>
              <h3>20</h3>
              </div>
              <div class="clear"></div>
              </div>
              <div class="list_bar">
                <div class="col floatLeft">
                <p>Action</p>
                <h3>06/11/2019 11:00 AM</h3>
                </div>
               
                <div class="clear"></div>
                </div>
      </div> -->
    
    </div>
    </li>
    <li>
    <div class="list_main" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
    <div class="col-10 floatLeft">
    <h3><strong>Vision Screenings</strong></h3>
    </div>
    <div class="clear"></div>
    </div>
    <div class="list_sub" *ngIf="isGroupShown(1)">
        <div class="list_sub_inner" *ngFor = "let medical_log of vision_screenings_data ">
    <div class="list_bar">
    <div class="col floatLeft">
    <p>Student Number</p>
    <h3>{{medical_log.student_number}}</h3>
    </div>
    <div class="col floatLeft borderNone">
    <p>Vision Aid</p>
    <h3>{{medical_log.vison}}</h3>
    </div>
    <div class="clear"></div>
    </div>
    <div class="list_bar">
    <div class="col floatLeft">
    <p>Left Eye Result</p>
    <h3>{{medical_log.left_eye_result}}</h3>
    </div>
    <div class="col floatLeft borderNone">
    <p>Right Eye Result</p>
    <h3>{{medical_log.right_eye_result}}</h3>
    </div>
    <div class="clear"></div>
    </div>
    <div class="list_bar">
        <div class="col floatLeft">
        <p>Screenig Outcome</p>
        <h3>{{medical_log.outcome}}</h3>
        </div>
        <div class="col floatLeft borderNone">
        <p>Note</p>
        <h3>Test</h3>
        </div>
        <div class="clear"></div>
        </div>
        <div class="list_bar">
            <div class="col floatLeft">
            <p>Action</p>
            <!-- <h3></h3> -->
            </div>
            <!-- <div class="col floatLeft borderNone">
            <p>Action</p>
            <h3></h3>
            </div> -->
            <div class="clear"></div>
            </div>
    </div>
    <hr>
    </div>
    </li>
    </ul>
    </div>
   </ion-content>
   