<div data-options="dxView : { name: 'patientEPRShared', title: 'patientEPRShared' } ">

    <div data-options="dxViewPlaceholder: { viewName: 'patientBanner' }" data-bind="with: patientBanner"></div>

    <div style="padding: 10px 0 10px 15px" data-bind="dxTileView:{ dataSource: tiles.data, baseItemHeight: 90, baseItemWidth: 230, itemMargin: 4, onItemClick: tiles.clickAction, height: 150 }">
        <div data-options="dxTemplate: {name: 'item' }" class="tile-wrapper">
            <div data-bind="style: { height: '100%', backgroundColor: $root.tiles.getColor($data.id) }">
                <!--ko ifnot: count -->
                <!--<img data-bind="attr: { src: image } " style="height: 32px; width: 32px; position: absolute; left: 10px; top: 40%; transform: translateY(-40%); -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%);" />-->
                <div class="fal fa-paperclip fa-2x" style="position: absolute; left: 10px; top: 40%; transform: translateY(-40%); -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%);"></div>
                <!--/ko-->
                <!--ko if: count -->
                <div style="position: absolute; top: 15px; left: 10px;">
                    <h1 style="display: inline-block;" data-bind="text: count"></h1>
                </div>
                <!--/ko-->
                <h5 data-bind="text: name" class="tile-text-bottomLeft"></h5>
            </div>
        </div>
    </div>

    <!-- Filter bar on the left -->
    <section class="left-timeline-layout-hidden left-timeline-layout-box sh-animation sh-AnimationSmoother">

        <div class="left-timeline-content left-timeline-content-visible">
            <h4 class="rotateText">Filters</h4>
            <div style="float: right; background-color: #fff; color: #333;" data-bind="dxButton: { icon: 'ms-Icon ms-Icon--chevronThinRight', onClick: ShowLeftFilterBox }"></div>
        </div>

        <div class="left-timeline-content left-timeline-content-hidden" style="padding: 10px 20px 0 20px;">

            <div style="margin-bottom: 20px;">
                <h4 style="display: inline;">Filters</h4>
                <div style="float: right; background-color: #fff; color: #333; margin-top: 0; display: inline;" data-bind="dxButton: { icon: 'ms-Icon ms-Icon--chevronThinLeft', onClick: ShowLeftFilterBox }"></div>
            </div>

            <p class="sh-field-label">Type</p>
            <div class="sh-field-value" data-bind="dxTagBox: { dataSource: filterTimeline.timelineTypes, displayExpr: 'name', valueExpr: 'id', value: filterTimeline.types }"></div>

            <div class="sh-field-value" style="width: 100%" data-bind="dxButton: { text: 'Update', onClick: updateFiltersClick }"></div>

        </div>
    </section>

    <div id="cd-timeline-jumpto" style="position: absolute!important; top: 215px; width: 149px; right: 0px; bottom: 0px; height: auto; background: rgba(255,255,255, 0.9); ">
        <div style="margin: 15px 10px;">
            <h4>Jump To</h4>
            <div data-bind="foreach: timelineGroups" style="margin: 10px 0; line-height: 1.5">
                <div style="display: block; ">
                    <div style="background: lightgray; display: inline-block; width: 8px; height: 13px;"></div>
                    <!--<a style="font-size: 16px; display: inline-block; " data-bind="text: group, attr: { href: '#' + group}"></a>-->
                    <h4 class="baseColourLight" style="font-size: 16px; display: inline-block; cursor: pointer;" data-bind="text: group, dxclick: $root.jumpToLocationClick"></h4>
                </div>
            </div>

            <!--<h4 style="margin: 10px 0;">Filter</h4>
            <div data-bind="dxCheckBox: { text: 'Outpatient', value: true }"></div>
            <div data-bind="dxCheckBox: { text: 'Inpatient', value: true }"></div>
            <div data-bind="dxCheckBox: { text: 'Theatre', value: true }"></div>-->

        </div>
    </div>

    <div id="cd-timeline-container" class="center-timeline-layout-box" style="position: absolute!important; top: 215px; left: 0px; bottom: 0px; height: auto; background: rgba(255,255,255, 0.9); " data-bind="dxScrollView: { }">
        <div style="margin: 15px;">
            <h3 class="baseColourLight">Timeline</h3>
            <h5 style="font-style: italic;" class="baseColourLight">(Top 25)</h5>
        </div>

        <section id="cd-timeline" class="cd-container">

            <!--ko if: timelineGroups().length == 0 -->           
                <section class="sh-noDataPlaceholder" style="z-index: 2;">
                    <div class="dx-icon-comment"></div>
                    <h2>Patient has no bookings</h2>
                    <div data-bind="dxButton: { text: 'Refresh', onClick: refreshDataSource }"></div>
                </section>           
            <!--/ko-->

            <div data-bind="foreach: {data: timelineBookings, afterRender: afterTimelineRender }">
                <div class="cd-timeline-block">
                    <h5 class="cd-timeline-year" data-bind="text: groupDate, attr: { id: groupId }"></h5>

                    <!-- ko if: type == 'OP' -->
                    <div data-bind="style: { background: '#00a6e9' }" class="cd-timeline-img cd-image">
                        <div class="cd-timeline-item-type">OP</div>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: type == 'IP' -->
                    <div data-bind="style: { background: '#449A6B' }" class="cd-timeline-img cd-image">
                        <div class="cd-timeline-item-type">IP</div>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: type == 'TH' -->
                    <div data-bind="style: { background: 'orange' }" class="cd-timeline-img cd-image">
                        <div class="cd-timeline-item-type">TH</div>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: type == 'ORD' -->
                    <div data-bind="style: { background: '#008484' }" class="cd-timeline-img cd-image">
                        <div class="cd-timeline-item-type">ORD</div>
                    </div>
                    <!-- /ko -->

                    <div data-bind="style: { borderLeftColor: CompucareOutpatient.utils.getStatusColour(status) }" style="cursor: default; border-left: solid 4px blue;" class="cd-timeline-content">
                        <div style="right: 0 !important; text-align: center; z-index: 100;" id="settingsTimelineButton">
                            <!-- ko ifnot: type == 'ORD' -->
                            <div class="fal fa-angle-down fa-2x showTimelineItem" style="text-align: right; color: grey; margin: 0 10px 0 10px; cursor: pointer;" data-bind="dxclick: $root.selectTimelineItem"></div>
                            <!-- /ko -->
                        </div>
                        <!-- ko if: type == 'OP' && !cancelReasonDescription && !isSurgical -->
                        <div style="color: grey; position: absolute; top: 1.6em; right: 15px; z-index: 150;" data-bind="visible: status !== 'Attended' || status !== 'Completed' ">
                            <div class="fal fa-pencil" data-bind="dxclick: $root.editOutpatientBooking" style="font-size: 20px; display: inline-block; margin-right: 5px; cursor: pointer; "></div>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: type == 'ORD' -->
                        <div style="float: right; z-index: 150; cursor: pointer;" data-bind="visible: hasReports, dxclick: $root.printOrderReport">
                            <h5 class="sh-hyperlink fal fa-file-o" style="display: inline-block; margin-right: 3px;"></h5>
                            <h5 class="sh-hyperlink" style="display: inline-block;">Report</h5>
                        </div>
                        <div style="float: right; z-index: 150; cursor: pointer;" data-bind="dxclick: $root.pacsViewerClick">
                            <h5 class="sh-hyperlink fal fa-search" style="display: inline-block; margin-right: 3px;"></h5>
                            <h5 class="sh-hyperlink" style="display: inline-block; margin-right: 15px;" data-bind="style: { marginRight: hasReports? '15px' : '0px' }">PACS</h5>
                        </div>
                        <!-- /ko -->

                        <div class="table-container">

                            <!-- ko if: type == 'OP' || type == 'TH' -->
                            <div class="table-row" style="width: 100%; table-layout: fixed; ">
                                <div class="table-cell" style="vertical-align: middle; line-height: 1.3;">
                                    <h1 style="display: inline; font-weight: bold!important;" data-bind="text: bookingStrDateDay"></h1>
                                </div>
                                <div class="table-cell">
                                    <div style="margin: 3px;"></div>
                                </div>
                                <div class="table-cell" style="line-height: 1.1; vertical-align: middle;">
                                    <h5 data-bind="text: bookingStrDateDayDesc" style="font-weight: bold!important; display: inline-block;"></h5>
                                    <h5 style="display: inline-block;">@</h5>
                                    <h5 data-bind="text: '' + bookingTime" style="font-weight: bold!important; display: inline-block;"></h5>
                                    <div style="display: block;">
                                        <h5 data-bind="text: bookingStrDateMonthYear" style="display: inline-block;"></h5>
                                        <h5 data-bind="text: ' - ' + status, style: { color: CompucareOutpatient.utils.getStatusColour(status) }" style="display: inline-block;"></h5>
                                    </div>
                                </div>
                            </div>

                            <!-- /ko -->
                            <!-- ko if: type == 'IP' -->
                            <div class="table-row" style="width: 100%; table-layout: fixed; ">
                                <div class="table-cell" style="vertical-align: middle; line-height: 1.3;">
                                    <h1 style="display: inline; font-weight: bold!important;" data-bind="text: admitStrDateDay"></h1>
                                </div>
                                <div class="table-cell">
                                    <div style="margin: 3px;"></div>
                                </div>
                                <div class="table-cell" style="line-height: 1.1; vertical-align: middle;">
                                    <h5 data-bind="text: admitStrDateDayDesc" style="font-weight: bold!important;"></h5>
                                    <div style="display: block;">
                                        <h5 data-bind="text: admitStrDateMonthYear" style="display: inline-block;"></h5>
                                        <h5 data-bind="text: ' - ' + status, style: { color: CompucareOutpatient.utils.getStatusColour(status) }" style="display: inline-block;"></h5>
                                    </div>
                                </div>
                            </div>
                            <!-- /ko -->
                            <!-- ko if: type == 'ORD' -->
                            <div class="table-row" style="width: 100%; table-layout: fixed; ">
                                <div class="table-cell" style="vertical-align: middle; line-height: 1.3;">
                                    <h1 style="display: inline; font-weight: bold!important;" data-bind="text: requestDateDay"></h1>
                                </div>
                                <div class="table-cell">
                                    <div style="margin: 3px;"></div>
                                </div>
                                <div class="table-cell" style="line-height: 1.1; vertical-align: middle;">
                                    <h5 data-bind="text: requestDateDayDesc" style="font-weight: bold!important;"></h5>
                                    <div style="display: block;">
                                        <h5 data-bind="text: requestDateMonthYear" style="display: inline-block;"></h5>
                                    </div>
                                </div>
                            </div>
                            <!-- /ko -->

                        </div>

                        <!--<div data-bind="style: { borderColor: CompucareOutpatient.utils.getStatusColour(status) }" style="border: 1px solid"></div>-->

                        <div class="contentArea" style="z-index: 100; ">

                            <!-- ko if: type == 'ORD' -->

                            <div class="table-container" style="border-spacing: 0 7px; table-layout: fixed; width: 100%;">
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: '#008484' }" class="table-cell dx-icon-map"></div>
                                    <h5 style="width: 100%;" class="table-cell" data-bind="text: location? location : 'No Service Location' "></h5>
                                </div>
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: '#008484' }" class="table-cell dx-icon-like"></div>
                                    <h5 style="width: 100%;" class="table-cell" data-bind="text: examDesc? examDesc : 'No Service Requests'"></h5>
                                </div>
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: '#008484' }" class="table-cell fal fa-user"></div>
                                    <h5 style="width: 100%;" class="table-cell notes-text" data-bind="text: requestedBy? requestedBy : 'No Requester'"></h5>
                                </div>
                            </div>

                            <!-- /ko -->
                            <!-- ko ifnot: type == 'ORD' -->

                            <div class="table-container" style="border-spacing: 0 7px; table-layout: fixed; width: 100%;">
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: type == 'OP' ? '#00a6e9': type == 'IP'? 'teal' : 'orange' }" class="table-cell dx-icon-map"></div>
                                    <h5 style="width: 100%;" class="table-cell" data-bind="text: location "></h5>
                                </div>
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: type == 'OP' ? '#00a6e9': type == 'IP'? 'teal' : 'orange' }" class="table-cell dx-icon-like"></div>
                                    <h5 style="width: 100%;" class="table-cell" data-bind="text: procedureDescription ? procedureDescription : 'No procedure'"></h5>
                                </div>
                                <div class="table-row">
                                    <div style="width: 25px;" data-bind="style: { color: type == 'OP' ? '#00a6e9': type == 'IP'? 'teal' : 'orange' }" class="table-cell fal fa-pencil"></div>
                                    <h5 style="width: 100%;" class="table-cell notes-text" data-bind="text: notes ? notes : 'No notes'"></h5>
                                </div>
                            </div>

                            <div style="margin-top: 15px;">
                                <div style="font-size: 20px; color: #00a6e9" data-bind="visible: type == 'OP' ">Insurance</div>
                                <div style="font-size: 20px; color: teal" data-bind="visible: type == 'IP' ">Insurance</div>
                                <div style="font-size: 20px; color: orange" data-bind="visible: type == 'TH' ">Insurance</div>
                                <div class="table-container" style="border-spacing: 0 7px; table-layout: fixed;">
                                    <div class="table-row">
                                        <div class="table-cell">Purchaser:</div>
                                        <div style="margin: 5px;"></div>
                                        <h5 class="table-cell" data-bind="text: purchaser"></h5>
                                    </div>
                                    <div class="table-row">
                                        <div class="table-cell">Contract:</div>
                                        <div style="margin: 5px;"></div>
                                        <h5 class="table-cell" data-bind="text: contract"></h5>
                                    </div>
                                    <div class="table-row">
                                        <div class="table-cell">Authorisation:</div>
                                        <div style="margin: 5px;"></div>
                                        <h5 class="table-cell" data-bind="text: authNo"></h5>
                                    </div>
                                    <div class="table-row">
                                        <div class="table-cell">Expires on:</div>
                                        <div style="margin: 5px;"></div>
                                        <h5 class="table-cell" data-bind="text: expiry"></h5>
                                    </div>
                                    <div class="table-row">
                                        <div class="table-cell">Membership:</div>
                                        <div style="margin: 5px;"></div>
                                        <h5 class="table-cell" data-bind="text: membershipNo"></h5>
                                    </div>
                                </div>
                            </div>

                            <!-- /ko -->

                        </div>

                    </div> <!-- cd-timeline-content -->
                </div> <!-- cd-timeline-block -->

            </div> <!-- end of foreach -->

        </section> <!-- cd-timeline -->
        <h4 id="cd-timeline-born" data-bind="text: patientBanner().dobStr()"></h4>
    </div>

    <div data-bind="dxPopup: { title: '', showTitle: false,
                                visible: cancelBooking.visible, height: '270px', width: '100%'  } " class="dx-dialog-root">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div data-options="dxViewPlaceholder: { viewName: 'cancelBooking' }"></div>
        </div>
    </div>

    <div data-options="dxViewPlaceholder: { viewName: 'statusGridPopover' }"></div>

    <!--<div class="popout" data-bind="dxPopover: { title: bookingAddEdit.title, showTitle: true, visible: bookingAddEdit.visible, width: 500, height: 510, closeOnOutsideClick: true, onHidden: bookingAddEdit.hidden }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div data-options="dxViewPlaceholder: { viewName: 'bookingAddEditView' }"></div>
        </div>
    </div>-->

    <div class="popout" data-bind="dxPopover: { title: bookingAddEdit.title,
                                showTitle: true,
                                visible: bookingAddEdit.visible,
                                width: 500,
                                height: 450,
                                closeOnOutsideClick: true,
                                target: bookingAddEdit.target }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div data-options="dxViewPlaceholder: { viewName: 'bookingAddEditView' }"></div>
        </div>
    </div>   

    <div data-options="dxViewPlaceholder: { viewName: 'outpatientBookingAddEdit' }" data-bind="with: outpatientBookingAddEditVM"></div>

</div>