<div class="row max-width-initial">
    <div class="large-12 columns">
        <div class="row max-width-initial">
            <div class="large-7 columns">
                <div class="row max-width-initial">
                    <div class="large-12 columns">
                        <div class="row" data-equalizer="bar">
                            <div class="large-6 columns">
                                <div class="prof-box" style="width:100%;">
                                    <div class="demo-box" style="width:100%; height:190px; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;" data-equalizer-watch="bar">
                                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">DEMOGRAPHICS</h5>
                                        <div class="row">
                                            <div class="large-5 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Patient ID</strong></p>
                                            </div>
                                            <div class="large-7 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ patient.id }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-5 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Gender</strong></p>
                                            </div>
                                            <div class="large-7 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ patient.gender }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-5 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Age</strong></p>
                                            </div>
                                            <div class="large-7 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ patient.getAge }} years old</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-5 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Date of Birth</strong></p>
                                            </div>
                                            <div class="large-7 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ patient.birthDate|date('m/d/Y') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-5 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Email Address</strong></p>
                                            </div>
                                            <div class="large-7 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ patient.concatenatedEmail|default('N/A') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="large-6 columns">
                                <div class="prof-box" style="width:100%;">
                                    <div class="demo-box" style="width:100%; height:auto; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;" data-equalizer-watch="bar">
                                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">LATEST ENCOUNTER</h5>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Branch</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.healthFacility|default('N/A') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter Date</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.chartDate|default('N/A') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter Type</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.chartType|default('N/A') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter Status</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.chartStatus|default('N/A') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Clinician</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.provider|default('N/A') }}</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="large-6 columns">
                                                <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Endorsed</strong></p>
                                            </div>
                                            <div class="large-6 columns">
                                                <span style="font-size:13px;">: &nbsp; {{ lastPatientChart.endorsed|default('N/A') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row max-width-initial" data-equalizer="foo">
                    <div class="large-12 columns">
                        <div class="row">
                            <div class="large-6 columns" data-equalizer-watch="foo">
                                <div class="prof-box" style="width:100%;">
                                    <div class="demo-box" style="width:100%; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 10px;">
                                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">LATEST VITALS</h5>
                                        <div class="row" style="padding: 5px;">
                                            <div class="large-12 columns">
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter ID</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        {% if latestPatientChartWithVitals != '' or latestPatientChartWithVitals != null %}
                                                            <span style="font-size:13px;">: &nbsp; <a style="font-size: 13px;" href="{{ path('patient_chart_form', {patient_id:patient.idEncoded,action:'u',id:latestPatientChartWithVitals.patientChartId|default('null')|base64Encode}) }}" target="_blank">{{ latestPatientChartWithVitals.patientChartId|default('N/A') }}</a></span>
                                                        {% else %}
                                                            <span style="font-size: 13px;">: &nbsp; N/A</span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter Type</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.chartType|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Height</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.height|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Weight</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.weight|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>BMI</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.bmi|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Blood Pressure</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.bloodPressureFirst|default('N/A') }} / {{ latestPatientChartWithVitals.bloodPressureSecond|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                {#<div class="row">#}
                                                    {#<div class="large-6 columns">#}
                                                        {#<p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>2nd Blood Pressure</strong></p>#}
                                                    {#</div>#}
                                                    {#<div class="large-6 columns">#}
                                                        {#<span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.bloodPressureSecond|default('N/A') }} / {{ latestPatientChartWithVitals.bloodPressureSecond|default('N/A') }}</span>#}
                                                    {#</div>#}
                                                {#</div>#}
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Pulse</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.pulse|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Respiratory Rate</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.respiratoryRate|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Nose</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.nose|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Stop Bang</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.stop_bang|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Neck Size</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.neck_size|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Smoker</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.smoker|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Pre ESS</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.pre_ess|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Post ESS</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.post_ess|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>O2 Saturation</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.otwo_saturation|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Drinker</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ latestPatientChartWithVitals.drinker|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="large-6 columns" data-equalizer-watch="foo">
                                <div class="prof-box" style="width:100%;">
                                    <div class="demo-box" style="width:100%; border:solid 2px #1eb7f0;">
                                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">ASSESSMENT</h5>
                                        <div class="row" style="padding: 5px;">
                                            <div class="large-6 columns">
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>IBQ</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.initial_berlin_questionnaire_score|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>IES</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.initial_epworth_sleepness_scale|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-7 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>% time < 90% SpO2</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:11px;">: {{ patientProfileAssessment.time_ninety_percent_spotwo|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-7 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>Initial Mean SpO2</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:11px;">: {{ patientProfileAssessment.initial_mean_spotwo|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>Initial AHI</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.initial_rdi|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>Initial RDI</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.initial_ahi|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>Pressure Range From</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.pressureRangeFrom|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 5px; margin-bottom:0; font-size:11px;"><strong>Pressure Range To</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.pressureRangeTo|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="large-6 columns">
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Avg Hours Usage/night</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.avgCpapUsage|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Current AHI</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.currentAhi|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Current RDI</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.currentRdi|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Mask Leak</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: {{ patientProfileAssessment.mask_leak|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Last Time Accessories Replaced</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: {{ patientProfileAssessment.last_device_replaced|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>Neck Size (Inches)</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: {{ patientProfileAssessment.neck_size|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:11px;"><strong>ESS</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:11px;">: &nbsp; {{ patientProfileAssessment.ess|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-5 columns">
                {% if staticMap != '' %}
                    {#<div id="patientLocationMap" style="width:100%;height:465px;"></div>#}
                    {#<img src="{{ patient.imageGoogleMaps }}" style="width:100%;height:465px;">#}
                    <img src="{{ staticMap }}" style="width:100%;height:465px;">
                {% endif %}
            </div>
        </div>
    </div>
</div>

{#<script src="https://maps.googleapis.com/maps/api/js?key={{ googleMapApiKey }}&libraries=places" defer></script>#}
