bio-performx/report_gen/page_11.html

<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">
        <!-- Fat Metabolism Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-black mb-4 text-center">
                Fat Metabolism
            </h2>

            <!-- Fat Metabolism Info Boxes -->
            <div class="grid grid-cols-2 gap-4 mb-4">
                <!-- Fat Max Box -->
                <div class="bg-gray-200 p-4 rounded-lg text-center">
                    <h3 class="text-lg font-bold text-black mb-2">Fat Max</h3>
                    <p class="text-sm text-gray-600 italic mb-2">
                        {{ fat_max_optimal | default('*Optimal
                        10-12Kcals/minute') }}
                    </p>
                    <p class="text-xl font-bold text-black">
                        {{ fat_max_value | default('3.8Kcals/min') }}
                    </p>
                    <p class="text-sm text-black">
                        {{ fat_max_heart_rate | default('49% of Max Heart Rate')
                        }}
                    </p>
                    <p class="text-sm text-black">
                        {{ fat_max_bpm | default('97 bpm') }}
                    </p>
                </div>

                <!-- Carbs and Fat Crossover Box -->
                <div class="bg-gray-200 p-4 rounded-lg text-center">
                    <h3 class="text-lg font-bold text-black mb-4">
                        Carbs and Fat Crossover
                    </h3>
                    <p class="text-xl font-bold text-black">
                        {{ crossover_bpm | default('100bpm') }}
                    </p>
                    <p class="text-sm text-black">
                        {{ crossover_heart_rate | default('51% of Max Heart
                        Rate') }}
                    </p>
                </div>
            </div>

            <!-- Fat Metabolism Graph -->
            <div class="mb-4">
                <div class="bg-gray-100 p-2 rounded-lg mb-2">
                    <p class="text-black font-semibold text-center">
                        {{ fat_metabolism_note | default('100bpm at a speed of
                        4.0mph and incline of 2%') }}
                    </p>
                </div>

                <div class="flex justify-center">
                    <img
                        src="{{ fat_metabolism_chart }}"
                        alt="Fat Metabolism Chart"
                        class="w-full max-w-4xl h-auto object-contain"
                    />
                </div>
            </div>
        </div>

        <!-- Recovery Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-black mb-4 text-center">
                Recovery
            </h2>

            <!-- Recovery Info Boxes -->
            <div class="grid grid-cols-3 gap-4 mb-4">
                <!-- Cardiac Recovery -->
                <div class="bg-gray-200 p-4 rounded-lg text-center">
                    <h3 class="text-lg font-bold text-black mb-2">
                        Cardiac Recovery
                    </h3>
                    <p class="text-sm text-gray-600 mb-2">
                        {{ cardiac_recovery_time | default('(1 minute)') }}
                    </p>
                    <p class="text-xl font-bold text-black">
                        {{ cardiac_recovery_percentage | default('33%') }}
                    </p>
                </div>

                <!-- Metabolic Recovery -->
                <div class="bg-gray-200 p-4 rounded-lg text-center">
                    <h3 class="text-lg font-bold text-black mb-2">
                        Metabolic (CO2) Recovery
                    </h3>
                    <p class="text-sm text-gray-600 mb-2">
                        {{ metabolic_recovery_time | default('(2 minute)') }}
                    </p>
                    <p class="text-xl font-bold text-black">
                        {{ metabolic_recovery_percentage | default('65%') }}
                    </p>
                </div>

                <!-- Breath Frequency Recovery -->
                <div class="bg-gray-200 p-4 rounded-lg text-center">
                    <h3 class="text-lg font-bold text-black mb-2">
                        Breath Frequency Recovery
                    </h3>
                    <p class="text-sm text-gray-600 mb-2">
                        {{ breath_recovery_time | default('(2.5 minute)') }}
                    </p>
                    <p class="text-xl font-bold text-black">
                        {{ breath_recovery_percentage | default('76%') }}
                    </p>
                </div>
            </div>

            <!-- Recovery Graph -->
            <div class="flex justify-center mb-6">
                <img
                    src="{{ recovery_chart }}"
                    alt="Recovery Chart"
                    class="w-full max-w-4xl h-auto object-contain"
                />
            </div>
        </div>

        <!-- Resting Heart Rate Table -->
        <div class="mb-6">
            <h3 class="text-lg font-bold text-black mb-4 text-center">
                Resting Heart Rate - {{ resting_heart_rate | default('53bpm') }}
            </h3>

            <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"
                        >
                            Poor
                        </th>
                        <th
                            class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold"
                        >
                            Below Average
                        </th>
                        <th
                            class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold"
                        >
                            Average
                        </th>
                        <th
                            class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold"
                        >
                            Above Average
                        </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"
                        >
                            Athlete
                            <!-- 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 text-center"
                        >
                            {{ hr_age_range | default('26-35') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_poor | default('82bpm +') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_below_avg | default('75-81bpm') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_average | default('71-74bpm') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_above_avg | default('66-70bpm') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_good | default('62-65bpm') }}
                        </td>
                        <td
                            class="bg-gray-100 border border-gray-400 p-3 text-black text-center"
                        >
                            {{ hr_excellent | default('55-61bpm') }}
                        </td>
                        <td
                            class="bg-green-200 border border-gray-400 p-3 text-black text-center font-bold"
                        >
                            {{ hr_athlete | default('44-54bpm') }}
                        </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('10') }}
            </div>
        </div>
    </div>
</div>