<div >
<div id="acctinfo">
  <div id="acctinfo_f">
    <label ng-show="filter.mode=='ON'" class="filtered">Filtered</label>
    <label ng-show="filter.mode=='EFF'" class="active" title="Show effective signatures only">Effective</label>
    <label ng-show="filter.mode=='OFF'" class="showall">Showing All</label>
  <input id="b_filter" type="button" value="Filter" ng-click="filterOpen()" />

    <div id="acctinfo_br_acct" ng-show="acctData.acctType=='A'" class="tbr">
      <div ng-show="acctData.acctStatus=='Active'" class="tbr">
        <span id="l_acctstatus" class="acct_active roundlabel">Active</span>
      </div> 
      </div>    
    </div> 

    <!--<input id="b_acctmore" type="button" value="More" />-->
  </div>
  <div id="acctinfo_l" class="tbr">
    <label id="l_cif" for="f_cif" ng-class="{disabled:acctData.acctType!='C'}">No. :</label>
    <input id="f_cif" type="text" ng-model="acctData.cifNo" readonly ng-class="{disabled:acctData.acctType!='C'}" />
    <label id="l_acctno" for="f_acctno" ng-class="{disabled:acctData.acctType!='A'}">Account:</label>
    <input id="f_acctprefix" type="text" ng-model="acctData.acctPrefix" readonly ng-class="{disabled:acctData.acctType!='A'}" />
    <input id="f_acctno" type="text" ng-model="acctData.acctNo" readonly ng-class="{disabled:acctData.acctType!='A'}" />
    <label id="l_engname" for="f_engname">Name :</label>
    <input id="f_engname" type="text" ng-model="acctData.acctEngName" readonly />

    <div id="acctinfo_bl" class="tbr">
      <label id="l_remark" for="f_remark" ng-class="{disabled:acctData.acctType!='A'}">Remark :</label>  
     <textarea id="f_remark" cols="20" rows="3" readonly ng-model="acctData.acctRemark" ng-class="{disabled:acctData.acctType!='A'}"></textarea>
   </div>

  </div>
  <div id="acctinfo_r" class="tbr">
    <label id="l_refacctno" for="f_refacctno" ng-class="{disabled:acctData.acctType!='A'}">Referral :</label>
    <input id="f_refacctprefix" type="text" ng-model="acctData.refAcctPrefix" readonly ng-class="{disabled:acctData.acctType!='A'}" />
    <input id="f_refacctno" type="text" ng-model="acctData.refAcctNo" readonly ng-class="{disabled:acctData.acctType!='A'}" />

  <div id="document_id" class="tbr" ng-show="acctData.acctType!='A'">
    <label id="l_docid" for="f_chiname">ID :</label>
      <input id="f_doctype" type="text" ng-model="acctData.docType" readonly />
      <input id="f_docid" type="text" ng-model="acctData.docId" readonly />
    </div>
    <div id="acctinfo_br" class="tbr" ng-show="acctData.acctType=='A'">
    <label id="l_ciflist" for="f_ciflist">List :</label>  
    <textarea id="f_ciflist" wrap="off" readonly ng-model="acctData.cifList"></textarea>
  </div>   
  </div>

  <div id="acctinfo_br_cif" ng-show="acctData.acctType=='C'" class="tbr">
    <label for="f_packagebanking">Banking :</label>
    <input id="f_packagebanking" type="text" ng-model="acctData.packageBanking" readonly />
    <label id="l_aio" for="f_aio">AIO :</label>
    <input id="f_aio" type="text" ng-model="acctData.AIO"  readonly />
    <label for="f_customertype">Type :</label>
    <input id="f_customertype" type="text" ng-model="acctData.custType" readonly />
  </div>

  <!-- Moved footer to center //--> 
  <div id="acctdetails" class="tbr">
    <label id="l_si" for="f_si" ng-class="{disabled:acctData.acctType!='A'}">Instruction</label>
    <textarea id="f_si" cols="70" rows="3" readonly ng-model="acctData.signInst" ng-class="{disabled:acctData.acctType!='A'}">
    </textarea>
  </div> 
  <div id="navctrl">
    <input id="b_close" type="button" class="nav" value="Close" ng-click="closeinterface()" />     
    <input id="b_next" type="button" class="nav" value="Next" ng-disabled="dispSignCountEnd==dispFilteredSignCount" ng-click="nextPage()" />
    <input id="b_prev" type="button" class="nav" value="Previous" ng-disabled="dispSignCountStart<=1" ng-click="prevPage()" /> 
  </div>    
  <div id="pagination">
    <label>Showing : {{dispSignCountStart}} to {{dispSignCountEnd}} of {{dispFilteredSignCount}}</label>
    <label ng-show="false">(Total:{{dispTotalSignCount}})</label>
  </div>

</div>
<div id="signinfo" class="tbr">
  <div ng-show="dispFilteredSignCount == 0" class="nosignfound">
    <span>No Signature</span>
  </div>
  <div ng-repeat="sign in ui.displayingSignatures">
    <unisys-signinterface 
    data-sign-img-url="{{sign.imageUrl}}"
    data-eff-date="{{sign.effDate}}"
    data-exp-date="{{sign.expDate}}"
    data-remark="sign.remark"
    data-canvas-width='360'
    data-canvas-height='200'
    data-allow-history="true"
    data-data="sign"
    > </unisys-signinterface>
  </div>
</div>
<!--  
<div id="acctdetails" class="tbr">
  <label id="l_si" for="f_si" ng-class="{disabled:acctData.acctType!='A'}">Signing Instruction</label>
  <textarea id="f_si" cols="70" rows="3" readonly ng-model="acctData.signInst" ng-class="{disabled:acctData.acctType!='A'}">
  </textarea >
</div> 
-->
<div id="navinfo" class="tbr">
  <!--  
  <div id="pagination">
    <label>Showing : {{dispSignCountStart}} to {{dispSignCountEnd}} of {{dispFilteredSignCount}}</label>
    <label ng-show="false">(Total:{{dispTotalSignCount}})</label>
  </div>
  <div id="navctrl">
    <input id="b_close" type="button" class="nav" value="Close" ng-click="closeinterface()" />
    <input id="b_next" type="button" class="nav" value="Next" ng-disabled="dispSignCountEnd==dispFilteredSignCount" ng-click="nextPage()" />
    <input id="b_prev" type="button" class="nav" value="Previous" ng-disabled="dispSignCountStart<=1" ng-click="prevPage()" />
  </div> 
  -->  
  <div id="filterwrapper" class="overlay" ng-show="filter.disp">
    <div id="filterctrl">
     <div> <p><b>Filter displayed by:</b></p></div>
      <div>    
        <label for="l_filtersignname">Name contains:</label>
        <input id="f_filtersignname" type="text" ng-model="filter.toapply.signName" ng-pattern="/^[A-Z]*/" capitalize />
        <label for="l_filterdocid">Doc ID contains:</label>
        <input id="f_filterdocid" type="text" ng-model="filter.toapply.docId" capitalize />
        <label for="l_filtergroupid">Group:</label>
        <input id="f_filtergroupid" type="text" ng-model="filter.toapply.groupId" capitalize />
        <label for="l_filtereffdate">Date:</label>
        <input id="f_filtereffdate" type="text" ng-model="filter.toapply.effDate" />
        <input id="f_filtertoday" type="button" value="Set Today" ng-click="filterSetEffDateToday()" />
        <div class="clear"></div>
      </div>
      <div class="ctrl">
        <input id="filterclose" type="button" class="nav" value="Close" ng-click="filterClose()" />
      </div>
    </div>
  </div>
  <div id="sm_warn_wrapper" class="overlay" ng-show="sm_warn.disp">
    <div id="sm_warnctrl">
    <label id="sm_warnmsg">{{sm_WarnMessage}}</label>
      <div class="ctrl">
        <input id="sm_warnclose" type="button" class="nav" value="Close" ng-click="smWarnClose()" />
      </div>
    </div>
  </div>

  <div class="overlay" ng-show="msg_suspend.disp">
    <div id="msg_suspend_ctrl">
    <label id="msg_suspend_text">The {{msg_suspendType}} is being suspended by
    <b>[{{msg_suspendUser}}]</b> of branch <b>[{{msg_suspendCode}}]</b></label>
      <div class="ctrl">
        <input id="s_Close" type="button" class="nav" value="Close" ng-click="sSuspendClose()" />
      </div>
    </div>
  </div>    

  <div class="overlay" ng-show="msg_prompt.disp">
    <div id="msg_prompt_ctrl">
    <label id="msg_prompt_text">The status is 
    <font style="color:#ff0000">[{{msg_promptMsg}}]</font> and therefore will not be viewable.
    <br/><b>Do you want to override it?</b></label>
      <div class="ctrl">
        <input id="ovr_No" type="button" class="nav" value="No" ng-click="msg_prompt_No()" />      
        <input id="ovr_Yes" type="button" class="nav" value="Yes" ng-click="msg_prompt_Yes()" />
      </div>
    </div>
  </div>  

  <div class="overlay" ng-show="retry_prompt.disp">
    <div id="retry_prompt_ctrl">
    <label >Incorrect override request.</label>
      <div class="ctrl">
        <input id="r_Close" type="button" class="nav" value="Close" ng-click="retry_prompt_Close()" />
        <input id="r_Retry" type="button" class="nav" value="Retry" ng-click="retry_prompt_Retry()" />
      </div>
    </div>
  </div>  
   
  <div class="overlay" ng-show="pw_prompt.disp">
    <div id="pw_prompt_ctrl">
     <div> <p><b>Please enter override request :</b></p></div>  
      <div> 
        <label>Username:</label>
        <input id="pw_text" type="text" ng-model="pw_prompt.username" />
        <label>Password:</label>
        <input id="pw_text" type="password" ng-model="pw_prompt.passwd" />
      </div>
      <div class="ctrl">
        <input id="pw_Close" type="button" class="nav" value="Cancel" ng-click="pw_prompt_Close()" />      
        <input id="pw_Ok" type="button" class="nav" value="Ok" ng-click="pw_prompt_Ok()" />
      </div>
    </div>
  </div>  
</div>
</div>