<div data-options="dxView : { name: 'FindPatient', title: 'Find Patient' } ">
  <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-content-background">

    <div data-bind="dxPopover: {
             animation: null,
             target: target,
             visible: visible,
             showTitle: false,
             position: position,
             width: '550px',
             height: '650px',             
             maxHeight: '650px',
             onHidden: onHidden,
             }">
      <div style="display: flex; justify-content: space-between;">
        <div id="search" data-bind="shTextBox: { placeholder: '@patientSearch',
                                                    onEnterKey: onSearchEnterKey,
                                                    mask: searchBoxMask,
                                                    maskChar: ' ',
                                                    value: searchValue,
                                                    width: '380px',
                                                    onValueChanged: searchValueChanged,
                                                    maxLength: maxSearchLength,
                                                    valueChangeEvent: 'keyup',
                                                    onKeyPress: keyPressValidation,
                                                    disabled: pivotSelectedIndex() === 1
                                                    }"></div>

        <div style="min-width: 0;" data-bind="dxButton: { icon: 'fal fa-search', width: '50px', onClick: onSearchEnterKey, disabled: pivotSelectedIndex() === 1 }"></div>
        <div id="searchType" data-bind="dxSelectBox: { dataSource: searchType,
                                                    onValueChanged: searchTypeValueChanged,
                                                    displayExpr: 'desc',
                                                    valueExpr: 'id',
                                                    value: searchTypeValue,
                                                    disabled: pivotSelectedIndex() === 1
                                                    }"></div>
      </div>
      <div id="findPatientPivot" data-bind="dxPivot: { items: [{id: 1, title: '@openAndRecent'}, {id: 2, title: '@advancedSearch'}, {id: 3, title: '@results'}],
                 selectedIndex: pivotSelectedIndex, onSelectionChanged: onPivotSelectionChanged }"
           style="position: absolute; top: 60px; bottom: 0; left: 10px; right: 10px; height: auto;">
        <div data-options="dxTemplate : { name: 'item' } ">
          <!-- ko if: $data.id == 1 -->
          <div style="position: relative; height: 50%; max-height: 100%; min-height: 50%;">

            <h5 style="margin-left: 10px; font-weight: 600!important;">Open</h5>
            <div id="openPatientsList" class="listParent" data-bind="dxList: { dataSource: MyPen.app.openPatients.patients,
                                                noDataText: 'No Open Patients', showScrollbar: 'always',
                                                onItemClick: $root.openPatientClick }" style="position: absolute; top: 30px; bottom: 15px; height: auto;">
              <div data-options="dxTemplate:{ name:'item' }">
                <div class="table-container">
                  <div class="table-row">
                    <div class="table-cell">
                      <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: $data"></div>
                    </div>
                    <div data-bind="if: !$root.isCallBackMode()" class="table-cell" style="vertical-align: middle;">
                      <div class="patientBannerButton fal fa-times" style="color: black;" data-bind="dxclick: $root.openPatientRemoveClick"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style="position: relative; height: 50%; max-height: 100%; min-height: 50%;">
            <h5 style="margin-left: 10px; font-weight: 600!important;">Recent</h5>
            <div id="recentPatientsList" data-bind="dxList: { dataSource: MyPen.db.patient.recentPatients,
                                                    noDataText: '@noResults',
                                                    onItemClick: $root.patientClick,
                                                    pageLoadMode: 'scrollBottom', showScrollbar: 'always'
                                                } " style="position: absolute; top: 30px; bottom: 0px; height: auto;">
              <div data-options="dxTemplate:{ name:'item' }">
                <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMiniRecent' }" data-bind="with: $data"></div>
              </div>
            </div>
          </div>
          <!-- /ko -->
          <!-- ko if: $data.id == 2 -->
          <div id="advancedSearchValidation" data-bind="dxScrollView: {}, dxValidationGroup: {} ">
            <div style="padding: 0 10px 0 10px;">
              <div style="margin-bottom: 10px;" data-bind="dxValidationSummary: { onOptionChanged: $root.advancedSearch.validationSummaryOptionChanged }"></div>
              <div class="flex">
                <div class="flexRatio1" style="padding: 5px;">
                  <p class="sh-field-label">@familyName</p>
                  <div id="familyNameAdvancedTxt" class="sh-field-value" data-bind="shTextBox: { value: $root.advancedSearch.familyName, tabIndex: 1, maxLength: 200,
                                     onEnterKey: $root.advancedSearch.searchButtonClick, onKeyPress: $root.advancedSearch.keyPressValidation }, dxValidator: $root.advancedSearch.validation()"></div>
                  <p class="sh-field-label">@addressLine1</p>
                  <div class="sh-field-value" data-bind="shTextBox: { value: $root.advancedSearch.addressLine1, tabIndex: 3, maxLength: 200,
                                     onEnterKey: $root.advancedSearch.searchButtonClick, onKeyPress: $root.advancedSearch.keyPressValidation }, dxValidator: $root.advancedSearch.validation()"></div>
                  <p class="sh-field-label">@dateOfBirth</p>
                  <div class="sh-field-value" data-bind="dxDateBox: { value: $root.advancedSearch.dateOfBirth, max: new Date(), width: '100%', onEnterKey: $root.advancedSearch.searchButtonClick,
                                    tabIndex: 5, pickerType: DevExpress.devices.real().deviceType === 'desktop'? 'calendar' : 'native' }, dxValidator: $root.advancedSearch.validation()"></div>
                </div>
                <div class="flexRatio1" style="padding: 5px;">
                  <p class="sh-field-label">@givenName</p>
                  <div class="sh-field-value" data-bind="shTextBox: { value: $root.advancedSearch.givenNames, tabIndex: 2, maxLength: 200,
                                     onEnterKey: $root.advancedSearch.searchButtonClick, onKeyPress: $root.advancedSearch.keyPressValidation }, dxValidator: $root.advancedSearch.validation()"></div>
                  <p class="sh-field-label">@postcode</p>
                  <div class="sh-field-value" data-bind="shTextBox: { value: $root.advancedSearch.postcode, tabIndex: 4, maxLength: 200,
                                     onEnterKey: $root.advancedSearch.searchButtonClick, onKeyPress: $root.advancedSearch.keyPressValidation }, dxValidator: $root.advancedSearch.validation()"></div>
                  <p class="sh-field-label">@homeTelephone</p>
                  <div class="sh-field-value" data-bind="shTextBox: { value: $root.advancedSearch.homePhone, tabIndex: 6, maxLength: 200,
                                     onEnterKey: $root.advancedSearch.searchButtonClick, onKeyPress: $root.advancedSearch.phoneKeyPressValidation }, dxValidator: $root.advancedSearch.validation()"></div>
                </div>
              </div>

              <p class="sh-field-label">@includeDeceasedPatients</p>
              <div style="display: block;">
                <div class="sh-field-value" data-bind="dxSwitch: {  value: $root.advancedSearch.includeDeceasedPatients, switchedOnText: 'Yes', switchedOffText: 'No', tabIndex: 7 }  "></div>
                <div class="dx-switch-label" data-bind="text: $root.advancedSearch.includeDeceasedPatients()? 'Yes' : 'No'"></div>
              </div>
              <!-- ko if: MyPen.app.user.hasPASLink -->
              <p class="sh-field-label">@pasSearchOnly</p>
              <div style="display: block;">
                <div class="sh-field-value" data-bind="dxSwitch: {  value: $root.advancedSearch.pasSearchOnly, switchedOnText: 'Yes', switchedOffText: 'No', tabIndex: 8 }  "></div>
                <div class="dx-switch-label" data-bind="text: $root.advancedSearch.pasSearchOnly()? 'Yes' : 'No'"></div>
              </div>
              <!-- /ko -->

              <div style="position: absolute; bottom: 0; left: 20px; right: 10px; height: 50px; text-align: right;">
                <div data-bind="dxButton: { text: 'Search', onClick: $root.advancedSearch.searchButtonClick, tabIndex: 9 }"></div>
              </div>
            </div>
          </div>
          <!-- /ko -->
          <!-- ko if: $data.id == 3 -->
          <div id="patientSearchResults" tabindex="1" data-bind="dxList: { dataSource: MyPen.db.patient.search,
                                                    noDataText: '@noResults',
                                                    onItemClick: $root.patientClick,
                                                    pageLoadMode: 'scrollBottom',
                                                    showScrollbar: 'always'
                                                } "
               style="position:absolute; top: 0px; bottom: 0px; width: 100%;">
            <div data-options="dxTemplate:{ name:'item' }">
              <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: $data"></div>
            </div>
          </div>
          <!-- /ko -->
        </div>
      </div>

      <!-- ko if: !MyPen.app.user.canOnlyAddPatientsFromPAS() && (pivotSelectedIndex() === 0 || pivotSelectedIndex() === 2) -->
      <div style="min-width: 0; border-radius: 100%; position: absolute; bottom: 10px; right: 10px; box-shadow: 0 0 4px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.28"
           data-bind="dxButton: { height: '50px', width: '50px', icon: 'fal fa-plus', onClick: AddPatient, visible: addButtonVisible }"></div>
      <!-- /ko -->
      <!-- ko if: pasDialog.visible -->
      <div style="opacity: 0.6; background-color: dimgrey; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
      <div class="centerText" data-bind="style: { height: pasDialog.mode() >= 2? '90%' : '50%' }" style="background: #fff; width: 500px; height: 90%; padding: 20px; text-align: left;">
        <!-- ko if: pasDialog.mode() === -1 -->
        <div class="warningText" style="margin-bottom: 30px; font-size: 20px;">Unable to import from PAS</div>
        <div style="position: absolute; bottom: 0; left: 20px; right: 20px; height: 50px; text-align: right;">
          <div data-bind="dxButton: { text: 'Cancel', onClick: pasDialog.cancelButtonClick }"></div>
        </div>
        <!-- /ko -->
        <!-- ko if: pasDialog.mode() === 0 -->
        <div class="warningText" style="margin-bottom: 10px; font-size: 20px;">Unable to import patient from PAS</div>
        <h6 class="notes-text" data-bind="text: pasDialog.PASPatient.importError" style="margin-bottom: 30px;"></h6>
        <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.PASPatient"></div>
        <div style="position: absolute; bottom: 0; left: 20px; right: 20px; height: 50px; text-align: right;">
          <div data-bind="dxButton: { text: 'Cancel', onClick: pasDialog.cancelButtonClick }"></div>
        </div>
        <!-- /ko -->
        <!-- ko if: pasDialog.mode() === 1 -->
        <h4 class="baseColourLight" style="margin-bottom: 10px; font-size: 20px;">Patient does not exist locally.</h4>
        <h6 style="margin-bottom: 30px;">Import into MyPen?</h6>
        <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.PASPatient"></div>
        <div style="position: absolute; bottom: 0; left: 20px; right: 20px; height: 50px; text-align: right;">
          <div style="margin-right: 5px;" data-bind="dxButton: { text: 'Import', onClick: pasDialog.importButtonClick }"></div>
          <div data-bind="dxButton: { text: 'Cancel', onClick: pasDialog.cancelButtonClick }"></div>
        </div>
        <!-- /ko -->
        <!-- ko if: pasDialog.mode() === 2 -->
        <div class="baseColourLight" style="margin-bottom: 10px; font-size: 20px;">This patient record differs between PAS and MyPen</div>
        <h6>Update this MyPen patient from PAS?</h6>
        <div data-bind="dxScrollView: {  showScrollbar: 'always' }" style="position: absolute; top: 100px; bottom: 60px; height: auto;">
          <div style="font-weight: 600;">Local</div>
          <div style="margin: 3px 0 15px 0;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.LocalPatient"></div>
          <div style="margin-bottom: 2px;">Difference(s)</div>
          <div class="smallListItems" data-bind="dxList: { items: pasDialog.LocalDifferences, height: 'auto', focusStateEnabled: false,
                         activeStateEnabled: false, hoverStateEnabled: false }">
            <div data-options="dxTemplate:{name: 'item'}">
              <div style="font-weight: 600;" class="ellipsis" data-bind="text: desc"></div>
            </div>
          </div>
          <h1 style="text-align: center; width: 100%; margin-top: 10px;" class="fa fa-angle-double-up"></h1>
          <div style="font-weight: 600;">PAS</div>
          <div style="margin: 3px 0 15px 0;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.PASPatient"></div>
          <div style="margin-bottom: 2px;">Difference(s)</div>
          <div class="smallListItems" data-bind="dxList: { items: pasDialog.PASDifferences, height: 'auto', focusStateEnabled: false,
                         activeStateEnabled: false, hoverStateEnabled: false }">
            <div data-options="dxTemplate:{name: 'item'}">
              <div style="font-weight: 600;" class="ellipsis" data-bind="text: desc"></div>
            </div>
          </div>
        </div>
        <div style="position: absolute; bottom: 0; left: 20px; right: 20px; height: 50px; text-align: right;">
          <div style="margin-right: 5px;" data-bind="dxButton: { text: 'Update', onClick: pasDialog.updateButtonClick }"></div>
          <div style="margin-right: 5px;" data-bind="dxButton: { text: 'Don\'t Update', onClick: pasDialog.dontImportButtonClick }"></div>
          <div data-bind="dxButton: { text: 'Cancel', onClick: pasDialog.cancelButtonClick }"></div>
        </div>
        <!-- /ko -->
        <!-- ko if: pasDialog.mode() === 3 -->
        <div class="baseColourLight" style="margin-bottom: 10px; font-size: 20px;">This PAS record has duplicate MyPen patients</div>
        <div data-bind="dxScrollView: {  showScrollbar: 'always' }" style="position: absolute; top: 70px; bottom: 60px; height: auto;">

          <div class="bold">PAS</div>
          <div style="margin: 3px 0 0px 0;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.PASPatient"></div>
          <h6 style="margin: 30px 0 20px 0; font-weight: 600!important;">MyPen already contains two patients with the same PAS identifier. Which would you like to keep (merging the other)?</h6>

          <div class="sh-hyperlink" data-bind="dxclick: pasDialog.KeepLocalPatientClick">
            <div class="bold" style="color: black;">Keep your selected patient</div>
            <div style="margin: 3px 0 30px 0;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.LocalPatient"></div>
          </div>

          <div class="sh-hyperlink" data-bind="dxclick: pasDialog.KeepDuplicatePatientClick">
            <div class="bold" style="color: black;">Keep the duplicate patient</div>
            <div style="margin: 3px 0 0 0;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: pasDialog.DuplicatePatient"></div>
          </div>

        </div>
        <div style="position: absolute; bottom: 0; left: 20px; right: 20px; height: 50px; text-align: right;">
          <!--<div style="margin-right: 5px;" data-bind="dxButton: { text: 'Merge', onClick: pasDialog.mergeButtonClick }"></div>
          <div style="margin-right: 5px;" data-bind="dxButton: { text: 'Don\'t Merge', onClick: pasDialog.dontImportButtonClick }"></div>-->
          <div data-bind="dxButton: { text: 'Cancel', onClick: pasDialog.cancelButtonClick }"></div>
        </div>
        <!-- /ko -->
      </div>
      <!-- /ko -->
    </div>

    <div class="sh-popover-menu" data-bind="dxPopover: { visible: patientExtras.extraPopover.visible, target: patientExtras.extraPopover.target, closeOnOutsideClick: true, width: '170px' }">
      <div style="height: 100%;" data-bind="dxList: { dataSource: patientExtras.datasource, onItemClick: patientExtras.showExtraItem }">
        <div style="display: inline; margin-right: 6px;" data-bind="css: Icon"></div>
        <div style="display: inline;" data-bind="text: Name"></div>
      </div>
    </div>


    <!-- used for patient merge mode -->

    <div data-bind="dxPopup: { toolbarItems: [
         { toolbar: 'bottom', location: 'after', widget: 'dxButton', disabled: patientExtras.mergePopover.disabled, options:
            {
               text: '@merge',
               onClick: patientExtras.Merge
            }
         },
         { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
             {
                text: '@cancel',
                onClick: Cancel
             }
          }],
             visible: patientExtras.mergePopover.visible,
             width: '550px',
             title: 'Patient Merge',
             }">

      <div class="sh-form-section-top">Patient to Retain</div>
      <div class="sh-field-value" style="width: 100%; display: block; margin-left: 10px;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: patient"></div>

      <!--<div data-bind="dxButton: { text: 'Add', onClick: patientExtras.addPatientClick }"></div>-->
      <!--<h5 style="font-weight: bold!important;">Remove</h5>-->
      <div class="sh-toolbar-transparent" data-bind="dxToolbar: { items: [
                                                { location: 'before', text: 'Patients to Merge'},
                                                { location: 'after', options: { icon: 'fal fa-plus', text: 'Add', onClick: patientExtras.addPatientClick }, widget: 'dxButton' }
                                     ] }"></div>
      <div data-bind="dxList: { dataSource: mergePatientList, noDataText: '@noResults', onItemClick: '', allowItemDeleting: true,
                 itemDeleteMode: 'static', noDataText: '@noPatientsToMerge', onItemDeleted: onItemDeleted  } "
           style="position: absolute; top: 245px; bottom: 50px; left: 20px; right: 20px; height: auto;">
        <div data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: $data"></div>
      </div>
    </div>
  </div>
</div>