<section class="ehr-section">
  <div class="section-header">
    <h2>Electronic Health Records</h2>
    <p>Clinical data synchronized from your care team</p>
  </div>

  <div class="card" *ngIf="latestVitalSigns">
    <h3>Latest Vital Signs</h3>
    <div class="vital-signs-grid">
      <div *ngIf="latestVitalSigns.temperature" class="vital-item">
        <label>Temperature</label>
        <span>{{ latestVitalSigns.temperature }}°C</span>
      </div>
      <div *ngIf="latestVitalSigns.bloodPressureSystolic" class="vital-item">
        <label>Blood Pressure</label>
        <span>{{ latestVitalSigns.bloodPressureSystolic }}/{{ latestVitalSigns.bloodPressureDiastolic }} mmHg</span>
      </div>
      <div *ngIf="latestVitalSigns.heartRate" class="vital-item">
        <label>Heart Rate</label>
        <span>{{ latestVitalSigns.heartRate }} bpm</span>
      </div>
      <div *ngIf="latestVitalSigns.bmi" class="vital-item">
        <label>BMI</label>
        <span>{{ latestVitalSigns.bmi | number: '1.1-1' }}</span>
      </div>
    </div>
    <p class="timestamp">Recorded: {{ formatDateFn(latestVitalSigns.recordedAt) }}</p>
  </div>

  <div class="card">
    <h3>Medical Records</h3>
    <div *ngIf="medicalRecords.length === 0" class="empty-state">No medical records found</div>
    <div *ngFor="let record of medicalRecords" class="record-item">
      <div class="record-header">
        <span class="record-type">{{ record.recordType }}</span>
        <span class="record-date">{{ formatDateFn(record.createdAt) }}</span>
      </div>
      <h4>{{ record.title }}</h4>
      <p>{{ record.content }}</p>
      <div *ngIf="record.diagnosisCode" class="diagnosis-code">ICD-10: {{ record.diagnosisCode }}</div>
    </div>
  </div>

  <div class="card">
    <h3>Lab Results</h3>
    <div *ngIf="labResults.length === 0" class="empty-state">No lab results found</div>
    <div *ngFor="let lab of labResults" class="lab-item">
      <div class="lab-header">
        <span class="lab-name">{{ lab.testName }}</span>
        <span class="lab-status" [class]="'status-' + lab.status.toLowerCase()">{{ lab.status }}</span>
      </div>
      <div class="lab-result">{{ lab.resultValue }} {{ lab.unit }}</div>
      <div *ngIf="lab.referenceRange" class="lab-reference">Normal: {{ lab.referenceRange }}</div>
      <p class="timestamp">Ordered: {{ formatDateFn(lab.orderedDate) }}</p>
    </div>
  </div>
</section>

