{#
* home.html.twig
*
* @package   OpenEMR
* @link      https://www.open-emr.org
 * @author    Jerry Padgett <sjpadgett@gmail.com>
 * @author    Brady Miller <brady.g.miller@gmail.com>
 * @author    Shiqiang Tao <StrongTSQ@gmail.com>
 * @author    Ben Marte <benmarte@gmail.com>
 * @author    Stephen Nielson <snielson@discoverandchange.com>
 * @copyright Copyright (c) 2016-2025 Jerry Padgett <sjpadgett@gmail.com>
 * @copyright Copyright (c) 2019-2021 Brady Miller <brady.g.miller@gmail.com>
 * @copyright Copyright (c) 2020 Shiqiang Tao <StrongTSQ@gmail.com>
 * @copyright Copyright (c) 2021 Ben Marte <benmarte@gmail.com>
*  @copyright Copyright (C) 2024 Open Plan IT Ltd. <support@openplanit.com>
* @license   https://github.com/openemr/openemr/blob/master/LICENSE GNU General Public License 3
#}
{% extends "portal/base.html.twig" %}

{% block head %}
    {{ parent() }}

    <link href="../portal/sign/css/signer_modal.css?v={{ assetVersion | attr_url }}" rel="stylesheet" />
    <script src="../interface/main/tabs/js/dialog_utils.js?v={{ assetVersion | attr_url }}"></script>
    <script src="../portal/sign/assets/signature_pad.umd.js?v={{ assetVersion | attr_url }}"></script>
    <script src="../portal/sign/assets/signer_api.js?v={{ assetVersion | attr_url }}"></script>

    {% if portal_two_payments %}
        {# We don't include anything for payments if we don't have payments enabled #}
        {% if payment_gateway == 'Stripe' %}
            <script src="https://js.stripe.com/v3/"></script>
        {% endif %}

        {% if payment_gateway == 'AuthorizeNet' %}
            {% if gateway_mode_production %}
                <script src="https://js.authorize.net/v1/Accept.js"></script>
            {% else %}
                <script src="https://jstest.authorize.net/v1/Accept.js"></script>
            {% endif %}
        {% endif %}
    {% endif %}
    <style>
      .dropdown-menu-right {
        right: 0;
        left: auto;
      }

      .navbar-nav .dropdown-menu {
        overflow: hidden;
        white-space: nowrap;
      }

      .dropdown-menu {
        position: absolute;
      }

      .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
      }

      @media (max-width: 768px) {
        .jumbotron {
          padding: 1rem;
        }
        .card {
          margin-bottom: 1rem;
        }
        .navbar-nav .dropdown-menu {
          position: static;
          float: none;
          width: 100%;
          text-align: center;
        }
        .navbar-nav .dropdown-menu a {
          padding: 10px;
        }
        .card-body {
          padding: 10px;
        }
      }
    </style>
    <script>
        var cpid = {{ patientID | js_escape }},
            cuser = {{ user | js_escape }},
            webRoot = {{ web_root | js_escape }},
            ptName = {{ patientName | js_escape }},
            whereto = {{ whereto | js_escape }},
            siteId = {{ site_id | js_escape }},
            inactivityTimeOut = {{ portal_timeout | js_escape }},
            languageDefinitions = {{ language_defs | js_escape }},
            webroot_url = webRoot,
            tab_mode = true,
            isPortal = 1;

        var jsLanguageDirection = {{ languageDirection | js_escape }};
        var jsGlobals = {
            languageDirection: jsLanguageDirection,
            date_display_format: {{ dateDisplayFormat | js_escape }},
            timezone: {{ timezone | js_escape }},
            assetVersion: {{ assetVersion | js_escape }}
        };
        function restoreSession() {
            return true;
        }

        i18next.init({
            lng: 'selected',
            debug: false,
            nsSeparator: false,
            keySeparator: false,
            resources: {
                selected: {
                    translation: languageDefinitions
                }
            }
        }).catch(error => {
            console.log(error.message);
        });

        function persist(where, portalInit = false) {
            if (where[0]) {
                if (where[0] !== '#') {
                    return;
                }
            }
            whereto = where;
            fetch('lib/persist.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(
                    {
                        'csrf_token_form': {{ csrfUtils | js_escape }},
                        'where': where,
                        'portal_init': portalInit
                    }
                )
            });
        }

        const activityMonitor = function () {
            let timeOut,
                warnTimeOut,
                time;
            if (Number(inactivityTimeOut) < 300) {
                inactivityTimeOut = 900; // 15 minutes. < 5 minutes is too short.
            }
            time = inactivityTimeOut * 1000;

            window.onload = resetLogOutTimer;
            window.onmousemove = resetLogOutTimer;
            window.onmousedown = resetLogOutTimer;
            window.ontouchstart = resetLogOutTimer;
            window.ontouchmove = resetLogOutTimer;
            window.onclick = resetLogOutTimer;
            window.onkeydown = resetLogOutTimer;
            window.addEventListener('scroll', resetLogOutTimer, true);

            function logoutWarn() {
                const warnMsg = xl('Your current log on session will expire in 30 seconds.') + '<br />' + xl('Please take action to prevent being logged out!');
                syncAlertMsg(warnMsg, 28000); // from utility.js
            }

            function logout() {
                let logoutUrl = "./index.php?site=" + encodeURIComponent(siteId);
                location.replace(logoutUrl);
            }

            function resetWarnTimer() {
                clearTimeout(warnTimeOut);
                warnTimeOut = setTimeout(logoutWarn, time - 30000);
            }

            function resetLogOutTimer() {
                $('#alert_box').remove(); // reset alert if set
                resetWarnTimer();
                clearTimeout(timeOut);
                timeOut = setTimeout(logout, time);
            }
        };

        function updateWindowTitle(element) {
            if (element && element.dataset && element.dataset.windowTitle) {
                let textNode = document.createElement("div");
                textNode.innerText = element.dataset.windowTitle;
                document.title = textNode.innerText;
            } else {
                // if we don't have a valid element we are going to reset to our home page
                document.title = {{ pagetitle|js_escape }};
            }
        }

        $(function () {
            $('#topNav [data-parent="#cardgroup"]').on('click', (e) => {
                persist($(e.target).attr('href'), false);
                updateWindowTitle(e.target);
            });

            $('#quickstart-card [data-parent="#cardgroup"]' +
                ', #reports-list-card [data-parent="#cardgroup"]'
                + ',.reports-list-back-btn').on('click', (e) => {
                // we use currentTarget so we grab the event with the original data-parent, if there are buttons or
                // other stuff inside we want to go to the href.
                persist($(e.currentTarget).attr('href'), false);
                updateWindowTitle(e.currentTarget);
                return true;
            });

            $('#quickstart_dashboard').on('click', (e) => {
                if ($('#quickstart-card').hasClass('show')) {
                    return false;
                }
            });

            if ($('body').css('direction') === "rtl") {
                $('.float-left').each(function () {
                    $(this).addClass('float-right').removeClass('float-left');
                });
                $('.dropdown-menu-right').each(function () {
                    $(this).removeClass('dropdown-menu-right');
                });
                $('.dropdown-menu-md-right').each(function () {
                    $(this).removeClass('dropdown-menu-md-right');
                });
            }

            $("#profilereport").load("get_profile.php", {}, function () {
                $("table").addClass("table table-sm");
                $(".demographics td").removeClass("label");
                $(".demographics td").addClass("bold");
                $(".insurance table").addClass("table-sm table-striped");
                $("#editDems").click(function () {
                    showProfileModal()
                });
            });

            $("#reports").load("./report/portal_patient_report.php?pid=" + {{ patientID | js_url }}, {}, function () {
            });

            {% if portal_two_payments %}
            $("#payment").load("./portal_payment.php", {}, function () {
            });
            {% endif %}

            {% if isEasyPro %}
            $("#pro").load("./get_pro.php", {}, function () {
            });
            {% endif %}

            $(".generateDoc_download").click(function () {
                $("#doc_form").submit();
            });

            function showProfileModal() {
                const title = {{ 'Profile Edits' | xlj }};
                const params = {
                    buttons: [
                        {
                            text: {{ 'Help' | xlj }},
                            close: false,
                            style: 'info',
                            id: 'formHelp'
                        }, {
                            text: {{ 'Cancel' | xlj }},
                            close: true,
                            style: 'default'
                        }, {
                            text: {{ 'Revert Edits' | xlj }},
                            close: false,
                            style: 'danger',
                            id: 'replaceAllButton'
                        }, {
                            text: {{ 'Submit Changes' | xlj }},
                            close: false,
                            style: 'success',
                            id: 'donePatientButton'
                        }
                    ],
                    sizeHeight: 'full',
                    allowDrag: false,
                    onClosed: 'reload',
                    resolvePromiseOn: 'init',
                    type: 'GET',
                    url: webRoot + '/portal/patient/patientdata?pid=' + encodeURIComponent(cpid) + '&user=' + encodeURIComponent(cuser)
                };

                dlgopen('', '', 'modal-xl', 500, '', title, params).then(function (dialog) {
                    $('div.modal-body', dialog).addClass('overflow-auto');
                });
            }

            function saveProfile() {
                page.updateModel();
            }

            // Persist last card used for returns for actions.
            let gowhere = {{ whereto | js_escape }};
            $(gowhere).collapse('show');
            // grab the navigation element that we persisted, if there is no element we default to our page title
            updateWindowTitle(document.querySelector("a[href='" + gowhere + "']"));
            // update home button in case our last location is the quickstart
            updateDashboardHomeButton();

            // TODO: prevent current card collapse. for top menu only remove later
            $('#cardgroup').on('hide.bs.collapse', '.show', function (e) {
                let target = this.attributes.id.nodeValue;
                if (whereto.includes(target)) {
                    whereto = '';
                    return false;
                }
                updateDashboardHomeButton();
            });

            $('#popwait').addClass('d-none');

            $('#callccda').click(function () {
                $('#popwait').removeClass('d-none');
            });

            // start watch for inactivity
            activityMonitor();
        });

        function updateDashboardHomeButton() {
            // the navigation between places isn't very extensible / maintainable.
            // for now we'll just go with it, but may need to refactor the entire routing system
            // in order to make this all more extensible
            let isDashboard = whereto == '#quickstart-card'; // $("#quickstart-card").hasClass('show');
            let isReportsList = whereto == '#reportcard' || whereto == '#downloadcard' || whereto == '#help-card-reports-list';
            // we only want to show dashboard home button when not on dashboard.
            if (isDashboard) {
                $("#quickstart_dashboard").addClass('active');
            } else {
                $("#quickstart_dashboard").removeClass('active');
            }
            if (isReportsList) {
                $(".reports-list-back-btn").removeClass('d-none');
            } else {
                $(".reports-list-back-btn").addClass('d-none');
            }
        }

        function changeCredentials(e) {
            title = {{ 'Manage Login Credentials' | xlj }};
            dlgopen("./account/index_reset.php", '', 900, 750, null, title, {});
        }

        {% if isEasyPro %}
        function writeResult(score, stdErr, assessmentOID) {
            $.ajax({
                url: '../library/ajax/easipro_util.php',
                data: {
                    'csrf_token_form': {{ csrfUtils | js_escape }},
                    'function': 'record_result',
                    'score': score,
                    'stdErr': stdErr,
                    'assessmentOID': assessmentOID
                },
                type: 'POST',
                dataType: 'script'
            });
        }

        function selectResponse(obj, assessmentOID) {
            $.ajax({
                url: '../library/ajax/easipro_util.php',
                type: "POST",
                data: {
                    'csrf_token_form': {{ csrfUtils | js_escape }},
                    'function': 'select_response',
                    'assessmentOID': assessmentOID,
                    'ItemResponseOID': obj.name,
                    'Response': +obj.id
                },
                dataType: "json",
                success: function (data) {
                    if (data.DateFinished != '') {
                        document.getElementById("Content").innerHTML = jsText({{ 'You have finished the assessment.' | xlj }}) + "<br /> " + jsText({{ 'Thank you' | xlj }});
                        $('.assessment-row').toggleClass('d-none');
                        document.getElementById("asst_" + assessmentOID).innerHTML = "<i class='fa fa-check-circle'></i>";
                        document.getElementById("asst_status_" + assessmentOID).innerHTML = "completed";
                        $.ajax({
                            url: '../library/ajax/easipro_util.php',
                            type: "POST",
                            data: {
                                'csrf_token_form': {{ csrfUtils | js_escape }},
                                'function': 'collect_results',
                                'assessmentOID': assessmentOID
                            },
                            dataType: "json",
                            success: function (data) {
                                writeResult(data.Items[0].Theta, data.Items[0].StdError, assessmentOID);
                            }
                        });
                        return
                    }

                    var screen = "";
                    for (var j = 0; j < data.Items[0].Elements.length; j++) {
                        if (typeof (data.Items[0].Elements[j].Map) == 'undefined') {
                            screen = screen + `<label class="font-weight-bolder mx-1">${data.Items[0].Elements[j].Description}</label>`
                        } else {
                            for (var k = 0; k < data.Items[0].Elements[j].Map.length; k++) {
                                screen = screen + `<div class="form-row"><input type="button" class='form-control' id="${data.Items[0].Elements[j].Map[k].Value}" name="${data.Items[0].Elements[j].Map[k].ItemResponseOID}" value="${data.Items[0].Elements[j].Map[k].Description}" onclick="selectResponse(this,'${assessmentOID}')" /></div>`;
                            }
                        }
                    }
                    document.getElementById("Content").innerHTML = screen;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("An error occurred");
                }
            });
        }

        function startAssessment(param, assessmentOID) {
            param.innerHTML = "<i class='fa fa-circle-notch fa-spin'></i> " + jsText({{ 'Loading' | xlj }});

            $.ajax({
                url: '../library/ajax/easipro_util.php',
                type: "POST",
                data: {
                    'csrf_token_form': {{ csrfUtils | js_escape }},
                    'function': 'start_assessment',
                    'assessmentOID': assessmentOID
                },
                dataType: "json",
                success: function (data) {
                    var screen = "";
                    let title = $("#" + "hide_assessment_" + assessmentOID).closest('tr').children('td:first').text();
                    document.getElementById("ContentTitle").innerHTML = "<h5>" + jsText(title) + "</h5>";
                    $('.assessment-row').toggleClass('d-none');
                    for (var j = 0; j < data.Items[0].Elements.length; j++) {
                        if (typeof (data.Items[0].Elements[j].Map) == 'undefined') {
                            screen = screen + `<label class="font-weight-bolder mx-1">${data.Items[0].Elements[j].Description}</label>`;
                        } else {
                            for (var k = 0; k < data.Items[0].Elements[j].Map.length; k++) {
                                screen = screen + `<div class="form-row"><input type="button" class='form-control' id="${data.Items[0].Elements[j].Map[k].Value}" name="${data.Items[0].Elements[j].Map[k].ItemResponseOID}" value="${data.Items[0].Elements[j].Map[k].Description}" onclick="selectResponse(this, '${assessmentOID}')" /></div>`;
                            }
                        }
                    }

                    document.getElementById("Content").innerHTML = screen;
                    param.innerHTML = jsText({{ 'Assessment Started' | xlj }});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    param.innerHTML = jsText({{ 'Start Assessment' | xlj }});
                    alert("An error occurred");
                }
            });
        }

        {% endif %}
    </script>
    {{ fireEvent(eventNames.scriptsRenderPre) }}

{% endblock %}

{% block pagetitle %}
    {{ pagetitle | text }}
{% endblock %}

{% block header %}
    {# We disable the header for now #}
    {% include "portal/header.html.twig" with {navMenu: []} %}
{% endblock %}

{% block content %}

    <section class="flex-column accordion" id="cardgroup">
        <div id="popwait" class="alert alert-warning d-none"><strong>{{ 'Working!' | xlt }}</strong>{{ 'Please wait...' | xlt }}</div>

        <!-- Dashboard Quickstart Card Main Screen originally shown -->
        <div class="card collapse overflow-auto" data-parent="#cardgroup" id="quickstart-card">
            <div id="quickstart-div" class="card-body p-0 p-sm-2">
                <script>
                    $(function () {
                        let ele = parent.document.getElementById('topNav');
                        if ($(parent.document.getElementById('topNav')).is('.collapse:not(.show)')) {
                            ele.classList.toggle('collapse');
                        }
                        // ensure top level shows in quickstart
                        $(parent.document.getElementById('topNav')).removeClass("d-none");
                        $("#my_theme").on('change', function (e) {
                            let sel = $("#my_theme :selected").val() || '';
                            persistPatientSetting(cpid, 'portal_theme', sel);
                            $(parent.document.getElementById('homeRefresh')).click();
                        });
                    });

                    function persistPatientSetting(pid, label, setting) {
                        fetch('lib/persist.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                'csrf_token_form': {{ csrfUtils | js_escape }} ,
                                'setting_patient': pid,
                                'setting_label': label,
                                'setting_value': setting
                            }),
                        });
                    }
                </script>
                <script>
                    {{ fireEvent(eventNames.dashboardRenderScripts) }}
                </script>
                <div id="card-div">
                    <!-- About Dialog -->
                    <div class="modal fade" id="formdialog" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog bg-light">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">{{ 'About Portal Dashboard' | xlt }}</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <div>
                                        <span>{{ 'Please see forum here' | xlt }}
                                            <a href="{{ 'https://community.open-emr.org/' }} " target="_blank">{{ "Visit Forum" | xlt }} </a>
                                        </span>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button id="okButton" data-dismiss="modal" class="btn btn-primary">{{ 'Close' | xlt }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid p-0 p-sm-3">
                        <div class="jumbotron jumbotron-fluid text-center mb-1 p-1">
                            <h2>{{ 'Dashboard' | xlt }}</h2>
                            {# <p>
                                <button class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#formdialog">{{ 'Tell me more' | xlt }}</button>
                            </p> #}
                        </div>
                        <div class='jumbotron jumbotron-fluid p-4'>

                            <div class="row" id="inject_card">
                                <!-- Forms and Documents -->
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url: web_root~"/portal/patient/onsitedocuments?pid="~patientID|attr_url
                                    , icon: "file"
                                    , navText: "Clinical Documents"|xl
                                    , localLink: false
                                    , id: "documents-go"
                                } %}
                                <!-- Appointments -->
                                {% if allow_portal_appointments %}
                                    {% include "portal/partial/_nav_icon.html.twig"
                                        with {
                                        url: "appointmentcard"|attr_url
                                        , icon: "calendar-check"
                                        , navText: "Appointments"|xl
                                        , id: "appointments-go"
                                    } %}
                                {% endif %}
                                {% if portal_two_payments %}
                                    {% include "portal/partial/_nav_icon.html.twig"
                                        with {
                                        url: "paymentcard"|attr_url
                                        , icon: "wallet"
                                        , navText: "Make Payment"|xl
                                        , id: "payments-go"
                                    } %}
                                {% endif %}
                                <!-- Messages -->
                                {% include "portal/partial/_nav_icon_secure_messaging.html.twig"
                                    with {
                                    url: "secure-msgs-card"|attr_url
                                    , icon: "envelope"
                                    , navText: "Secure Messaging"|xl
                                    , newcnt: newcnt
                                    , id: "messages-go"
                                } %}
                                <!-- Health -->
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url: "lists"|attr_url
                                    , icon: "list"
                                    , navText: "Health Snapshot"|xl
                                    , id: "lists-go"
                                } %}
                                <!-- Demo -->
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url: "profilecard"|attr_url
                                    , icon: "user"
                                    , navText: "Profile"|xl
                                    , id: "profile-go"
                                } %}
                                <!-- Ledger / Billing Summary -->
                                {% if portal_two_ledger %}
                                    {% include "portal/partial/_nav_icon.html.twig"
                                        with {
                                        url: "ledgercard"|attr_url
                                        , icon: "credit-card"
                                        , navText: "Billing Summary"|xl
                                        , id: "ledger-go"
                                    } %}
                                {% endif %}
                                <!-- Reports -->
                                {% if ccdaOk or 'allow_custom_report' or portal_onsite_document_download %}
                                    {% include "portal/partial/_nav_icon.html.twig"
                                        with {
                                        url: "reports-list-card"|attr_url
                                        , icon: "file-download"
                                        , navText: "Medical Reports"|xl
                                        , id: "reports-go"
                                    } %}
                                {% endif %}
                                {% if isEasyPro %}
                                    {% include "portal/partial/_nav_icon.html.twig"
                                        with {
                                        url: "procard"|attr_url
                                        , icon: "flask-vial"
                                        , navText: "PRO Assessment"|xl
                                        , id: "easypro-go"
                                    } %}
                                {% endif %}
                                <!-- Settings -->
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url: "settings-card"|attr_url
                                    , icon: "gear"
                                    , navText: "Settings"|xl
                                    , id: "settings-go"
                                } %}
                                <!-- Help -->
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url: "help-card"|attr_url
                                    , icon: "question-circle"
                                    , navText: "Help"|xl
                                    , id: "help-go"
                                } %}
                                {{ fireEvent(eventNames.dashboardInjectCard) }}
                                {% include "portal/partial/_nav_icon.html.twig"
                                    with {
                                    url:  webroot ~ "./logout.php"
                                    ,localLink: false
                                    , icon: "right-from-bracket"
                                    , navText: "Logout"|xl
                                    , id: "logout-go"
                                } %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# End of quickstart-cards #}

        <!-- Health Snapshot Card -->
        {% include "portal/partial/cards/_health_snapshot_card.html.twig" with {healthSnapshot: healthSnapshot}%}

        <!-- Help Card -->
        {% include "portal/partial/_help_card.html.twig" with {
            id: "help-card"
            ,title: "Dashboard Help"|xl
            ,items: [
                {
                    title: "Clinical Documents"|xl
                    ,icon: "file"
                    ,description: "Clinical forms and documents that have been sent by your clinical staff to be filled out."|xl
                    ,enabled: true
                }
                ,{
                    title: "Appointments"|xl
                    ,icon: "calendar-check"
                    ,description: "View upcoming appointments and if allowed by your clinical staff make new appointments."|xl
                    ,enabled: allow_portal_appointments
                }
                ,{
                    title: "Make Payment"|xl
                    ,icon: "wallet"
                    ,description: "Submit payments for amounts you owe for your medical care."|xl
                    ,enabled: portal_two_payments
                }
                ,{
                    title: "Secure Messaging"|xl
                    ,icon: "envelope"
                    ,description: "You can send and receive secure communications with your care team staff through this system."|xl
                    ,enabled: true
                }
                ,{
                    title: "Health Snapshot"|xl
                    ,icon: "clipboard"
                    ,description: "See your immunization, medications, active prescriptions, allergy list, current problems list, and lab results."|xl
                    ,enabled: true
                }
                ,{
                    title: "Profile"|xl
                    ,icon: "user"
                    ,description: "Review and edit your medical profile information. This includes your basic demographics (name, address, emergency contact). You can also review your insurance information if you use a third party insurer to help pay for treatment of care."|xl
                    ,enabled: true
                }
                ,{
                    title: "Billing Summary"|xl
                    ,icon: "credit-card"
                    ,description: ""|xl
                    ,enabled: portal_two_ledger
                }
                ,{
                    title: "Medical Reports"|xl
                    ,icon: "gear"
                    ,description: "Setup your digital signature for signing your clinical documents, update your login credentials, or change application settings in the portal."|xl
                    ,enabled: ccdaOk or 'allow_custom_report' or portal_onsite_document_download
                }
                ,{
                    title: "PRO Assessment"|xl
                    ,icon: "flask-vial"
                    ,description: "Questionnaires/Assessments using the Patient-Reported Outcomes Measurement Information System (PROMIS)."|xl
                    ,enabled: isEasyPro
                }
                ,{
                    title: "Settings"|xl
                    ,icon: "gear"
                    ,description: "Setup your digital signature for signing your clinical documents, update your login credentials, or change application settings in the portal."|xl
                    ,enabled: true
                }
            ]
        } %}

        <!-- Help Card Reports List -->
        {% include "portal/partial/_help_card.html.twig" with {
            id: "help-card-reports-list"
            ,backButton: true
            ,backButtonCard: "reports-list-card"
            ,backButtonClass: "reports-list-back-btn"
            ,title: "Medical Reports Help"|xl
            ,items: [
                {
                    title: "View Summary of Care"|xl
                    ,icon: "notes-medical"
                    ,description: "View your Summary of Care document that includes a printable version of your healthcare information. This document can be used to transfer your care to another healthcare facility. In technical terms it is called a C-CDA."|xl
                    ,enabled: ccdaOk
                }
                ,{
                    title: "Download Summary of Care"|xl
                    ,icon: "notes-medical"
                    ,description: "Download a copy of your Summary of Care document. This document can be used to transfer your care to another healthcare facility. In technical terms it is called a C-CDA."|xl
                    ,enabled: ccdaOk
                }
                ,{
                    title: "Customized Medical History Report"|xl
                    ,icon: "clipboard"
                    ,description: "View, Print, or Download individual items of your medical history based upon your custom selections"|xl
                    ,enabled: true
                }
                ,{
                    title: "Download Medical Record Documents"|xl
                    ,icon: "notes-medical"
                    ,description: "Select stored documents in your medical file that have been uploaded by your clinical staff or yourself to be downloaded."|xl
                    ,enabled: portal_onsite_document_download
                }

            ]
        } %}

        <!-- Reports List Card -->
        <div class="card collapse overflow-auto" data-parent="#cardgroup" id="reports-list-card">
            <header class="card-header p-1 bg-dark text-light h3">{{ 'Medical Reports' | xlt }}</header>
            <div class="row no-gutters">
                {% if ccdaOk %}
                    {% include "portal/partial/_nav_icon.html.twig"
                        with {
                        url: web_root ~ "/ccdaservice/ccda_gateway.php?action=view&csrf_token_form=" ~ csrfUtils|attr_url
                        , icon: "notes-medical"
                        , navText: "View Summary of Care"|xl
                        , id: "view-summary-go"
                        , localLink: false
                    } %}
                    {% include "portal/partial/_nav_icon.html.twig"
                        with {
                        url: web_root ~ "/ccdaservice/ccda_gateway.php?action=dl&csrf_token_form=" ~ csrfUtils|attr_url
                        , icon: "download"
                        , navText: "Download Summary of Care"|xl
                        , id: "download-summary-go"
                        , localLink: false
                    } %}
                {% endif %}
                {% if 'allow_custom_report' %}
                    {% include "portal/partial/_nav_icon.html.twig"
                        with {
                        url: "reportcard"|attr_url
                        , icon: "clipboard"
                        , navText: "Customized Medical History Report"|xl
                        , id: "create-report-go"
                    } %}
                {% endif %}
                {% if portal_onsite_document_download %}
                    {% include "portal/partial/_nav_icon.html.twig"
                        with {
                        url: "downloadcard"|attr_url
                        , icon: "file-zipper"
                        , navText: "Download Medical Record Documents"|xl
                        , id: "download-documents-go"
                    } %}
                {% endif %}
                {% include "portal/partial/_nav_icon.html.twig"
                    with {
                    url: "help-card-reports-list"|attr_url
                    , icon: "question-circle"
                    , navText: "Help"|xl
                    , id: "help-reports-list-go"
                } %}
            </div>
        </div>

        <!-- Custom Itemised Report Card -->
        <div class="card collapse overflow-auto" data-parent="#cardgroup" id="reportcard">
            <header class="card-header p-1 bg-dark text-light h3">
                <a href="#reports-list-card"
                     data-toggle="collapse" data-parent="#cardgroup" aria-expanded="false"
                     class="reports-list-back-btn btn btn-light text-dark d-none"><i class="fa fa-arrow-left"></i> {{ "Back"|xlt }}</a>
                {{ 'Customized Medical History Report' | xlt }}</header>
            <div id="reports" class="card-body">{% include "portal/partial/_alert_loading.html.twig" %}</div>
        </div>

        <!-- Settings Card -->
        <div class="card collapse" data-parent="#cardgroup" id="settings-card">
            <header class="card-header p-1 bg-dark text-light h3">{{ 'Settings' | xlt }}</header>
            <div>
                <!-- Signature -->
                <div class="card d-flex mr-1 mb-1">
                    <div class="card-body row">
                        <h4 class="card-title d-flex align-items-center btn-link">
                            <a role="button" href="#openSignModal" data-toggle="modal" data-backdrop="true" data-target="#openSignModal" data-type="patient-signature" data-parent="#cardgroup">
                                <i class="fas fa-file-signature mr-1"></i>{{ 'Default Digital Signature' | xlt }}</a>
                        </h4>
                    </div>
                </div>
                <!-- Password -->
                <div class="card d-flex mr-1 mb-1">
                    <div class="card-body row">
                        <h4 class="card-title d-flex align-items-center btn-link" role="button" onclick="changeCredentials(event)"><i class="fa fa-cog fa-fw mr-1"></i>{{ 'Manage Login Credentials' | xlt }}</h4>
                    </div>
                </div>
                <!-- Theme -->
                <div class="card d-flex mr-1 mb-1">
                    <div class="card-body row">
                        <h4 class="card-title d-flex align-items-center btn-link" data-toggle="collapse" data-target="#settings-content" role="button">
                            <i class="fa fa-link mx-1"></i>{{ 'Select Theme' | xlt }}
                        </h4>
                        <div id="settings-content" class="collapse col-12">
                            <div class="form-group">
                                <div class="col">
                                    <label class="" for='my_theme'>{{ 'Current Theme' | xlt }}</label>
                                    <div class="input-group">
                                        <select class='form-control' id='my_theme'>
                                            {% for styleKey, styleValue in styleArray %}
                                                {{ "<option value='" ~ styleKey | attr ~ "'" }}
                                                {% if styleKey == current_theme %}
                                                    {{ " selected" }}
                                                {% endif %}
                                                {{ ">" }}{{ styleValue | text }}{{ "</option>\n" }}
                                            {% endfor %}
                                        </select>
                                        <div class="input-group-append">
                                            <a class="btn btn-primary" href="./home.php" target="_parent">{{ 'Apply' | xlt }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Profile Card -->
        <div class="card collapse" data-parent="#cardgroup" id="profilecard">
            <div id="profilereport" class="card-body p-2 bg-light">
                {% include "portal/partial/_alert_loading.html.twig" %}
            </div>
        </div>

        <!-- Secure Messages Card -->
        <div class="collapse" data-parent="#cardgroup" id="secure-msgs-card">
            <div class="card">
                <div id="secure-msgs" class="card-body">
                    <iframe src="{{ web_root | attr }}/portal/messaging/messages.php" class="w-100 vh-100 border-0"></iframe>
                </div>
            </div>
        </div>

        <!-- Appointments Card -->
        {% if allow_portal_appointments %}
            {% include "portal/partial/cards/_appointment_card.html.twig" with {patientID: patientID} %}
        {% endif %}

        <!-- Payments Card -->
        {% if portal_two_payments %}
            <div class="collapse overflow-auto" data-parent="#cardgroup" id="paymentcard">
                <div class="card">
                    <header class="card-header p-1 bg-dark text-light h3">{{ 'Payments' | xlt }}</header>
                    <div id="payment" class="card-body p-2 bg-light">{% include "portal/partial/_alert_loading.html.twig" %}</div>
                </div>
            </div>
        {% endif %}

        <!-- Download Documents Card -->
        {% if portal_onsite_document_download %}
            <div class="card collapse overflow-auto" data-parent="#cardgroup" id="downloadcard">
                <header class="card-header p-1 bg-dark text-light h3">
                    <a href="#reports-list-card"
                       data-toggle="collapse" data-parent="#cardgroup" aria-expanded="false"
                       class="reports-list-back-btn btn btn-light text-dark d-none"><i class="fa fa-arrow-left"></i> {{ "Back"|xlt }}</a>
                    {{ 'Download Documents From Medical Record' | xlt }}
                </header>
                <div id="docsdownload" class="card-body">
                    <div>
                        <iframe src="./get_patient_documents.php" class="w-100 vh-100 border-0"></iframe>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- Billing Summary Card -->
        {% if portal_two_ledger %}
            <div class="collapse overflow-auto" data-parent="#cardgroup" id="ledgercard">
                <div class="card">
                    <header class="card-header p-1 bg-dark text-light h3">{{ 'Billing Summary' | xlt }}</header>
                    <div id="patledger" class="card-body">
                        <iframe src="./report/pat_ledger.php" class="w-100 vh-100 border-0"></iframe>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- Assessments PRO Card -->
        {% if isEasyPro %}
            <div class="card collapse overflow-auto" data-parent="#cardgroup" id="procard">
                <header class="card-header p-1 bg-dark text-light h3">{{ 'Patient Reported Outcomes' | xlt }}</header>
                <div id="pro" class="card-body p-2 bg-light">{% include "portal/partial/_alert_loading.html.twig" %}</div>
            </div>
        {% endif %}

        {{ fireEvent(eventNames.sectionRenderPost) }}

    </section>
{% endblock %}