<div class="w-full page bg-white">
  <!-- Header Section -->
  <div class="bg-black text-white px-6 py-4 flex items-center justify-between">
    <div class="flex items-center">
      <div class="text-lg font-bold mr-2">ISHP</div>
      <div class="w-6 h-4 bg-cyan-400 mr-8"></div>
    </div>
    <div class="flex space-x-8 text-sm">
      <span>Name: {{ patient_name | default('Keirstyn Moran') }}</span>
      <span>Age: {{ age | default('34') }}</span>
      <span>Height: {{ height | default('5\'4"') }}</span>
      <span>Weight: {{ weight | default('123lbs') }}</span>
      <span>Focus: {{ focus | default('Endurance') }}</span>
    </div>
  </div>

  <!-- Main Content -->
  <div class="px-8 py-6">
    <!-- Page Title -->
    <h1 class="text-3xl font-bold text-black mb-6">Cardio Metrics</h1>
    
    <!-- Active Metabolic Rate Assessment Section -->
    <h2 class="text-xl font-bold text-black mb-4">Active Metabolic Rate Assessment</h2>
    <p class="text-gray-700 text-sm mb-8">The active metabolic rate assessment is a key measure of aerobic fitness. It helps determine your specific heart rate zones and how well your body uses carbohydrates and fats as fuel while you exercise. It is also an indicator of overall health and wellbeing.</p>

    <!-- VO2 Max Section -->
    <div class="mb-8">
      <h3 class="text-xl font-bold text-black mb-4 text-center">VO2 Max - {{ vo2_max_value | default('49.5') }} ({{ vo2_max_percentile | default('100th percentile') }})</h3>
      
      <!-- VO2 Max Table -->
      <div class="mb-8">
        <table class="w-full border-collapse">
          <thead>
            <tr>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Age (F)</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Very Poor</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Poor</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Fair</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Good</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Excellent</th>
              <th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold relative">
                Superior
                <!-- Arrow indicator -->
                <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2">
                  <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-black"></div>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="bg-cyan-200 border border-gray-400 p-3 text-black font-semibold">{{ age_range | default('30-39') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ very_poor_range | default('19.0-24.1') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ poor_range | default('24.1-28.2') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ fair_range | default('28.2-32.2') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ good_range | default('32.2-35.7') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ excellent_range | default('35.7-45.8') }}</td>
              <td class="bg-gray-100 border border-gray-400 p-3 text-black text-center font-bold">{{ superior_range | default('45.8+') }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Personalized Heart Rate Zones Section -->
    <div class="mb-8">
      <h3 class="text-xl font-bold text-black mb-6 text-center">Personalized Heart Rate Zones</h3>
      
      <!-- Heart Rate Zones Table -->
      <table class="w-full border-collapse text-sm">
        <thead>
          <tr>
            <th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 1</th>
            <th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 2</th>
            <th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 3</th>
            <th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 4</th>
            <th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 5</th>
          </tr>
        </thead>
        <tbody>
          <!-- Zone Descriptions -->
          <tr>
            <td class="border border-gray-400 p-3 text-center">
              <div class="text-black font-semibold mb-1">Improves health and recovery capacity</div>
            </td>
            <td class="border border-gray-400 p-3 text-center">
              <div class="text-black font-semibold mb-1">Improves endurance and fat burning</div>
            </td>
            <td class="border border-gray-400 p-3 text-center">
              <div class="text-black font-semibold mb-1">Improves Aerobic fitness</div>
            </td>
            <td class="border border-gray-400 p-3 text-center">
              <div class="text-black font-semibold mb-1">Improves maximum performance capacity</div>
            </td>
            <td class="border border-gray-400 p-3 text-center">
              <div class="text-black font-semibold mb-1">Develops maximum performance and speed</div>
            </td>
          </tr>
          
          <!-- Heart Rate Percentages -->
          <tr>
            <td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone1_percentage | default('55-65% of Max Heart Rate') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone2_percentage | default('65-75% of Max Heart Rate') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone3_percentage | default('80-85% of Max Heart Rate') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone4_percentage | default('85-88% of Max Heart Rate') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone5_percentage | default('90% of Max Heart Rate') }}</td>
          </tr>
          
          <!-- Heart Rate BPM -->
          <tr>
            <td class="bg-red-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone1_bpm | default('81-96bpm') }}</td>
            <td class="bg-red-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone2_bpm | default('96-100bpm') }}</td>
            <td class="bg-yellow-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone3_bpm | default('100-178bpm') }}</td>
            <td class="bg-green-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone4_bpm | default('178-188bpm') }}</td>
            <td class="bg-green-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone5_bpm | default('188-198bpm') }}</td>
          </tr>
          
          <!-- Speed -->
          <tr>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black font-semibold">{{ zone1_speed | default('3.5mph') }}</div>
              <div class="text-black text-xs">{{ zone1_incline | default('2% Incline') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black font-semibold">{{ zone2_speed | default('3.5-4.0mph') }}</div>
              <div class="text-black text-xs">{{ zone2_incline | default('2% Incline') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black font-semibold">{{ zone3_speed | default('4.0-6.5mph') }}</div>
              <div class="text-black text-xs">{{ zone3_incline | default('2% Incline') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black font-semibold">{{ zone4_speed | default('6.5-7.0mph') }}</div>
              <div class="text-black text-xs">{{ zone4_incline | default('2% Incline') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black font-semibold">{{ zone5_speed | default('7.0-8.0mph') }}</div>
              <div class="text-black text-xs">{{ zone5_incline | default('2% Incline') }}</div>
            </td>
          </tr>
          
          <!-- Pace -->
          <tr>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone1_pace | default('10:39min/km Pace') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone2_pace | default('10:39-9:19min/km Pace') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone3_pace | default('9:19-5:44min/km Pace') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone4_pace | default('5:44-5:20min/km Pace') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone5_pace | default('5:20-4:40min/km Pace') }}</td>
          </tr>
          
          <!-- Average Calories -->
          <tr>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black text-xs">Avg:</div>
              <div class="text-black font-semibold">{{ zone1_calories | default('4.4kcals/minute') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black text-xs">Avg:</div>
              <div class="text-black font-semibold">{{ zone2_calories | default('5.9kcals/minute') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black text-xs">Avg:</div>
              <div class="text-black font-semibold">{{ zone3_calories | default('9.4kcals/minute') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black text-xs">Avg:</div>
              <div class="text-black font-semibold">{{ zone4_calories | default('12.5kcals/minute') }}</div>
            </td>
            <td class="border border-gray-400 p-2 text-center">
              <div class="text-black text-xs">Avg:</div>
              <div class="text-black font-semibold">{{ zone5_calories | default('12.8kcals/minute') }}</div>
            </td>
          </tr>
          
          <!-- Carb Utilization -->
          <tr>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone1_carb | default('Avg: 0.4g/min Carb Utilization') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone2_carb | default('Avg: 0.6g/min Carb Utilization') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone3_carb | default('Avg: 1.9g/min Carb Utilization') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone4_carb | default('Avg: 2.9g/min Carb Utilization') }}</td>
            <td class="border border-gray-400 p-2 text-center text-black">{{ zone5_carb | default('Avg: 3.1g/min Carb Utilization') }}</td>
          </tr>
          
          <!-- Breathing -->
          <tr>
            <td class="bg-red-200 border border-gray-400 p-2 text-center">
              <div class="text-black font-bold">{{ zone1_breaths | default('Avg: 27 breaths') }}</div>
              <div class="text-black text-xs italic">{{ zone1_breath_range | default('Ideal Range: 15-20 breaths') }}</div>
            </td>
            <td class="bg-red-200 border border-gray-400 p-2 text-center">
              <div class="text-black font-bold">{{ zone2_breaths | default('Avg: 28 breaths') }}</div>
              <div class="text-black text-xs italic">{{ zone2_breath_range | default('Ideal Range: 20-25 breaths') }}</div>
            </td>
            <td class="bg-yellow-200 border border-gray-400 p-2 text-center">
              <div class="text-black font-bold">{{ zone3_breaths | default('Avg: 31 breaths') }}</div>
              <div class="text-black text-xs italic">{{ zone3_breath_range | default('Ideal Range: 25-30 breaths') }}</div>
            </td>
            <td class="bg-green-200 border border-gray-400 p-2 text-center">
              <div class="text-black font-bold">{{ zone4_breaths | default('Avg: 42 breaths') }}</div>
              <div class="text-black text-xs italic">{{ zone4_breath_range | default('Ideal Range: 30-35 breaths') }}</div>
            </td>
            <td class="bg-green-200 border border-gray-400 p-2 text-center">
              <div class="text-black font-bold">{{ zone5_breaths | default('Avg: 51 breaths') }}</div>
              <div class="text-black text-xs italic">{{ zone5_breath_range | default('Ideal Range: 40+ breaths') }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Footer Section -->
  <div class="absolute bottom-0 left-0 right-0 bg-black text-white px-6 py-3">
    <div class="flex justify-between items-center text-sm">
      <div class="flex space-x-8">
        <span>CONTACT: {{ contact_email | default('info@ishplabs.com') }}</span>
        <span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
        <span>SOCIAL: {{ social | default('@ishplabs') }}</span>
      </div>
      <div class="bg-white text-black font-bold px-3 py-1 text-lg">
        {{ page_number | default('8') }}
      </div>
    </div>
  </div>
</div>
