<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="fa 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">
        <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; top: 200px; left: 40px; 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">
            <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="fa 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 -->
                        <div style="color: grey; float: right; z-index: 10000; cursor: pointer;" data-bind="visible: status !== 'Attended' || status !== 'Completed', dxclick: $root.editOutpatientBooking">
                            <div class="sh-hyperlink fa fa-pencil" style="font-size: 20px; display: inline-block; margin-right: 5px;"></div>
                            <h5 class="sh-hyperlink" style="display: inline-block; margin-right: 5px;">Edit</h5>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: type == 'ORD' -->
                        <div style="float: right; z-index: 10000; cursor: pointer;" data-bind="visible: hasReports, dxclick: $root.orderReportsClick" >
                            <h5 class="sh-hyperlink fa fa-file-o" style="display: inline-block; margin-right: 3px;"></h5>
                            <h5 class="sh-hyperlink" style="display: inline-block;">Reports</h5>
                        </div>
                        <div style="float: right; z-index: 10000; cursor: pointer;" data-bind="dxclick: $root.pacsViewerClick">
                            <h5 class="sh-hyperlink fa 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 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 Department' "></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 fa fa-user-o"></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'? '#449A6B' : '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'? '#449A6B' : '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'? '#449A6B' : 'orange' }" class="table-cell fa 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-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>-->

    <!--ko if: timelineGroups().length == 0 -->
    <div style="position: absolute!important; top: 200px; left: 0px; right: 0px; bottom: 0; background: #fff; ">
        <section class="sh-noDataPlaceholder" style="z-index: 2;">
            <div class="dx-icon-comment"></div>
            <h2>This patient has no bookings</h2>
            <div data-bind="dxButton: { text: 'Refresh', onClick: viewShowing }"></div>
        </section>
    </div>
    <!--/ko-->

    <div data-options="dxViewPlaceholder: { viewName: 'orderReports' }" data-bind="with: orderReportsVM"></div>
    <div data-options="dxViewPlaceholder: { viewName: 'outpatientBookingAddEdit' }" data-bind="with: outpatientBookingAddEditVM"></div>

</div>