<section class="ehr-section">
  <!-- Header -->
  <div class="section-header">
    <div>
      <h2 class="section-title">EHR Management</h2>
      <p class="section-description">Manage electronic health records for your patients</p>
    </div>
    <div class="header-actions">
      <button class="secondary-button" (click)="toggleRecordsView()">
        {{ showAllRecords ? 'Show Patient Specific' : 'Show All Records' }}
      </button>
    </div>
  </div>

  <!-- Error Message -->
  <div class="error-message" *ngIf="error">
    <strong>Error:</strong> {{ error }}
    <button type="button" (click)="error = null">&times;</button>
  </div>

  <!-- Patient Selection -->
  <div class="card" *ngIf="!showAllRecords">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
      <div>
        <h3 style="margin: 0;">Select Patient</h3>
        <p class="section-description" style="margin: 0.5rem 0 0 0;">Choose a patient to view their EHR records, vital signs, and lab results.</p>
      </div>
      <button *ngIf="localSelectedPatientId" class="secondary-button" (click)="selectPatient(null)" style="margin-left: 1rem;">
        Clear Selection
      </button>
    </div>
    
    <!-- Patient Search -->
    <div class="form-group" style="margin-bottom: 1rem;">
      <label class="form-label">Search Patient</label>
      <div style="position: relative;">
        <input 
          type="text" 
          [(ngModel)]="patientSearchQuery" 
          (input)="onPatientSearchChange()"
          class="form-input" 
          placeholder="Search by name or email..."
          style="padding-right: 2.5rem;">
        <button 
          *ngIf="patientSearchQuery" 
          type="button"
          (click)="clearPatientSearch()"
          style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.25rem; color: #666;"
          title="Clear search">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1rem; height: 1rem;">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <svg 
          *ngIf="!patientSearchQuery"
          viewBox="0 0 24 24" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg" 
          style="position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #999; pointer-events: none;">
          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
    
    <!-- Patient Dropdown -->
    <div class="form-group">
      <label class="form-label">Select Patient</label>
      <select [(ngModel)]="localSelectedPatientId" (change)="selectPatient(localSelectedPatientId)" class="form-input">
        <option [value]="null">-- Select a Patient --</option>
        <option *ngFor="let patient of filteredPatients" [value]="patient.id">
          {{ patient.firstName }} {{ patient.lastName }}
          <span *ngIf="patient.email"> ({{ patient.email }})</span>
        </option>
      </select>
      <p *ngIf="patientSearchQuery && filteredPatients.length === 0" style="margin-top: 0.5rem; color: #666; font-size: 0.875rem;">
        No patients found matching "{{ patientSearchQuery }}"
      </p>
      <p *ngIf="!patientSearchQuery && filteredPatients.length === 0" style="margin-top: 0.5rem; color: #666; font-size: 0.875rem;">
        No patients available
      </p>
    </div>
  </div>

  <!-- Current Patient Info -->
  <div class="card patient-info-card" *ngIf="localSelectedPatientId && !showAllRecords">
    <div class="patient-info-header">
      <div>
        <h3>Current Patient</h3>
        <p *ngFor="let patient of patients">
          <strong *ngIf="patient.id === localSelectedPatientId">{{ patient.firstName }} {{ patient.lastName }}</strong>
        </p>
      </div>
      <button class="view-profile-btn" (click)="viewPatientProfile(localSelectedPatientId!)" title="View Full Patient Profile">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2.45825 12C3.73203 7.94291 7.52281 5 12.0004 5C16.4781 5 20.2689 7.94291 21.5427 12C20.2689 16.0571 16.4781 19 12.0004 19C7.52281 19 3.73203 16.0571 2.45825 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        View Full Profile
      </button>
    </div>
  </div>

  <!-- Loading State -->
  <div class="loading-container" *ngIf="loading">
    <div class="spinner-wrapper">
      <svg class="spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="32">
          <animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
          <animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
        </circle>
      </svg>
      <p>Loading...</p>
    </div>
  </div>

  <!-- Tabs Navigation -->
  <div class="ehr-tabs" *ngIf="!loading && (localSelectedPatientId || showAllRecords)">
    <button class="tab-button" [class.active]="activeTab === 'records'" (click)="activeTab = 'records'">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Medical Records
      <span class="badge" *ngIf="getCurrentRecords().length > 0">{{ getCurrentRecords().length }}</span>
    </button>
    <button class="tab-button" [class.active]="activeTab === 'vitals'" (click)="activeTab = 'vitals'" *ngIf="localSelectedPatientId && !showAllRecords">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2V22M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6312 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6312 13.6815 18 14.5717 18 15.5C18 16.4283 17.6312 17.3185 16.9749 17.9749C16.3185 18.6312 15.4283 19 14.5 19H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Vital Signs
      <span class="badge" *ngIf="vitalSigns.length > 0">{{ vitalSigns.length }}</span>
    </button>
    <button class="tab-button" [class.active]="activeTab === 'labResults'" (click)="activeTab = 'labResults'" *ngIf="localSelectedPatientId && !showAllRecords">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Lab Results
      <span class="badge" *ngIf="labResults.length > 0">{{ labResults.length }}</span>
    </button>
  </div>

  <!-- Medical Records Tab -->
  <div class="tab-content" *ngIf="activeTab === 'records' && !loading">
    <!-- Create/Edit Medical Record Form -->
    <div class="card" *ngIf="showCreateMedicalRecord">
      <h3>{{ isUpdatingMedicalRecord() ? 'Update' : 'Create' }} Medical Record</h3>
      <form (ngSubmit)="createMedicalRecord()">
        <div class="form-group" *ngIf="showAllRecords || !localSelectedPatientId">
          <label class="form-label">Patient <span class="required-asterisk">*</span></label>
          <select [(ngModel)]="newMedicalRecord.patientId" name="patientId" required class="form-input">
            <option [value]="''">Select Patient</option>
            <option *ngFor="let patient of patients" [value]="patient.id">
              {{ patient.firstName }} {{ patient.lastName }}
            </option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Record Type</label>
          <select [(ngModel)]="newMedicalRecord.recordType" name="recordType" class="form-input">
            <option value="NOTE">Note</option>
            <option value="DIAGNOSIS">Diagnosis</option>
            <option value="TREATMENT_PLAN">Treatment Plan</option>
            <option value="PROCEDURE">Procedure</option>
            <option value="IMAGING">Imaging</option>
            <option value="OTHER">Other</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Title <span class="required-asterisk">*</span></label>
          <input type="text" [(ngModel)]="newMedicalRecord.title" name="title" required class="form-input" placeholder="Enter record title">
        </div>
        <div class="form-group">
          <label class="form-label">Content <span class="required-asterisk">*</span></label>
          <textarea [(ngModel)]="newMedicalRecord.content" name="content" required class="form-input form-textarea" rows="6" placeholder="Enter record content"></textarea>
        </div>
          <div class="form-group">
            <label class="form-label">Diagnosis Code</label>
            <input type="text" [(ngModel)]="newMedicalRecord.diagnosisCode" name="diagnosisCode" class="form-input" placeholder="e.g., ICD-10 code">
          </div>
          <div class="form-actions">
            <button type="button" (click)="cancelMedicalRecordForm()">Cancel</button>
            <button type="submit" [disabled]="loading">Save Record</button>
          </div>
        </form>
    </div>

    <!-- Medical Records List -->
    <div class="card" *ngIf="!showCreateMedicalRecord">
      <div class="card-header">
        <h3>{{ showAllRecords ? 'All Medical Records' : 'Patient Medical Records' }} ({{ getCurrentRecords().length }})</h3>
        <button class="primary-button" (click)="openCreateMedicalRecord()">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Create Record
        </button>
      </div>
      <div class="medical-records-list" *ngIf="getCurrentRecords().length > 0">
        <div *ngFor="let record of getCurrentRecords()" class="medical-record-card">
          <div class="record-header">
            <div>
              <h4>{{ record.title }}</h4>
              <div class="record-meta">
                <span class="record-type">{{ record.recordType }}</span>
                <span class="record-date">{{ formatDateTime(record.createdAt) }}</span>
              </div>
            </div>
            <div class="record-actions">
              <button class="icon-button" (click)="editMedicalRecord(record)" title="Edit">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <button class="icon-button delete-button" (click)="deleteMedicalRecord(record.id)" title="Delete">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
          <div class="record-content">
            <p>{{ record.content }}</p>
            <div class="record-details" *ngIf="record.diagnosisCode || record.patientName || record.doctorName">
              <div class="detail-row" *ngIf="record.diagnosisCode">
                <span class="detail-label">Diagnosis Code:</span>
                <span class="detail-value">{{ record.diagnosisCode }}</span>
              </div>
              <div class="detail-row" *ngIf="showAllRecords">
                <span class="detail-label">Patient:</span>
                <span class="detail-value">{{ record.patientName || record.patientId }}</span>
              </div>
              <div class="detail-row" *ngIf="record.doctorName">
                <span class="detail-label">Doctor:</span>
                <span class="detail-value">{{ record.doctorName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="empty-state" *ngIf="getCurrentRecords().length === 0">
        <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M14 2V8H20M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <h3>No Medical Records</h3>
        <p *ngIf="!localSelectedPatientId && !showAllRecords">Select a patient or view all records to see medical records.</p>
        <p *ngIf="localSelectedPatientId || showAllRecords">No medical records found. Create your first record to get started.</p>
        <button class="primary-button" (click)="openCreateMedicalRecord()" *ngIf="localSelectedPatientId || showAllRecords">
          Create First Record
        </button>
      </div>
    </div>
  </div>

  <!-- Vital Signs Tab -->
  <div class="tab-content" *ngIf="activeTab === 'vitals' && localSelectedPatientId && !showAllRecords && !loading">
    <!-- Latest Vital Signs Summary -->
    <div class="card" *ngIf="latestVitalSigns">
      <h3>Latest Vital Signs</h3>
      <div class="vital-signs-summary">
        <div class="vital-sign-item" *ngIf="latestVitalSigns.temperature">
          <span class="vital-label">Temperature</span>
          <span class="vital-value">{{ latestVitalSigns.temperature }}°F</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.bloodPressureSystolic">
          <span class="vital-label">Blood Pressure</span>
          <span class="vital-value">{{ latestVitalSigns.bloodPressureSystolic }}/{{ latestVitalSigns.bloodPressureDiastolic }} mmHg</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.heartRate">
          <span class="vital-label">Heart Rate</span>
          <span class="vital-value">{{ latestVitalSigns.heartRate }} bpm</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.respiratoryRate">
          <span class="vital-label">Respiratory Rate</span>
          <span class="vital-value">{{ latestVitalSigns.respiratoryRate }} /min</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.oxygenSaturation">
          <span class="vital-label">O2 Saturation</span>
          <span class="vital-value">{{ latestVitalSigns.oxygenSaturation }}%</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.weight">
          <span class="vital-label">Weight</span>
          <span class="vital-value">{{ latestVitalSigns.weight }} lbs</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.height">
          <span class="vital-label">Height</span>
          <span class="vital-value">{{ latestVitalSigns.height }} in</span>
        </div>
        <div class="vital-sign-item" *ngIf="latestVitalSigns.bmi">
          <span class="vital-label">BMI</span>
          <span class="vital-value">{{ latestVitalSigns.bmi | number:'1.1-1' }}</span>
        </div>
      </div>
      <p class="vital-date">Recorded: {{ formatDateTime(latestVitalSigns.recordedAt) }}</p>
    </div>

    <!-- Create Vital Signs Form -->
    <div class="card" *ngIf="showCreateVitalSigns">
      <h3>Record Vital Signs</h3>
      <form (ngSubmit)="createVitalSigns()">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Temperature (°F)</label>
            <input type="number" step="0.1" [(ngModel)]="newVitalSigns.temperature" name="temperature" class="form-input" placeholder="98.6">
          </div>
          <div class="form-group">
            <label class="form-label">Blood Pressure Systolic (mmHg)</label>
            <input type="number" [(ngModel)]="newVitalSigns.bloodPressureSystolic" name="bloodPressureSystolic" class="form-input" placeholder="120">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Blood Pressure Diastolic (mmHg)</label>
            <input type="number" [(ngModel)]="newVitalSigns.bloodPressureDiastolic" name="bloodPressureDiastolic" class="form-input" placeholder="80">
          </div>
          <div class="form-group">
            <label class="form-label">Heart Rate (bpm)</label>
            <input type="number" [(ngModel)]="newVitalSigns.heartRate" name="heartRate" class="form-input" placeholder="72">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Respiratory Rate (/min)</label>
            <input type="number" [(ngModel)]="newVitalSigns.respiratoryRate" name="respiratoryRate" class="form-input" placeholder="16">
          </div>
          <div class="form-group">
            <label class="form-label">O2 Saturation (%)</label>
            <input type="number" step="0.1" [(ngModel)]="newVitalSigns.oxygenSaturation" name="oxygenSaturation" class="form-input" placeholder="98">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Weight (lbs)</label>
            <input type="number" step="0.1" [(ngModel)]="newVitalSigns.weight" name="weight" class="form-input" placeholder="150">
          </div>
          <div class="form-group">
            <label class="form-label">Height (in)</label>
            <input type="number" step="0.1" [(ngModel)]="newVitalSigns.height" name="height" class="form-input" placeholder="70">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Notes</label>
          <textarea [(ngModel)]="newVitalSigns.notes" name="notes" class="form-input form-textarea" rows="3" placeholder="Additional notes"></textarea>
        </div>
        <div class="form-actions">
          <button type="button" (click)="showCreateVitalSigns = false">Cancel</button>
          <button type="submit" [disabled]="loading">Save Vital Signs</button>
        </div>
      </form>
    </div>

    <!-- Vital Signs History -->
    <div class="card" *ngIf="!showCreateVitalSigns">
      <div class="card-header">
        <h3>Vital Signs History ({{ vitalSigns.length }})</h3>
        <button class="primary-button" (click)="openCreateVitalSigns()">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Record Vital Signs
        </button>
      </div>
      <div class="vital-signs-list" *ngIf="vitalSigns.length > 0">
        <div *ngFor="let vital of vitalSigns" class="vital-signs-card">
          <div class="vital-header">
            <span class="vital-date">{{ formatDateTime(vital.recordedAt) }}</span>
            <button class="icon-button delete-button" (click)="deleteVitalSigns(vital.id)" title="Delete">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
          <div class="vital-signs-grid">
            <div class="vital-item" *ngIf="vital.temperature">
              <span class="vital-label">Temp:</span>
              <span class="vital-value">{{ vital.temperature }}°F</span>
            </div>
            <div class="vital-item" *ngIf="vital.bloodPressureSystolic">
              <span class="vital-label">BP:</span>
              <span class="vital-value">{{ vital.bloodPressureSystolic }}/{{ vital.bloodPressureDiastolic }} mmHg</span>
            </div>
            <div class="vital-item" *ngIf="vital.heartRate">
              <span class="vital-label">HR:</span>
              <span class="vital-value">{{ vital.heartRate }} bpm</span>
            </div>
            <div class="vital-item" *ngIf="vital.respiratoryRate">
              <span class="vital-label">RR:</span>
              <span class="vital-value">{{ vital.respiratoryRate }} /min</span>
            </div>
            <div class="vital-item" *ngIf="vital.oxygenSaturation">
              <span class="vital-label">O2 Sat:</span>
              <span class="vital-value">{{ vital.oxygenSaturation }}%</span>
            </div>
            <div class="vital-item" *ngIf="vital.weight">
              <span class="vital-label">Weight:</span>
              <span class="vital-value">{{ vital.weight }} lbs</span>
            </div>
            <div class="vital-item" *ngIf="vital.height">
              <span class="vital-label">Height:</span>
              <span class="vital-value">{{ vital.height }} in</span>
            </div>
            <div class="vital-item" *ngIf="vital.bmi">
              <span class="vital-label">BMI:</span>
              <span class="vital-value">{{ vital.bmi | number:'1.1-1' }}</span>
            </div>
          </div>
          <div class="vital-notes" *ngIf="vital.notes">
            <p><strong>Notes:</strong> {{ vital.notes }}</p>
          </div>
        </div>
      </div>
      <div class="empty-state" *ngIf="vitalSigns.length === 0">
        <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2V22M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6312 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6312 13.6815 18 14.5717 18 15.5C18 16.4283 17.6312 17.3185 16.9749 17.9749C16.3185 18.6312 15.4283 19 14.5 19H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <h3>No Vital Signs Records</h3>
        <p>No vital signs have been recorded for this patient yet.</p>
        <button class="primary-button" (click)="openCreateVitalSigns()">Record First Vital Signs</button>
      </div>
    </div>
  </div>

  <!-- Lab Results Tab -->
  <div class="tab-content" *ngIf="activeTab === 'labResults' && localSelectedPatientId && !showAllRecords && !loading">
    <!-- Create/Edit Lab Result Form -->
    <div class="card" *ngIf="showCreateLabResult">
      <h3>{{ isUpdatingLabResult() ? 'Update' : 'Create' }} Lab Result</h3>
      <form (ngSubmit)="createLabResult()">
        <div class="form-group">
          <label class="form-label">Test Name <span class="required-asterisk">*</span></label>
          <input type="text" [(ngModel)]="newLabResult.testName" name="testName" required class="form-input" placeholder="e.g., Complete Blood Count">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Result Value <span class="required-asterisk">*</span></label>
            <input type="text" [(ngModel)]="newLabResult.resultValue" name="resultValue" required class="form-input" placeholder="Enter result value">
          </div>
          <div class="form-group">
            <label class="form-label">Unit</label>
            <input type="text" [(ngModel)]="newLabResult.unit" name="unit" class="form-input" placeholder="e.g., mg/dL">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Reference Range</label>
            <input type="text" [(ngModel)]="newLabResult.referenceRange" name="referenceRange" class="form-input" placeholder="e.g., 70-100">
          </div>
          <div class="form-group">
            <label class="form-label">Status</label>
            <select [(ngModel)]="newLabResult.status" name="status" class="form-input">
              <option value="PENDING">Pending</option>
              <option value="NORMAL">Normal</option>
              <option value="ABNORMAL">Abnormal</option>
              <option value="CRITICAL">Critical</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Ordered Date</label>
            <input type="date" [(ngModel)]="newLabResult.orderedDate" name="orderedDate" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">Result Date</label>
            <input type="date" [(ngModel)]="newLabResult.resultDate" name="resultDate" class="form-input">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Notes</label>
          <textarea [(ngModel)]="newLabResult.notes" name="notes" class="form-input form-textarea" rows="3" placeholder="Additional notes"></textarea>
        </div>
        <div class="form-actions">
          <button type="button" (click)="cancelLabResultForm()">Cancel</button>
          <button type="submit" [disabled]="loading">Save Lab Result</button>
        </div>
      </form>
    </div>

    <!-- Lab Results List -->
    <div class="card" *ngIf="!showCreateLabResult">
      <div class="card-header">
        <h3>Lab Results ({{ labResults.length }})</h3>
        <button class="primary-button" (click)="openCreateLabResult()">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Add Lab Result
        </button>
      </div>
      <div class="lab-results-list" *ngIf="labResults.length > 0">
        <div *ngFor="let result of labResults" class="lab-result-card">
          <div class="lab-result-header">
            <div>
              <h4>{{ result.testName }}</h4>
              <div class="lab-result-meta">
                <span class="lab-status" [class]="'status-' + result.status.toLowerCase()">{{ result.status }}</span>
                <span class="lab-date">Ordered: {{ formatDate(result.orderedDate) }}</span>
              </div>
            </div>
            <div class="lab-result-actions">
              <button class="icon-button" (click)="editLabResult(result)" title="Edit">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <button class="icon-button delete-button" (click)="deleteLabResult(result.id)" title="Delete">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
          <div class="lab-result-content">
            <div class="lab-result-value">
              <strong>Result:</strong> {{ result.resultValue }} <span *ngIf="result.unit">{{ result.unit }}</span>
            </div>
            <div class="lab-result-details">
              <div class="detail-row" *ngIf="result.referenceRange">
                <span class="detail-label">Reference Range:</span>
                <span class="detail-value">{{ result.referenceRange }}</span>
              </div>
              <div class="detail-row" *ngIf="result.resultDate">
                <span class="detail-label">Result Date:</span>
                <span class="detail-value">{{ formatDate(result.resultDate) }}</span>
              </div>
              <div class="detail-row" *ngIf="result.notes">
                <span class="detail-label">Notes:</span>
                <span class="detail-value">{{ result.notes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="empty-state" *ngIf="labResults.length === 0">
        <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <h3>No Lab Results</h3>
        <p>No lab results have been recorded for this patient yet.</p>
        <button class="primary-button" (click)="openCreateLabResult()">Add First Lab Result</button>
      </div>
    </div>
  </div>
</section>

<!-- Patient Profile Modal -->
<div class="modal-overlay" *ngIf="showPatientProfileModal" (click)="closePatientProfileModal()">
  <div class="modal-content profile-modal" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <h2>{{ selectedPatientProfile?.firstName }} {{ selectedPatientProfile?.lastName }} - Full Profile</h2>
      <button class="modal-close" (click)="closePatientProfileModal()">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <div class="modal-body" *ngIf="selectedPatientProfile">
      <div class="profile-full-view">
        <!-- Basic Info -->
        <div class="profile-section">
          <h3>Basic Information</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">Full Name:</span>
              <span class="info-value">{{ selectedPatientProfile.firstName }} {{ selectedPatientProfile.lastName }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.email">
              <span class="info-label">Email:</span>
              <span class="info-value">{{ selectedPatientProfile.email }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">Phone:</span>
              <span class="info-value">{{ selectedPatientProfile.phoneNumber }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.dateOfBirth">
              <span class="info-label">Date of Birth:</span>
              <span class="info-value">{{ formatDate(selectedPatientProfile.dateOfBirth) }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.gender">
              <span class="info-label">Gender:</span>
              <span class="info-value">{{ selectedPatientProfile.gender }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.bloodType">
              <span class="info-label">Blood Type:</span>
              <span class="info-value">{{ selectedPatientProfile.bloodType }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.maritalStatus">
              <span class="info-label">Marital Status:</span>
              <span class="info-value">{{ selectedPatientProfile.maritalStatus }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.occupation">
              <span class="info-label">Occupation:</span>
              <span class="info-value">{{ selectedPatientProfile.occupation }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.preferredLanguage">
              <span class="info-label">Preferred Language:</span>
              <span class="info-value">{{ selectedPatientProfile.preferredLanguage }}</span>
            </div>
          </div>
        </div>

        <!-- Address -->
        <div class="profile-section" *ngIf="selectedPatientProfile.streetAddress || selectedPatientProfile.city">
          <h3>Address</h3>
          <div class="info-grid">
            <div class="info-item" *ngIf="selectedPatientProfile.streetAddress">
              <span class="info-label">Street:</span>
              <span class="info-value">{{ selectedPatientProfile.streetAddress }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.city">
              <span class="info-label">City:</span>
              <span class="info-value">{{ selectedPatientProfile.city }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.state">
              <span class="info-label">State:</span>
              <span class="info-value">{{ selectedPatientProfile.state }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.zipCode">
              <span class="info-label">Zip Code:</span>
              <span class="info-value">{{ selectedPatientProfile.zipCode }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.country">
              <span class="info-label">Country:</span>
              <span class="info-value">{{ selectedPatientProfile.country }}</span>
            </div>
          </div>
        </div>

        <!-- Emergency Contact -->
        <div class="profile-section" *ngIf="selectedPatientProfile.emergencyContactName">
          <h3>Emergency Contact</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">Name:</span>
              <span class="info-value">{{ selectedPatientProfile.emergencyContactName }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.emergencyContactPhone">
              <span class="info-label">Phone:</span>
              <span class="info-value">{{ selectedPatientProfile.emergencyContactPhone }}</span>
            </div>
          </div>
        </div>

        <!-- Insurance -->
        <div class="profile-section" *ngIf="selectedPatientProfile.insuranceProvider">
          <h3>Insurance Information</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">Provider:</span>
              <span class="info-value">{{ selectedPatientProfile.insuranceProvider }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.insurancePolicyNumber">
              <span class="info-label">Policy Number:</span>
              <span class="info-value">{{ selectedPatientProfile.insurancePolicyNumber }}</span>
            </div>
          </div>
        </div>

        <!-- Primary Care Physician -->
        <div class="profile-section" *ngIf="selectedPatientProfile.primaryCarePhysicianName">
          <h3>Primary Care Physician</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">Name:</span>
              <span class="info-value">{{ selectedPatientProfile.primaryCarePhysicianName }}</span>
            </div>
            <div class="info-item" *ngIf="selectedPatientProfile.primaryCarePhysicianPhone">
              <span class="info-label">Phone:</span>
              <span class="info-value">{{ selectedPatientProfile.primaryCarePhysicianPhone }}</span>
            </div>
          </div>
        </div>

        <!-- Allergies -->
        <div class="profile-section" *ngIf="selectedPatientProfile.allergies && selectedPatientProfile.allergies.length > 0">
          <h3>Allergies</h3>
          <div class="tags-list">
            <span class="tag" *ngFor="let allergy of selectedPatientProfile.allergies">{{ allergy }}</span>
          </div>
        </div>

        <!-- Current Medications -->
        <div class="profile-section" *ngIf="selectedPatientProfile.currentMedications && selectedPatientProfile.currentMedications.length > 0">
          <h3>Current Medications</h3>
          <div class="tags-list">
            <span class="tag" *ngFor="let medication of selectedPatientProfile.currentMedications">{{ medication }}</span>
          </div>
        </div>

        <!-- Medical History -->
        <div class="profile-section" *ngIf="selectedPatientProfile.medicalHistorySummary">
          <h3>Medical History Summary</h3>
          <p class="biography-text">{{ selectedPatientProfile.medicalHistorySummary }}</p>
        </div>
      </div>
    </div>
  </div>
</div>
