<ion-header>
 <button class="nav_btn nav_back floatLeft">
 <ion-back-button>
 </ion-back-button>
 </button>
 <div class="nav_title floatLeft">
 <h4>Chart Visits</h4>
 </div>
 <div class="clear"></div>
</ion-header>
<ion-content>
 <div class="list_wrapper">
 <ul *ngIf="chart_details">
 <li *ngFor="let chart_data of chart_details; let i= index">
 <div class="list_main" (click)="toggleGroup(i)" [ngClass]="{active:isGroupShown(i)}">
 <div class="col floatLeft">
 <p>Office Visit Type</p>
 <h3><strong>{{chart_data.office_vist_type}}</strong></h3>
 </div>
 <!-- <div class="col floatLeft borderNone">
 <p>Expiry Date</p>
 <h3>06/12/2019</h3>
 </div> -->
 <div class="clear"></div>
 </div>
 <div class="list_sub" *ngIf="isGroupShown(i)">
 <div class="list_bar">
 <div class="col floatLeft">
 <p>Issue Visit Reason</p>
 <h3>{{chart_data.issue_visit_reason}}</h3>
 </div>
 <div class="col floatLeft borderNone">
 <p>Provider Name</p>
 <h3>{{chart_data.provider_name}}</h3>
 </div>
  <div class="clear"></div>
 </div>
 <div class="list_bar">
 <div class="col floatLeft">
 <p>Time In</p>
 <h3>{{chart_data.date_in}} {{chart_data.time_in}}</h3>
 </div>
 <div class="col floatLeft borderNone">
 <p>Time Out</p>
 <h3>{{chart_data.date_out}} {{chart_data.time_out}}</h3>
 </div>
 <div class="clear"></div>
 </div>
 
 <div class="list_bar">
    <div class="col floatLeft">
    <p>Contact with Parent</p>
    <h3>{{chart_data.contact_with_parent}}</h3>
    </div>
    <div class="col floatLeft borderNone">
    <p>Visit Outcome</p>
    <h3>{{chart_data.visit_outcome}}</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>
 <!-- </li>
 <li>
 <div class="list_main" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
 <div class="col floatLeft">
 <p>Name</p>
 <h3><strong>Medication Authorizations</strong></h3>
 </div>
 <div class="col floatLeft borderNone">
 <p>Expiry Date</p>
 <h3>06/12/2019</h3>
 </div>
 <div class="clear"></div>
 </div>
 <div class="list_sub" *ngIf="isGroupShown(1)">
 <div class="list_bar">
 <div class="col floatLeft">
 <p>Name of medicine</p>
 <h3>Potassium Chloride</h3>
 </div>
 <div class="col floatLeft borderNone">
 <p>Times Per Day</p>
 <h3>2 Days</h3>
 </div>
 <div class="clear"></div>
 </div>
 <div class="list_bar">
 <div class="col floatLeft">
 <p>Tme of first medication</p>
 <h3>06/11/2019 11:00 AM</h3>
 </div>
 <div class="col floatLeft borderNone">
 <p>Quantity Available</p>
 <h3>20</h3>
 </div>
 <div class="clear"></div>
 </div>
 </div>
 </li> -->
 </ul>
 </div>
</ion-content>
