<div data-options="dxView : { name: 'patientBanner', title: 'patientBanner' } ">
    <div class="patient-banner">          
        <div class="patient-banner-top">
            <div class="patient-image">
                <div data-bind="visible: image()" style="position:relative;">
                    <!--<img class=" patientimagecontainer" data-bind="attr: { src: 'data:image/png;base64,' + image() }" />-->
                    <img class="patientImageContainer" data-bind="attr: { src: 'data:image/png;base64,' + image() }, visible: deceased()" style="filter: grayscale(100%); -webkit-filter: grayscale(100%);" />
                    <img class="patientImageContainer" data-bind="attr: { src: 'data:image/png;base64,' + image() }, visible: !deceased()" style="filter: none; -webkit-filter: none;" />
                </div>
                <div data-bind="visible: !image()">                    
                    <img class="patientImageContainer" src="images/User-04_grey_128.png" data-bind="visible: deceased()" style="filter: grayscale(100%); -webkit-filter: grayscale(100%);" />
                    <img class="patientImageContainer" src="images/User-04_grey_128.png" data-bind="visible: !deceased()" style="filter: none; -webkit-filter: none;" />
                </div>                
            </div>
            <h1 class="bannerName" data-bind="text: nameDesc() "></h1>
            <div class="patient-banner-text-top-right">
                <div class="patient-banner-buttons">
                    <div id="patientBannerDetailButton" class="fa fa-angle-down fa-2x patient-banner-fontImageButton" data-bind="dxclick: $root.showHideBannerDetail"></div>
                    <div id="notesBannerButton" class="fa fa-sticky-note-o fa-2x patient-banner-fontImageButton" style="background-color: #f4b300;" data-bind="dxAction: $root.notesPopup.show"></div>
                    <div id="attachmentsBannerButton" class="fa fa-paperclip patient-banner-fontImageButton" style="background-color: #696969;" data-bind="dxAction: $root.attachmentsPopup.show"></div>
                    <div id="alertsBannerButton" class="fa fa-exclamation-triangle patient-banner-fontImageButton" style="background-color: #FF2E12;" data-bind="dxAction: $root.alertsPopup.show">
                       
                    </div>
                    <div class="fa fa-pencil patient-banner-fontImageButton" style="background-color: #00a6e9;" data-bind="dxAction: $root.addEditShow"></div>
                </div>
                <!-- ko if: deceased() == '1' -->
                <span class="bannerDOB patient-banner-textspace" data-bind="text: dateDiedStr()" />
                <!-- /ko -->
                <!-- ko ifnot: deceased() == '1' -->
                <div class="bannerDOB patient-banner-textspace" data-bind="text: dobStr()" />
                <!-- /ko -->
                <!-- ko if: id -->
                <div class="bannerID patient-banner-textspace" data-bind="text: id()? 'Id: ' + id() : ''" />
                <!-- /ko -->
                <div class="bannerGender" data-bind="text: genderDesc"></div>
                <div class="genderIndicator" data-bind="css: {
                                            colourDeceased: deceased() == '1',
                                            colourGenderMale: gender() == 1,
                                            colourGenderFemale: gender() == 2,
                                            colourGenderNotSpecified: gender() == 3,
                                            colourGenderUnknown: gender() == 4,
                                        }"></div>
            </div>
        </div>
        <div class="patient-banner-bottom">
            <!--<div class="patient-banner-buttons">
                <div id="patientBannerDetailButton" class="fa fa-angle-down fa-2x" data-bind="dxclick: $root.showHideBannerDetail" style="position: absolute; bottom: 0px; right: 15px; cursor: pointer; color: #fff; "></div>
            </div>-->
            <!--<div style="float: right; opacity: 0.1"><img src="images/User_256.png" /></div>-->
            <h4 class="bannerAddress" data-bind="text: adr1() + ', ' + adr2() + ', ' + adr3() + ', ' + adr4() + ', ' + postcode() "></h4>
            <div style="clear: both;"></div>
            <table class="patient-banner-detailTable">
                <tr>
                    <td>Patient ID:</td>
                    <td><h4 data-bind="text: id "></h4></td>
                </tr>

                <tr>
                    <td>Case Number:</td>
                    <td><h4 data-bind="text: caseNumber "></h4></td>
                </tr>

                <tr>
                    <td>NHS Number:</td>
                    <td><h4 data-bind="text: nHSNumber "></h4></td>
                </tr>

                <tr>
                    <td>Tel Number:</td>
                    <td><h4 data-bind="text: telephone "></h4></td>
                </tr>

                <tr>
                    <td>Mobile:</td>
                    <td><h4 data-bind="text: mobile "></h4></td>
                </tr>

                <tr>
                    <td>Email:</td>
                    <td><h4 data-bind="text: email"></h4></td>
                </tr>
            </table>
        </div>

        <!-- ko if: $root.alertsBanner.visible() -->
        <div id="alertBanner" class="warningBannerThin alert-blink" data-bind="style: { backgroundColor: deceased()? 'black': '#FF2E12' }" style="position: absolute; z-index: 31; top: 49px; left: 90px; cursor: pointer;">
            <div style="display: table; table-layout: fixed; width: 100%;">
                <div style="display: table-cell; vertical-align: middle; width: 10px;">!</div>
                <div style="display: table-cell; vertical-align: middle; width: 100%" data-bind="dxclick: $root.alertsPopup.show">
                    <h5 class="ellipsis" data-bind="text: deceased() ? 'Deceased' : alerts()[0].alertBannerDesc"></h5>
                </div>
                <div style="display: table-cell; vertical-align: middle;" data-bind="dxclick: $root.alertsBanner.hide">
                    <div class="alertBannerClose dx-icon-close"></div>
                </div>
            </div>
        </div>
        <div class="alertbar-arrow-up alert-blink-arrow" data-bind="style: { borderBottomColor: deceased()? 'black' : '#FF2E12'  }" style="position: absolute; top: 42px; right: 141px; z-index: 32;"></div>
        <!-- /ko -->

    </div>

    <div class="sh-popup-colour-patientAlerts" data-bind="dxPopup: {
        title: 'Alerts',
        showTitle: true,
        visible: $root.alertsPopup.visible,
        closeOnOutsideClick: true,
        width: '600px',
        }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div style="position: absolute; top: 55px; bottom: 0; left: 10px; right: 10px;">
                <div id="gridContainer" data-bind="dxDataGrid: $root.alertsPopup.gridSettings"></div>
            </div>
        </div>
    </div>

    <div class="sh-popup-colour-patientNotes" data-bind="dxPopup: {
        title: 'Notes',        
        visible: $root.notesPopup.visible,
        closeOnOutsideClick: true,
        showTitle: true,
        width: '600px',        
        }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div style="position: absolute; top: 50px; bottom: 0; left: 10px; right: 10px;">
                <div id="gridContainer" data-bind="shDataGrid: $root.notesPopup.gridSettings"></div>
            </div>
        </div>
    </div>

    <div class="sh-popup-colour-patientAttachments" data-bind="dxPopup: {
        title: 'Attachments',        
        visible: $root.attachmentsPopup.visible,
        closeOnOutsideClick: true,
        showTitle: true,        
        width: '600px',      
        height: '90%',
        }">
        <div data-options="dxTemplate : { name: 'content' } ">            
            <div style="position: absolute; top: 55px; bottom: 5px; left: 10px; right: 400px; border-right: 1px solid grey; padding-right: 5px;">
                <div data-bind="dxTreeView: {
                    dataSource: $root.patientBanner().attachments,
                    dataStructure: 'tree',
                    onItemClick: $root.attachmentsPopup.itemClick
                    }">
                </div>     
            </div>
            <div style="position: absolute; top: 55px; bottom: 5px; left: 310px; right: 10px;">                 
                <div data-bind="dxList: { dataSource: $root.attachmentsPopup.attachmentsList, noDataText: 'No Attachments', onItemClick:  $root.attachmentsPopup.attachmentClick} ">
                    <div data-options="dxTemplate : { name: 'item' } ">                                               
                        <div class="ellipsis" data-bind="text: text"></div>                                                
                    </div>
                </div>
            </div>
        </div>
    </div>   

</div>