<div data-options="dxView : { name: 'PatientHome', title: '@summary' } ">
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-content-background HomePage">

        <!--include shared add/Edit screens-->
        <div data-options="dxViewPlaceholder: { viewName: 'ActivitiesAddEdit' }" data-bind="with: activityAddEditVM"></div>
        <div data-options="dxViewPlaceholder: { viewName: 'DischargeShared' }" data-bind="with: dischargeSharedVM"></div>
        <div data-options="dxViewPlaceholder: { viewName: 'AdmissionsAddEdit' }" data-bind="with: admissionsAddEditVM"></div>
        <div data-options="dxViewPlaceholder: { viewName: 'ProductsAddEdit' }" data-bind="with: productsAddEditVM"></div>

        <!-- ko if: showNoPatientCover -->

        <section class="sh-noDataPlaceholder-absolute" style="padding: 0; background-color: transparent;">
            <div class="fad fa-user sh-duo-colours-user"></div>
            <div class="title">No Patient Selected</div>
            <div class="subtitle">Click the magnifying glass from the side bar</div>
            <div class="subtitle">to open a patient record.</div>
        </section>
        <!-- /ko -->
        <!-- ko ifnot: showNoPatientCover -->
        <!--<div data-options="dxViewPlaceholder: { viewName: 'PatientBanner' }"></div>-->

        <div class="sh-color-patientSummary sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
                    { location: 'before', options: { icon: 'ms-Icon ms-Icon--waffle', onClick: MyPen.patientNavMenu.menuButtonClick }, widget: 'dxButton' },
                    { location: 'before', text: title}
         ] }"></div>

        <div style="color: #fff; padding: 5px 0 5px 15px; background-color: #56C5FF"
             data-bind="visible: MyPen.app.openPatients.selectedPatient()? !MyPen.app.openPatients.selectedPatient().episodeOfCareId : false">
            <div style="display: inline;">! Features disabled - patient has no </div>
          <div class="sh-hyperlink-underline" style="display: inline;" data-bind="dxclick: function(e) {
                                                MyPen.app.navigate('EpisodeOfCare');
                                            }"> Episode of Care</div>
        </div>

        <div style="position: absolute; bottom: 0; left: 17px; right: 0; height: auto;"
             data-bind="style: { top: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId? '50px' : '80px' : '80px' },
             dxScrollView: {  }">

            <div data-bind="dxScrollView: { direction: 'horizontal', scrollByContent: true, scrollByThumb: true, showScrollbar: 'onHover'}" style="display: block; height: 150px; margin-left: 4px; width: auto; padding-top: 15px;" id="tileSection">
                <div class="flex">
                    <div>
                        <div class="tile-group" style="width: 150px; padding-left: 5px;">Reports</div>
                        <div style="width: 270px; max-height:125px !important; display: inline-block"
                             data-bind="dxTileView: { dataSource: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId? tileViewReports : tileViewReportsDisabled : tileViewReports,
                             onItemClick: tileClick, direction: 'horizontal', itemMargin: 5, baseItemWidth: 110, baseItemHeight: 110 } ">
                            <div data-bind="style: { backgroundColor: colour }" style="text-align: center;" data-options="dxTemplate: {name:'item' }">
                                <div style="font-size: 40px; margin: 15px; color: white; text-align: center; padding-top: 10px;" data-bind="css: icon"></div>
                                <h6 data-bind="text: name " style="color: white; overflow: hidden; text-overflow: ellipsis; white-space: pre; margin: 0 0 5px 1px;" class="tile-text-bottomLeft"></h6>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="tile-group" style="width: 270px; padding-left: 5px;">Forms</div>
                        <div style="width: 385px; max-height: 125px !important;"
                             data-bind="dxTileView: { dataSource: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId? tileViewForms : tileViewFormsDisabled : tileViewForms,
                             onItemClick: tileClick, direction: 'horizontal', itemMargin: 5, baseItemWidth: 110, baseItemHeight: 110 } ">
                            <div data-bind="style: { backgroundColor: colour }" style="text-align: center;" data-options="dxTemplate: {name:'item' }">
                                <div style="font-size: 40px; margin: 15px; color: white; text-align: center; padding-top: 10px;" data-bind="css: icon"></div>
                                <h6 data-bind="text: name " style="color: white; overflow: hidden; text-overflow: ellipsis; white-space: pre; margin: 0 0 5px 1px;" class="tile-text-bottomLeft"></h6>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="tile-group" style="width: 250px; padding-left: 5px;">Contact</div>
                        <div style="width: 250px; max-height: 125px !important; display: inline-block;"
                             data-bind="dxTileView: { dataSource: tileViewContact, onItemClick: tileClick,
                             direction: 'horizontal', itemMargin: 5, baseItemWidth: 110, baseItemHeight: 110 } ">
                            <div data-bind="style: { backgroundColor: color }" style="text-align: center;" data-options="dxTemplate: {name:'item' }">
                                <div style="font-size: 40px; margin: 15px; color: white; text-align: center; padding-top: 10px;" data-bind="css: icon"></div>
                                <h6 data-bind="text: name " style="color: white; overflow: hidden; text-overflow: ellipsis; white-space: pre; margin: 0 0 5px 1px;" class="tile-text-bottomLeft"></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>        

            <div class="sh-form-section" style="margin-left: 5px;">@recentActivity</div>

            <div class="tile-container-box">
                <div style="padding-left: 10px;" class="sh-color-activities" data-bind="dxToolbar: { items: [
                                    { location: 'before', text: '@activities'},
                                    { location: 'after', options: { text: 'Add', icon: 'fal fa-plus', onClick: activitiesTile.addClick, disabled: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId === 0 : false }, widget: 'dxButton' }
                         ] }"></div>

                <h5 data-bind="if: activities().length == 0" class="centerText">No Activities</h5>

                <div style="cursor: pointer;"
                     data-bind="visible: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId : false,
                     dxclick: $root.activitiesTile.tileClick">

                    <div style="height: 450px;" data-bind="dxMultiView: {
                         items: activities,
                         selectedIndex: activitiesTile.selectedIndex,
                         loop: true,
                         noDataText: ''
                        } ">
                        <div data-options="dxTemplate: { name: 'item'}">
                            <div style="position: absolute; top: 10px; bottom: 0; left: 35px; right: 35px; height: auto;" data-bind="dxScrollView: {}">
                                <div style="display: block; font-weight: 600" class="sh-field-value">
                                    <h4 data-bind="text: moment($data.Date).format('DD-MM-YYYY @ H:mm')" style="display: inline-block;"></h4>
                                    <h4 data-bind="text: ' for '" style="display: inline-block;"></h4>
                                    <h4 data-bind="text: $data.Duration" style="display: inline-block;"></h4>
                                    <h4 data-bind="text: ' Mins'" style="display: inline-block;"></h4>
                                </div>

                                <section style="font-size: 14px;">
                                    <p class="sh-field-label" style="font-size: 14px;">@clinician</p>
                                    <div style="font-weight: 600" class="sh-field-value" data-bind="text: $data.Clinician"></div>
                                    <p class="sh-field-label" style="font-size: 14px;">@activityType</p>
                                    <div style="font-weight: 600" class="sh-field-value" data-bind="text: $data.ActivityType"></div>
                                    <p class="sh-field-label">@outcome</p>
                                    <div style="font-weight: 600" class="sh-field-value" data-bind="text: $data.Outcome"></div>
                                    <p class="sh-field-label">@problems</p>
                                    <div style="font-weight: 600" class="sh-field-value notes-text" data-bind="text: $data.Problems"></div>
                                    <p class="sh-field-label">@treatments</p>
                                    <div style="font-weight: 600" class="sh-field-value notes-text" data-bind="text: $data.Treatments"></div>
                                </section>
                            </div>
                        </div>
                    </div>


                </div>
                <!--ko if: activities().length > 1 -->
                <div data-bind="dxclick: activitiesTile.nextClick, visible: activitiesTile.selectedIndex() === 0" style="position: absolute; top: 50%; left: 0; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);  transform: translateY(-50%);
                         height: 35px; width: 35px; cursor: pointer;">
                    <h1 class="ms-Icon ms-Icon--chevronThinLeft"></h1>
                </div>
                <div data-bind="dxclick: activitiesTile.nextClick, visible: activitiesTile.selectedIndex() === 1" style="position: absolute; top: 50%; right: 0; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);  transform: translateY(-50%);
                         height: 35px; width: 35px; cursor: pointer;">                    
                    <h1 class="ms-Icon ms-Icon--chevronThinRight"></h1>
                </div>
                <!--/ko-->
            </div>

            <div class="tile-container-box">
                <div style="padding-left: 10px;" class="sh-color-inpatients" data-bind="dxToolbar: { items: [
                                    { location: 'before', text: '@currentAdmission'},
                                    { location: 'after', visible: !admission(), options: { icon: 'fal fa-plus', text: 'Add', onClick: admissionsTile.addClick, disabled:  MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId === 0 : false  }, widget: 'dxButton' },
                                    { location: 'after', visible: admission(), options: { icon: 'fal fa-sign-out', text: 'Discharge', onClick: admissionsTile.dischargeClick, disabled:  MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId === 0 : false  }, widget: 'dxButton' }
                         ] }"></div>

                <h5 data-bind="if: !admission()" class="centerText">No Current Admission</h5>

                <div style="padding: 10px 15px; cursor: pointer;" data-bind="
                     visible: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId : false,
                     dxclick: $root.admissionsTile.tileClick">
                    <div data-bind="dxScrollView: { }" style="position: absolute; top: 60px; bottom: 0; left: 15px; right: 5px; height: auto;">
                        <div data-bind="with: admission" style="display: block;">
                            <h4 class="sh-field-value" data-bind="text: moment(Admitted).format('DD-MM-YYYY')"></h4>
                            <p class="sh-field-label">@admission Type</p>
                            <div style="font-weight: 600" class="sh-field-value" data-bind="text: AdmissionType"></div>
                            <p class="sh-field-label">@ward</p>
                            <div style="font-weight: 600" class="sh-field-value" data-bind="text: Ward"></div>
                            <p class="sh-field-label">@patientStatus</p>
                            <div style="font-weight: 600" class="sh-field-value" data-bind="text: PatientStatus"></div>                            
                            <p class="sh-field-label">@procedures</p>
                            <div style="font-weight: 600; display: block; " class="sh-field-value notes-text" data-bind="text: Procedures"></div>
                            <p class="sh-field-label">@presentingDiagnosis</p>
                            <div style="font-weight: 600; display: block; " class="sh-field-value notes-text" data-bind="text: PresentingDiagnosis"></div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="tile-container-box">
                <div style="padding-left: 10px;" class="sh-color-products" data-bind="dxToolbar: { items: [
                                    { location: 'before', text: '@product'},
                                    { location: 'after', options: { text: 'Add', icon: 'fal fa-plus', onClick: productsTile.addClick,
                                        disabled:  MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId === 0 : false }, widget: 'dxButton' }
                             ] }"></div>

                <h5 data-bind="if: !product()" class="centerText">No Products</h5>

                <div style="padding: 10px 15px; cursor: pointer;" data-bind="
                     visible: MyPen.app.openPatients.selectedPatient()? MyPen.app.openPatients.selectedPatient().episodeOfCareId : false,
                     dxclick: $root.productsTile.tileClick">
                    <div data-bind="dxScrollView: { }" style="position: absolute; top: 60px; bottom: 0; left: 15px; right: 5px; height: auto;">
                        <div data-bind="with: product" style="display: block;">
                            <h4 class="sh-field-value" data-bind="text: moment(Date).format('DD-MM-YYYY')"></h4>
                            <p class="sh-field-label">@product</p>
                            <div style="font-weight: 600" class="sh-field-value" data-bind="text: Product"></div>
                            <div class="flex" style="width: 100%">
                                <div style="width: 50%;">
                                    <p class="sh-field-label">@issueQuantity</p>
                                    <div style="font-weight: 600" class="sh-field-value" data-bind="text: Quantity"></div>
                                </div>
                                <div style="width: 50%;">
                                    <p class="sh-field-label">@packSize</p>
                                    <div style="font-weight: 600" class="sh-field-value" data-bind="text: PackSize"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="tile-container-box">
                <div style="padding-left: 10px;" class="sh-color-dansac" data-bind="dxToolbar: { items: [
                                    { location: 'before', text: stomasTile.title()}
                         ] }"></div>
                <div style="height: 430px; width: 400px;" data-bind="dxMultiView: {
                         items: [
                         {
                            title: '@preOpSiting',
                            template: 'preOpStoma'
                          },
                         {
                            title: '@postOpFormation',
                            template: 'postOpStoma'
                          }],
                         selectedIndex: stomasTile.selectedIndex,
                         loop: true,
                         deferRendering: false,
                         onSelectionChanged: stomasTile.onSelectionChange
                        } ">
                    <div data-options="dxTemplate: { name: 'preOpStoma'}">
                        <h5 data-bind="if: $root.preOpSites().length == 0" class="centerText">No Pre-op Sites</h5>

                        <div data-bind="visible: $root.preOpSites().length > 0">
                            <div class="stoma-container" style="display: block;">
                                <canvas id="preOpStomaCanvas" class="stoma-canvas" width="250" height="250">
                                    Your browser does not support HTML5 Canvas.
                                </canvas>
                            </div>
                            <div class="stoma-list-container" style="display: block;">
                                <div data-bind="dxList: { items: $root.preOpSites, activeStateEnabled: false, noDataText: ''  }">
                                    <div data-options="dxTemplate: { name: 'item'}">
                                        <div data-bind="style: { background: $root.getStomaColourByObj($data, false) }" style="display: inline-block;
                                            width: 20px; height: 20px; border-radius: 50%; border: solid 2pt #fff; vertical-align:middle; margin-right: 5px;"></div>
                                        <div data-bind="text: StomaType" style="display: inline-block; vertical-align :middle; font-weight: 600"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-options="dxTemplate: { name: 'postOpStoma'}">
                        <h5 data-bind="if: $root.postOpSites().length == 0" class="centerText">No Post-op Sites</h5>

                        <div data-bind="visible: $root.postOpSites().length > 0">
                            <div class="stoma-container" style="display: block;">
                                <canvas id="postOpStomaCanvas" class="stoma-canvas" width="250" height="250">
                                    Your browser does not support HTML5 Canvas.
                                </canvas>
                            </div>
                            <div class="stoma-list-container" style="display: block;">
                                <div data-bind="dxList: { items: $root.postOpSites, activeStateEnabled: false, noDataText: '' }">
                                    <div data-options="dxTemplate: { name: 'item'}">
                                        <div data-bind="style: { background: $root.getStomaColourByObj($data, true) }" style="display: inline-block;
                                            width: 20px; height: 20px; border-radius: 50%; border: solid 2pt #fff; vertical-align: middle; margin-right: 5px;"></div>
                                        <div data-bind="text: StomaType" style="display: inline-block; vertical-align: middle; font-weight: 600"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div data-bind="dxclick: stomasTile.nextClick, visible: stomasTile.selectedIndex() === 0" style="position: absolute; top: 50%; right: 0; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);  transform: translateY(-50%);
                         height: 35px; width: 35px; cursor: pointer;">
                    <h1 class="ms-Icon ms-Icon--chevronThinRight"></h1>
                </div>

                <div data-bind="dxclick: stomasTile.nextClick, visible: stomasTile.selectedIndex() === 1" style="position: absolute; top: 50%; left: 0; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);  transform: translateY(-50%);
                         height: 35px; width: 35px; cursor: pointer;">
                    <h1 class="ms-Icon ms-Icon--chevronThinLeft"></h1>
                </div>
            </div>

        </div>

        <!-- /ko -->


        <div data-bind="shPopup:{
            visible: textMessagePopup.visible, title: 'Send a Text Message', maxHeight: '600px', maxWidth: '400px', closeOnOutsideClick: false,
            toolbarItems: [
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
                 {
                    text: '@send',
                    onClick: textMessagePopup.send,
                    disabled: !textMessagePopup.text()
                 }
                },
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
                 {
                    text: '@cancel',
                    onClick: textMessagePopup.cancel
                 }
                }
            ]
            }">
            <div data-options="dxTemplate:{ name: 'content'}">

                <div style="position: absolute; top: 65px; bottom: 60px; left: 20px; right: 20px; height: auto;">
                    <label style="display: inline;" class="sh-field-label">Text Message</label>
                    <label style="float: right;" data-bind="text: textMessagePopup.charCount"></label>
                    <div id="txtMessage" style="position: absolute; top: 25px; left: 0; right: 0; bottom: 10px;" data-bind="dxTextArea: {
                         value: textMessagePopup.text, valueChangeEvent: 'keyup', onValueChanged: textMessagePopup.changed, maxLength: 512 }"></div>
                </div>

            </div>
        </div>

    </div>
</div>
