<div class="row">
    <div class="col-6 border-right">
        <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
        <div class=" mb-3">
            <div class="text-secondary font-weight-bold mb-2">
                <i class="fa fa-sun"></i>
                AM
            </div>
            <div class="">
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">SBP:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_am_resting_sbp_min', $patient) ?>
                    to
                    <?= vsValue('usual_am_resting_sbp_max', $patient) ?>)</span>
                </div>
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">DBP:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_am_resting_dbp_min', $patient) ?>
                    to
                    <?= vsValue('usual_am_resting_dbp_max', $patient) ?>)</span>
                </div>
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">Pulse:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_am_resting_pulse_min', $patient) ?>
                    to
                    <?= vsValue('usual_am_resting_pulse_max', $patient) ?>)</span>
                </div>
            </div>
        </div>
        <div class=" ">
            <div class="text-secondary font-weight-bold mb-2">
                <i class="fa fa-moon"></i>
                PM
            </div>
            <div class="">
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">SBP:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_pm_resting_sbp_min', $patient) ?>
                    to
                    <?= vsValue('usual_pm_resting_sbp_max', $patient) ?>)</span>
                </div>
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">DBP:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_pm_resting_dbp_min', $patient) ?>
                    to
                    <?= vsValue('usual_pm_resting_dbp_max', $patient) ?>)</span>
                </div>
                <div class="d-flex align-items-center">
                    <span class="text-secondary width-50px">Pulse:</span>
                    <span class="text-secondary">(range
                    <?= vsValue('usual_pm_resting_pulse_min', $patient) ?>
                    to
                    <?= vsValue('usual_pm_resting_pulse_max', $patient) ?>)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
        <div class=" ">
            <div class="">
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">SBP:</span>
                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_sbp', $patient) ?></div>
                </div>
                <div class="mb-3 d-flex align-items-center">
                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
                    <div class="flex-grow-1">
                        <?= vsValue('sbp_management_goal_category', $patient) ?>
                    </div>
                </div>
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">DBP:</span>
                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_dbp', $patient) ?></div>
                </div>
                <div class="mb-3 d-flex align-items-center">
                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
                    <div class="flex-grow-1">
                        <?= vsValue('dbp_management_goal_category', $patient) ?>
                    </div>
                </div>
                <div class="mb-1 d-flex align-items-center">
                    <span class="text-secondary width-50px">Pulse:</span>
                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_pulse', $patient) ?></div>
                </div>
                <div class="mb-3 d-flex align-items-center">
                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
                    <div class="flex-grow-1">
                        <?= vsValue('pulse_management_goal_category', $patient) ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="my-3">

<div class="text-secondary font-weight-bold mb-3">Alerts</div>

<div class="row">
    <div class="col-6 border-right">
        <div class="">
            <div class="text-secondary font-weight-bold mb-2">
                <i class="fa fa-circle text-danger"></i>
                Red
            </div>
            <div class="">
                <div class="mb-2 d-flex align-items-center">
                    <span class="text-secondary">SBP: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_below', $patient) ?></div>
                </div>
                <div class="mb-2 d-flex align-items-center">
                    <span class="text-secondary">DBP: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_below', $patient) ?></div>
                </div>
                <div class="d-flex align-items-center">
                    <span class="text-secondary">Pulse: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_below', $patient) ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="">
            <div class="text-secondary font-weight-bold mb-2">
                <i class="fa fa-circle text-warning-mellow"></i>
                Yellow
            </div>
            <div class="">
                <div class="mb-2 d-flex align-items-center">
                    <span class="text-secondary">SBP: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></div>
                </div>
                <div class="mb-2 d-flex align-items-center">
                    <span class="text-secondary">DBP: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></div>
                </div>
                <div class="d-flex align-items-center">
                    <span class="text-secondary">Pulse: above</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></div>
                    <span class="text-secondary text-center">or below</span>
                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="my-3">

<div class="row mb-2">
    <div class="col-6 border-right">
        <div class="d-flex align-items-start">
            <span class="text-secondary min-width-140px pr-3">Reports prehypertension?</span>
            <div>
                <?= vsValue('has_prehypertension_dx', $patient) ?>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="d-flex align-items-start">
            <span class="text-secondary min-width-140px pr-3">Reports hypertension?</span>
            <div>
                <?= vsValue('has_hypertension_dx', $patient) ?>
            </div>
        </div>
    </div>
</div>
<div class="row mb-2">
    <div class="col-6 border-right">
        <div class="d-flex align-items-start">
            <span class="text-secondary min-width-140px pr-3">Reports hypertension medicine?</span>
            <div>
                <?= vsValue('is_prescribed_hypertension_medicine', $patient) ?>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="d-flex align-items-start">
            <span class="text-secondary min-width-140px pr-3">Is it a goal to reduce<br>hypertension medicine?</span>
            <div>
                <?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?>
            </div>
        </div>
    </div>
</div>
<div class="row mb-2">
    <div class="col-6 border-right">
        <div class="d-flex align-items-start">
            <span class="text-secondary min-width-140px pr-3">Describe the goal</span>
            <div>
                <?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="d-flex align-items-center mb-2">
            <span class="text-secondary min-width-140px pr-3">BP monitoring prescribed?</span>
            <div>
                <?= vsValue('is_bp_monitoring_needed', $patient) ?>
            </div>
        </div>
        <div class="d-flex align-items-baseline">
            <span class="text-secondary pr-3">Remarks</span>
            <div class="flex-grow-1">
                <?= vsValue('why_is_bp_monitoring_needed', $patient) ?>
            </div>
        </div>
    </div>
</div>
