<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">
                            <div class="large-7 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;">
                                        <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 class="large-5 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: 10px;">
                                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">BILLING</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">
                                                        <span style="font-size:13px;">: &nbsp; NULL</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Total Amount</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; NULL</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Amount Paid</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; NULL</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-6 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Balance</strong></p>
                                                    </div>
                                                    <div class="large-6 columns">
                                                        <span style="font-size:13px;">: &nbsp; NULL</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row max-width-initial">
                    <div class="large-12 columns">
                        <div class="row">
                            <div class="large-8 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: 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-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter ID</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.patientChartId|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" readonly value="{{ latestPatientChartWithVitals.patientChartId|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Encounter Type</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.chartType|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <span style="font-size:13px;">{{ latestPatientChartWithVitals.chartType|default('N/A') }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Height</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.height|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.height|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Weight</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.weight|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.weight|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Blood Pressure</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.bloodPressureFirst|default('N/A') }} / {{ lastPatientChartWithVitals.bloodPressureSecond|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.bloodPressureFirst|default('N/A') }}" />
                                                        <input type="text" value="{{ latestPatientChartWithVitals.bloodPressureSecond|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Pulse</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.pulse|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.pulse|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Temperature</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.temperature|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.temperature|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Respiratory Rate</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.respiratoryRate|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.respiratoryRate|default('N/A') }}" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-3 columns">
                                                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>BMI</strong></p>
                                                    </div>
                                                    <div class="large-5 columns">
                                                        <span style="font-size:13px;">: &nbsp; {{ lastPatientChartWithVitals.bmi|default('N/A') }}</span>
                                                    </div>
                                                    <div class="large-4 columns">
                                                        <input type="text" value="{{ latestPatientChartWithVitals.bmi|default('N/A') }}" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="large-4 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;">
                                        <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>
                    </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>#}
