<div class="col-md-12" ng-controller="ViewClientController" xmlns="http://www.w3.org/1999/html">
	<div>
	    <ul class="breadcrumb">
	        <li>{{client.officeName}}</li>
	        <li>{{client.staffName}}</li>
	    </ul>
	</div>
	<div class="row">
	    <div class="col-md-8 col-sm-8">
	        <h3 class="client-title">
	        	<i class="icon-circle {{client.status.code | StatusLookup}}"></i>
				<small ng-if="client.subStatus.description">
					[{{client.subStatus.description}}]
				</small>
	            <strong>{{client.displayName}} </strong>
	            <small>
	            	{{ 'label.heading.clientno' | translate }}: {{client.accountNo}} |
	            	{{ 'label.input.clientexternalid' | translate }}: {{client.externalId}} |
	            	{{ 'label.input.staff' | translate }}: {{client.staffName}}
	            </small>
	        </h3>
	    </div>
	</div>
	<script type="text/ng-template" id="deleteClient.html">
    <div class="modal-header silver">
        <h3 class="bolder">{{'label.heading.delete' | translate}}</h3>
    </div>
    <div class="modal-body">
        <api-validate></api-validate>
        <br>
        <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
        <button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
    </div>
	</script>
    <script type="text/ng-template" id="photo-dialog.html">
        <div class="modal-header silver">
            <img ng-src="{{largeImage}}" alt="Avatar">
        </div>
        <div class="modal-body ">
            <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
        </div>
    </script>
    <script type="text/ng-template" id="clientSignature.html">
        <div class="modal-header silver">
            <img ng-src="{{largeImage}}" alt="Signature">
        </div>
        <div class="modal-body ">
            <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
        </div>
    </script>
    <script type="text/ng-template" id="clientWithoutSignature.html">
        <div class="modal-header silver">
            <h3 class="bolder">{{'label.noClientSignature' | translate}}</h3>
        </div>
        <div class="modal-body ">
            <button class="btn btn-warning" ng-click="cancel()">{{'label.button.ok' | translate}}</button>
        </div>
    </script>

    <script type="text/ng-template" id="uploadpic.html">
    <div class="modal-header silver">
        <h3 class="bolder">{{'label.heading.selectclientimage' | translate}}</h3>
    </div>
    <div class="modal-body">
        <api-validate></api-validate>
        <br>
        <input type="file" ng-file-select="onFileSelect($files)">
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
        <button class="btn btn-primary" ng-click="upload()">{{'label.button.upload' | translate}}</button>
    </div>
    </script>
	<script type="text/ng-template" id="capturepic.html">
	    <div class="modal-header silver">
	        <h3 class="bolder">{{'label.heading.captureclientimage' | translate}}</h3>
	    </div>
	    <div class="modal-body">
	        <api-validate></api-validate>
	        <div ng-show="error != null" class="error">
	            {{'label.error' | translate}}: {{error}}
	        </div>
	        <br>
	            <div>
	                <div class="left">
	                    <webcam on-streaming="onVideoSuccess(video)"
	                        on-error="onVideoError(err)" video-width="320" video-height="240"></webcam>
	                </div>
	                <div class="right">
	                    <canvas id="clientSnapshot" width="320" height="240"></canvas>
	                </div>
	            </div>
	            <div class="center" style="margin-top: 10px">
	                <button class="btn btn-warning" ng-click="takeScreenshot()">
	                    <i class="icon-camera icon-white"></i>
	                    {{'label.button.capture' | translate}}
	                </button>
	            </div>
	    </div>
	    <div class="modal-footer">
	        <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
	        <button class="btn btn-primary" ng-click="uploadscreenshot()">{{'label.button.upload' | translate}}</button>
	    </div>
	</script>
	<script type="text/ng-template" id="deletePic.html">
		<div class="modal-header silver">
			<h3 class="bolder">{{'label.heading.deleteclientimage' | translate}}</h3>
		</div>
		<div class="modal-body">
			<api-validate></api-validate>
			<br>
			<button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
			<button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
		</div>
	</script>
	<script type="text/ng-template" id="clientunassignstaff.html">
    <div class="modal-header silver">
        <h3 class="bolder">{{'label.heading.unassignstaff' | translate}}</h3>
    </div>
    <div class="modal-body">
        <api-validate></api-validate>
        <br>
        <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
        <button class="btn btn-primary" ng-click="unassign()">{{'label.button.confirm' | translate}}</button>
    </div>
	</script>
	<script type="text/ng-template" id="uploadsig.html">
	    <div class="modal-header silver">
	        <h3 class="bolder">{{'label.heading.selectclientsignature' | translate}}</h3>
	    </div>
	    <div class="modal-body">
	        <api-validate></api-validate>
	        <br>
	        <input type="file" ng-file-select="onFileSelect($files)">
	    </div>
	    <div class="modal-footer">
	        <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
	        <button class="btn btn-primary" ng-click="upload()">{{'label.button.upload' | translate}}</button>
	    </div>
	</script>

	<tabset class="overflowhidden marginbottom0" tabset-name="clientTabset">
		<tab heading="{{'label.heading.general' | translate}}">
			<div class="col-md-12 col-sm-12">
				<div class="row primarydiv">
				    <div class="pull-right">
						<span ng-repeat="button in buttonsArray.singlebuttons">
						  <a href="{{button.href}}/{{client.id}}/{{button.subhref}}" class="btn btn-primary"
						     has-permission='{{button.taskPermissionName}}'><i
						          class="{{button.icon}} icon-white"></i>{{button.name | translate}}</a>
						</span>
				        <button type="button" class="btn btn-primary" data-ng-click="deleteClient()"
				                data-ng-show="client.status.value=='Pending'" has-permission='DELETE_CLIENT'><i
				                class="icon-trash icon-white"></i>{{"label.button.delete"
				            | translate}}
				        </button>
                        <a href="#/client/{{client.id}}/updatedefaultaccount" class="btn btn-primary"
                                data-ng-show="updateDefaultSavings" has-permission='UPDATESAVINGSACCOUNT_CLIENT'><i
                                class="icon-edit icon-white"></i>{{"label.button.updatedefaultsavings" | translate}}
                        </a>
				        <button type="button" class="btn btn-primary" data-ng-click="unassignStaffCenter()"
				                data-ng-show="client.staffId" has-permission='UNASSIGNSTAFF_CLIENT'><i class="icon-user icon-white"></i>{{"label.button.unassignstaff"
				            |
				            translate}}
				        </button>
						<span ng-show="buttonsArray.options" class="btn-group dropdown" on-toggle="toggled(open)">
						    <a class="btn btn-primary dropdown-toggle">
						        {{ 'label.button.more' | translate}}
                                    <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown dropdown-menu dropdown-menu-right">
                                        <li class="{{button.icon}}" ng-repeat="button in buttonsArray.options">
                                            <a href="#/clientscreenreport/{{client.id}}"
						               has-permission='{{button.taskPermissionName}}'>{{'label.'+ button.name |
						                translate}}</a>
						        </li>
						        <li>
						            <a data-ng-click="uploadSig()" has-permission='CREATE_CLIENTIMAGE'>{{'label.button.uploadsig'
						                | translate}}</a>
						        </li>
						        <li data-ng-show="clientAccounts.savingsAccounts">
						            <a data-ng-click="viewstandinginstruction()" has-permission='CREATE_STANDINGINSTRUCTION'>{{'label.button.viewstandinginstruction'
						                | translate}}</a>
						        </li>
						        <li data-ng-show="clientAccounts.savingsAccounts">
						            <a data-ng-click="createstandinginstruction()" has-permission='READ_STANDINGINSTRUCTION'>{{'label.button.createstandinginstruction'
						                | translate}}</a>
						        </li>
						        <li class="{{button.icon}}" data-ng-show="client.status.value=='Active'">
						            <a href="#/newclientfixeddepositaccount/{{client.id}}" has-permission='CREATE_FIXEDDEPOSITACCOUNT'>{{'label.newfixeddepositaccount' | translate}}</a>
						        </li>
						        <li class="{{button.icon}}" data-ng-show="client.status.value=='Active'">
						            <a href="#/newclientrecurringdepositaccount/{{client.id}}" has-permission='CREATE_RECURRINGDEPOSITACCOUNT'>{{'label.newrecurringdepositaccount' | translate}}</a>
						        </li>
								<li >
									<a ng-href="#{{pathToChargeOverview()}}" has-permission='READ_CLIENTCHARGE'>{{'label.button.chargesoverview' | translate }}</a>
								</li>
								<li >
									<a href="#/collateralvaluecalculator/{{client.id}}" has-permission='READ_COLLATERALPLEDGE'>{{'label.button.attachpledge' | translate }}</a>
								</li>
								<li class="{{button.icon}}">
						            <a href="#/survey/{{client.id}}">{{'label.survey' | translate}}</a>
						        </li>
								<li>
									<a href="#/clients/{{client.id}}/sms" has-permission='READ_SMS'>{{'label.button.sendsms' | translate }}</a>
								</li>
						    </ul>
						</span>
				    </div>
				</div>
				<div class="row client">
				    <div class="col-sm-9 col-md-9 paddingleft0px">
				    	<div data-ng-show="client.status.value=='Closed'">
				            <h3>{{'label.heading.clientclosed' | translate}}</h3>
				        </div>
						<div data-ng-show="client.status.value=='Rejected'">
							<h3>{{'label.heading.clientrejected' | translate}}</h3>
						</div>
						<div data-ng-show="client.status.value=='Withdrawn'">
							<h3>{{'label.heading.withdrawn' | translate}}</h3>
						</div>
				        <div>
							<api-validate></api-validate>
							<div class="pull-right" data-ng-show="charges">
						        <span>
						            <button type="button" class="btn-primary btn btn-sm" data-ng-click="routeToChargeOverview()">{{
										'label.button.chargesoverview' | translate }}
									</button>
						        </span>
							</div>
							<div  data-ng-show="charges">
								<div class="span gray-head">
										<span class="boldlabel">
											  <strong>{{ 'label.heading.upcomingcharges' | translate }}</strong>
										</span>
								</div>
								<table class="table table-condensed">
									<tr class="graybg">
										<th>{{'label.heading.name' | translate}}</th>
										<th>{{'label.heading.dueasof' | translate}}</th>
										<th>{{'label.heading.due' | translate}}</th>
										<th>{{'label.heading.paid' | translate}}</th>
										<th>{{'label.heading.waived' | translate}}</th>
										<th>{{'label.heading.outstanding' | translate}}</th>
										<th>{{'label.heading.actions' | translate}}</th>
									</tr>
									<tr class="pointer-main" ng-repeat="charge in charges">
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">
                                            <i class="icon-stop  {{ (!(charge.isWaived || charge.isPaid)) |StatusLookup}}" ></i>&nbsp;{{charge.name}}
                                            </td>
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">{{charge.dueDate|DateFormat}}</td>
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">{{charge.amount | number}}</td>
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">{{charge.amountPaid | number}}</td>
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">{{charge.amountWaived | number}}</td>
										<td class="pointer" data-ng-click="routeToCharge(charge.id)">{{charge.amountOutstanding | number}}</td>
										<td class="pointer center">
											<a tooltip="{{'label.button.paycharge' | translate}}" has-permission='PAY_CLIENTCHARGE' ng-href="#/viewclient/{{client.id}}/paycharge/{{charge.id}}" class="btn btn-xs btn-primary ng-binding">
												<i class="icon-dollar icon-white"></i>
											</a>&thinsp;
											<a tooltip="{{'label.button.waivecharge' | translate}}" has-permission='WAIVE_CLIENTCHARGE' ng-click="waiveCharge(charge.id)" class="btn btn-xs btn-primary ng-binding">
												<i class="icon-flag icon-white"></i>
											</a>
										</td>
									</tr>
								</table>
							</div>

							<div class="pull-right" ng-hide="true">
						        <span data-ng-show="clientAccounts.loanAccounts">
						            <button type="button" class="btn-primary btn btn-sm" data-ng-click="setLonaAppStatusFilter('above300')">{{
										'label.button.viewclosedloans' | translate }}
									</button>
						            <button type="button" class="btn-primary btn btn-sm" data-ng-click="setLonaAppStatusFilter()">{{
										'label.button.viewactiveloans' | translate }}
									</button>
						        </span>
							</div>
							<div data-ng-show="loanApplications.length > 0">
								<div class="span gray-head">
									<span class="boldlabel">
									      <strong>{{ 'label.heading.loanapplications' | translate }}</strong>
									</span>
								</div>
								<table class="table table-condensed">
									<tr class="graybg">
										<th>{{'label.heading.loan.application.number' | translate}}</th>
										<th>{{'label.heading.loan.amount.requested' | translate}}</th>
										<th>{{'label.heading.loanproduct' | translate}}</th>
										<th>{{'label.heading.type' | translate}}</th>
										<th>{{'label.heading.actions' | translate}}</th>
									</tr>
									<tr class="pointer-main" ng-repeat="loanApp in loanApplications | orderBy:'id':true| filter:isLoanAppIncompleted">
										<td class="pointer" data-ng-click="routeToLoanApplication(loanApp)">
											<i tooltip-placement="right" tooltip="{{loanApp.status.value}}"
											   class="icon-stop {{loanApp.status.code | StatusLookup}}"></i>
											{{loanApp.loanApplicationReferenceNo}}
										</td>
										<td class="pointer" data-ng-click="routeToLoanApplication(loanApp)">{{loanApp.loanAmountRequested|number}}</td>
										<td class="pointer" data-ng-click="routeToLoanApplication(loanApp)">{{loanApp.loanProductName}}</td>
										<td class="pointer center" ng-if="loanApp.accountType.value == 'Individual'" data-ng-click="routeToLoanApplication(loanApp)">
											<i tooltip="{{loanApp.accountType.value}}" class="icon-user icon-large"></i>
										</td>
										<td class="pointer center" ng-if="loanApp.accountType.value != 'Individual'" data-ng-click="routeToLoanApplication(loanApp)">
											<i tooltip="{{loanApp.accountType.value}}" class="icon-group icon-large"></i>
										</td>
										<td class="pointer center">
											<a tooltip="{{'label.button.request.approval' | translate}}" has-permission='REQUESTFORAPPROVAL_LOANAPPLICATIONREFERENCE' data-ng-click="requestApprovalLoanAppRef(loanApp.loanApplicationReferenceId)" class="btn btn-xs btn-primary ng-binding" ng-if="loanApp.status.id === 100">
												<i class="icon-ok icon-white"></i>
											</a>
											<a tooltip="{{'label.button.approve' | translate}}" has-permission='APPROVE_LOANAPPLICATIONREFERENCE' ng-href="#/approveloanapplicationreference/{{loanApp.loanApplicationReferenceId}}" class="btn btn-xs btn-primary ng-binding" ng-if="loanApp.status.id === 200">
												<i class="icon-ok icon-white"></i>
											</a>
											<a tooltip="{{'label.button.disburse' | translate}}" has-permission='DISBURSE_LOANAPPLICATIONREFERENCE' ng-href="#/disburseloanapplicationreference/{{loanApp.loanApplicationReferenceId}}" class="btn btn-xs btn-primary ng-binding" ng-if="loanApp.status.id === 300">
												<i class="icon-flag icon-white"></i>
											</a>
										</td>
									</tr>
								</table>
							</div>

							<div class="pull-right">
						        <span data-ng-show="clientAccounts.loanAccounts">
						            <button data-ng-show="openLoan" type="button" class="btn-primary btn btn-sm" data-ng-click="setLoan()">{{
										'label.button.viewclosedloans' | translate }}
									</button>
						            <button data-ng-show="!openLoan" type="button" class="btn-primary btn btn-sm" data-ng-click="setLoan()">{{
										'label.button.viewactiveloans' | translate }}
									</button>
						        </span>
							</div>
						    <div data-ng-show="clientAccounts.loanAccounts">
						        <div class="span gray-head">
									<span class="boldlabel">
									      <strong>{{ 'label.heading.loanaccoverview' | translate }}</strong>
									</span>
						        </div>
						        <table class="table table-condensed" data-ng-show="openLoan">
						            <tr class="graybg">
						            	<th>{{'label.heading.accnum' | translate}}</th>
						                <th>{{'label.heading.loanaccount' | translate}}</th>
						                <th>{{'label.heading.loanamount' | translate}}</th>
						                <th>{{'label.heading.outstandingamount' | translate}}</th>
						                <th>{{'label.heading.dueamount' | translate}}</th>
						                <th>{{'label.heading.type' | translate}}</th>
						                <th>{{'label.heading.actions' | translate}}</th>
						            </tr>
						            <tr class="pointer-main"
						                ng-repeat="loanaccount in clientAccounts.loanAccounts | orderBy:'id':true | filter:isLoanNotClosed">
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">
						                	<i ng-hide="loanaccount.inArrears" tooltip-placement="right" tooltip="{{loanaccount.status.value}}"
						                    	class="icon-stop {{loanaccount.status.code | StatusLookup}}"></i>
						                    <i ng-show="loanaccount.inArrears" tooltip-placement="right" tooltip="{{loanaccount.status.value}}"
						                     	class="icon-stop {{loanaccount.status.code | StatusLookup}}overdue"></i>
						                	{{loanaccount.accountNo}}
						                </td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.productName}}</td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.originalLoan|number}}</td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.loanBalance|number}}</td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.amountPaid|number}}</td>
						                <td class="pointer center" data-ng-click="routeToLoan(loanaccount.id)" ng-if="loanaccount.loanType.value == 'Individual'">
						                	<i tooltip="{{loanaccount.loanType.value}}" class="icon-user icon-large"></i>
						                </td>
						                <td class="pointer center" data-ng-click="routeToLoan(loanaccount.id)" ng-if="loanaccount.loanType.value != 'Individual'">
						                	<i tooltip="{{loanaccount.loanType.value}}" class="icon-group icon-large"></i>
						                </td>
						                <td class="pointer center" ng-if="loanaccount.status.active">
						                	<a tooltip="{{'label.button.makerepayment' | translate}}" ng-href="#/loanaccount/{{loanaccount.id}}/repayment" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-dollar icon-white"></i>
						                	</a>
						                </td>
						                <td class="pointer center" ng-if="loanaccount.status.pendingApproval">
						                	<a tooltip="{{'label.button.approve' | translate}}" has-permission='APPROVE_LOAN' ng-href="#/loanaccount/{{loanaccount.id}}/approve" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-ok icon-white"></i>
						                	</a>
						                </td>
						                <td class="pointer center" ng-if="!loanaccount.status.pendingApproval && !loanaccount.status.active">
						                	<a tooltip="{{'label.button.disburse' | translate}}" has-permission='DISBURSE_LOAN' ng-href="#/loanaccount/{{loanaccount.id}}/disburse" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-flag icon-white"></i>
						                	</a>
						                </td>
						            </tr>
						        </table>
						        <table class="table table-condensed" data-ng-show="!openLoan">
						            <tr class="graybg">
						            	<th>{{'label.heading.accnum' | translate}}</th>
						                <th>{{'label.heading.loanaccount' | translate}}</th>
						                <th class="center">{{'label.heading.type' | translate}}</th>
						                <th>{{'label.heading.closedate' | translate}}</th>
						            </tr>
						            <tr class="pointer-main"
						                ng-repeat="loanaccount in clientAccounts.loanAccounts | orderBy:'id':true | filter:isClosed">
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">
						                	<i tooltip-placement="right" tooltip="{{loanaccount.status.value}}" class="icon-stop {{loanaccount.status.code | StatusLookup}}"></i>
						                	{{loanaccount.accountNo}}
						                </td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.productName}}</td>
                                        <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.originalLoan|number}}</td>
                                        <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.loanBalance|number}}</td>
                                        <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">{{loanaccount.amountPaid|number}}</td>
						                <td class="pointer center" data-ng-click="routeToLoan(loanaccount.id)" ng-if="loanaccount.loanType.value == 'Individual'">
						                	<i tooltip="{{loanaccount.loanType.value}}" class="icon-user icon-large"></i>
						                </td>
						                <td class="pointer center" data-ng-click="routeToLoan(loanaccount.id)" ng-if="loanaccount.loanType.value != 'Individual'">
						                	<i tooltip="{{loanaccount.loanType.value}}" class="icon-group icon-large"></i>
						                </td>
						                <td class="pointer" data-ng-click="routeToLoan(loanaccount.id)">
						                    <span data-ng-show="loanaccount.timeline.closedOnDate">{{loanaccount.timeline.closedOnDate | DateFormat}}</span>
						                </td>
						            </tr>
						        </table>
						    </div>
						    <div data-ng-show="clientAccounts.savingsAccounts">
						        <div class="pull-right">
						            <span data-ng-show="clientAccounts.savingsAccounts">
						                <button data-ng-show="openSaving" type="button" data-ng-click="setSaving()"
						                        class="btn-primary btn btn-sm">
						                    {{ 'label.button.viewclosedsavings' | translate }}
						                </button>
						                <button data-ng-show="!openSaving" type="button" data-ng-click="setSaving()"
						                        class="btn-primary btn btn-sm">
						                    {{ 'label.button.viewactivesavings' | translate }}
						                </button>
						            </span>
						        </div>
						        <div class="span gray-head">
						            <span class="boldlabel">
						                <strong>{{'label.heading.savingsaccoverview' | translate }}</strong>
						            </span>
						        </div>
						        <table class="table table-condensed" data-ng-show="openSaving">
						            <tr class="graybg">
						                <th>{{'label.heading.accnum' | translate}}</th>
   						                <th>{{'label.heading.savingaccount' | translate}}</th>
										<th>{{'label.heading.lastActive' | translate}}</th>
										<th class="center">{{'label.heading.balance' | translate}}</th>
						                <th>Actions</th>
						            </tr>
						            <tr class="pointer-main"
						                ng-repeat="savingaccount in clientAccounts.savingsAccounts | orderBy:'id':true | filter:isSavingNotClosed">
						                <td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">
					                		<i tooltip-placement="right" ng-show="savingaccount.subStatus.id==0" tooltip="{{savingaccount.status.value}}" class="icon-stop {{savingaccount.status.code | StatusLookup}}"></i>
											<i tooltip-placement="right" ng-hide="savingaccount.subStatus.id==0"  tooltip="{{savingaccount.status.value+':'+savingaccount.subStatus.value}}" class="icon-stop {{savingaccount.status.code+savingaccount.subStatus.value | StatusLookup}}"></i>
											{{savingaccount.accountNo}}
						                </td>
						                <td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">{{savingaccount.productName}}</td>
										<td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">{{savingaccount.lastActiveTransactionDate|DateFormat}}</td>
						                <td class="pointer center" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">{{savingaccount.accountBalance|number}}</td>
						                <td class="pointer" ng-if="savingaccount.status.active">
											<span ng-repeat="button in savingsActionbuttons">
											  <a tooltip="{{'label.'+button.name | translate}}" ng-show="button.name" has-permission='{{button.taskPermissionName}}'
												 ng-click="navigateToSavingsOrDepositAccount(button.name.replace('button.',''), savingaccount.id, savingaccount.depositType.id)"
												 class="btn btn-xs btn-primary ng-binding" ng-if="savingaccount.depositType.id==button.type"><i class="{{button.icon}} icon-white"></i>
											  </a>
											</span>
						                </td>
						                <td class="pointer" ng-if="savingaccount.status.submittedAndPendingApproval">
						                	<a tooltip="{{'label.button.approve' | translate}}" has-permission='APPROVE_SAVINGSACCOUNT' ng-href="#/savingaccount/{{savingaccount.id}}/approve" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-ok icon-white"></i>
						                	</a>
						                </td>
						                <td class="pointer" ng-if="!savingaccount.status.submittedAndPendingApproval && !savingaccount.status.active">
						                	<a tooltip="{{'label.button.undoapproval' | translate}}" has-permission='APPROVALUNDO_SAVINGSACCOUNT' ng-href="#/savingaccount/{{savingaccount.id}}/undoapproval" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-undo icon-white"></i>
						                	</a>
						                	<a tooltip="{{'label.button.activate' | translate}}" has-permission='ACTIVATE_SAVINGSACCOUNT' ng-href="#/savingaccount/{{savingaccount.id}}/activate" class="btn btn-xs btn-primary ng-binding">
						                		<i class="icon-ok-sign icon-white"></i>
						                	</a>
						                </td>
						            </tr>
						        </table>
						        <table class="table table-condensed" data-ng-show="!openSaving">
						            <tr class="graybg">
						                <th>{{'label.heading.accnum' | translate}}</th>
						                <th>{{'label.heading.savingaccount' | translate}}</th>
						                <th>{{'label.heading.closedate' | translate}}</th>
						            </tr>
						            <tr class="pointer-main"
						                ng-repeat="savingaccount in clientAccounts.savingsAccounts | orderBy:'id':true | filter:isSavingClosed">
						                <td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">
						                	<i tooltip="{{savingaccount.status.value}}" class="icon-stop {{savingaccount.status.code | StatusLookup}}"></i>
						                	{{savingaccount.accountNo}}
						                </td>
						                <td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">{{savingaccount.productName}}</td>
						                <td class="pointer" data-ng-click="routeToSaving(savingaccount.id, savingaccount.depositType.code)">
						                    <span data-ng-show="savingaccount.timeline.closedOnDate">{{savingaccount.timeline.closedOnDate | DateFormat}}</span>
						                </td>
						            </tr>
						        </table>
						    </div>
							<div data-ng-show="clientAccounts.pledges">
								<div class="pull-right">
						            <span>
						                <button  type="button" class="btn-primary btn btn-sm" ng-show="!showClosedPledges" ng-click="showClosedPledges=true">
											{{ 'label.button.viewclosedpledges' | translate }}
										</button>
										<button  type="button" class="btn-primary btn btn-sm" ng-show="showClosedPledges" ng-click="showClosedPledges=false">
											{{ 'label.button.viewpledges' | translate }}
										</button>
						            </span>
								</div>
								<div class="span gray-head">
						            <span class="boldlabel">
						                <strong>{{'label.heading.pledgeoverview' | translate }}</strong>
						            </span>
								</div>
								<table class="table table-condensed">
									<tr class="graybg">
										<th>{{'label.heading.pledgenumber' | translate}}</th>
										<th>{{'label.heading.currentserialnumber' | translate}}</th>
										<th>{{'label.heading.systemcalculatedvalue' | translate}}</th>
										<th>{{'label.heading.userdefinedvalue' | translate}}</th>
										<th>{{'label.heading.actions' | translate}}</th>
									</tr>
									<tr class="pointer-main" ng-repeat="pledge in pledges" ng-show="((!showClosedPledges && (pledge.status.id==1 || pledge.status.id==2) ) || (showClosedPledges && pledge.status.id==3))">
										<td class="pointer">
											<i tooltip-placement="right" tooltip="{{pledge.status.value}}"
											   class="icon-stop {{pledge.status.code | StatusLookup}}"></i>
											{{pledge.pledgeNumber}}
										</td>
										<td class="pointer">{{pledge.sealNumber}}</td>
										<td class="pointer">{{pledge.systemValue}}</td>
										<td class="pointer">{{pledge.userValue}}</td>
										<td>
											<a tooltip="{{'label.button.closepledge' | translate}}" ng-hide="pledge.status.id==3" href='#/viewpledge/{{pledge.id}}?close=true&id={{id}}' class="btn btn-primary pull-right"  has-permission='CLOSE_COLLATERALPLEDGE'><i class="icon-ok icon-white"></i></a>
											<a tooltip="{{'label.button.deletepledge' | translate}}" ng-show="pledge.status.id==1" ng-click="deletePledge(pledge.id)" class="btn btn-primary pull-right"  has-permission='DELETE_COLLATERALPLEDGE'><i class="icon-trash icon-white"></i></a>
											<a tooltip="{{'label.button.viewpledge' | translate}}" href='#/viewpledge/{{pledge.id}}?id={{id}}' class="btn btn-primary pull-right"  has-permission='READ_COLLATERALPLEDGE'><i class="icon-eye-open icon-white"></i></a>
										</td>
									</tr>
								</table>
							</div>


                            <div data-ng-show="clientAccounts.shareAccounts">
                                <div class="pull-right">
						            <span data-ng-show="clientAccounts.shareAccounts">
						                <button data-ng-show="openShares" type="button" data-ng-click="setShares()"
                                                class="btn-primary btn btn-sm">
                                            {{ 'label.button.viewclosedshares' | translate }}
                                        </button>
						                <button data-ng-show="!openShares" type="button" data-ng-click="setShares()"
                                                class="btn-primary btn btn-sm">
                                            {{ 'label.button.viewactiveshares' | translate }}
                                        </button>
						            </span>
                                </div>
                                <div class="span gray-head">
						            <span class="boldlabel">
						                <strong>{{'label.heading.sharesaccoverview' | translate }}</strong>
						            </span>
                                </div>
                                <table class="table table-condensed" data-ng-show="openShares">
                                    <tr class="graybg">
                                        <th>{{'label.heading.accnum' | translate}}</th>
                                        <th>{{'label.heading.shareaccount' | translate}}</th>
                                        <th class="center">{{'label.heading.approvedshares' | translate}}</th>
                                        <th class="center">{{'label.heading.pendingforapproval' | translate}}</th>
                                        <th>Actions</th>
                                    </tr>
                                    <tr class="pointer-main"
                                        ng-repeat="shareaccount in clientAccounts.shareAccounts | orderBy:'id':true | filter:isShareNotClosed">
                                        <td class="pointer" data-ng-click="routeToShareAccount(shareaccount.id)">
                                            <i tooltip-placement="right" tooltip="{{shareaccount.status.value}}" class="icon-stop {{shareaccount.status.code | StatusLookup}}"></i>
                                            {{shareaccount.accountNo}}
                                        </td>
                                        <td class="pointer" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.productName}}</td>
                                        <td class="pointer center" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.totalApprovedShares|number}}</td>
                                        <td class="pointer center" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.totalPendingForApprovalShares|number}}</td>
                                        <td class="pointer" ng-if="shareaccount.status.active">
											<span ng-repeat="button in savingsActionbuttons">
											  <a tooltip="{{'label.'+button.name | translate}}" ng-show="button.name" has-permission='{{button.taskPermissionName}}'
                                                 ng-click="navigateToSavingsOrDepositAccount(button.name.replace('button.',''), shareaccount.id)"
                                                 class="btn btn-xs btn-primary ng-binding" ng-if="shareaccount.depositType.id==button.type"><i class="{{button.icon}} icon-white"></i>
                                              </a>
											</span>
                                        </td>
                                        <td class="pointer" ng-if="shareaccount.status.submittedAndPendingApproval">
                                            <a tooltip="{{'label.button.approve' | translate}}" has-permission='APPROVE_SHAREACCOUNT' ng-href="#/shareaccount/{{shareaccount.id}}/approve" class="btn btn-xs btn-primary ng-binding">
                                                <i class="icon-ok icon-white"></i>
                                            </a>
                                        </td>
                                        <td class="pointer" ng-if="!shareaccount.status.submittedAndPendingApproval && !shareaccount.status.active">
                                            <a tooltip="{{'label.button.undoapproval' | translate}}" has-permission='APPROVALUNDO_SHAREACCOUNT' ng-href="#/shareaccount/{{shareaccount.id}}/undoapproval" class="btn btn-xs btn-primary ng-binding">
                                                <i class="icon-undo icon-white"></i>
                                            </a>
                                            <a tooltip="{{'label.button.activate' | translate}}" has-permission='ACTIVATE_SHAREACCOUNT' ng-href="#/shareaccount/{{shareaccount.id}}/activate" class="btn btn-xs btn-primary ng-binding">
                                                <i class="icon-ok-sign icon-white"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                                <table class="table table-condensed" data-ng-show="!openShares">
                                    <tr class="graybg">
                                        <th>{{'label.heading.accnum' | translate}}</th>
                                        <th>{{'label.heading.shareaccount' | translate}}</th>
                                        <th class="center">{{'label.heading.approvedshares' | translate}}</th>
                                        <th class="center">{{'label.heading.pendingforapproval' | translate}}</th>
                                        <th>Actions</th>
                                    </tr>
                                    <tr class="pointer-main"
                                        ng-repeat="shareaccount in clientAccounts.shareAccounts | orderBy:'id':true | filter:isShareClosed">
                                        <td class="pointer" data-ng-click="routeToShareAccount(shareaccount.id)">
                                            <i tooltip="{{shareaccount.status.value}}" class="icon-stop {{shareaccount.status.code | StatusLookup}}"></i>
                                            {{shareaccount.accountNo}}
                                        </td>
                                        <td class="pointer" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.productName}}</td>
                                        <td class="pointer center" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.totalApprovedShares|number}}</td>
                                        <td class="pointer center" data-ng-click="routeToShareAccount(shareaccount.id)">{{shareaccount.totalPendingForApprovalShares|number}}</td>
                                        <td class="pointer" data-ng-click="routeToShareAccount(shareaccount.id)">
                                            <span data-ng-show="shareaccount.timeline.closedDate">{{savingaccount.timeline.closedDate | DateFormat}}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            
						</div>
				    </div>

				    <div class="col-sm-3 col-md-3">
				    	<div class="thumbnail row">
				    		<h4><strong>{{client.displayName}}</strong></h4>
					    	<img ng-hide="client.imagePresent" ng-src="./images/client-image-placeholder.png" alt="Avatar">
				        	<img ng-show="client.imagePresent"  ng-src="{{image}}" alt="Avatar" data-ng-click="showPicture()" title="{{'label.zoom' | translate}}" >
					        <div class="btn-group-xs center">
					            <button type="button" class="btn btn-primary" data-ng-click="uploadPic()" has-permission='CREATE_CLIENTIMAGE'
					                    tooltip="{{'label.button.uploadpic' | translate}}">
					                <i class="icon-upload-alt"></i>
					            </button>
					            <button type="button" class="btn btn-primary" data-ng-click="capturePic()" has-permission='CREATE_CLIENTIMAGE'
					                    tooltip="{{'label.button.capturepic' | translate}}">
					                <i class="icon-camera"></i>
					            </button>
					            <button type="button" class="btn btn-primary" ng-show="client.imagePresent" data-ng-click="deletePic()" has-permission='DELETE_CLIENTIMAGE'
					                    tooltip="{{'label.button.deletepic' | translate}}">
					                <i class="icon-trash"></i>
					            </button>
					        </div>
					        <div ng-show="signature_url" class="show-large-picture" data-ng-click="showSignature()">{{'label.showClientSignature' | translate}}</div>
					        <div ng-hide="signature_url" class="show-large-picture" data-ng-click="showWithoutSignature()">{{'label.showClientSignature' | translate}}</div>
					        <table class="table-minified">
					            <tr>
					                <th class="table-bold">{{ 'label.input.activationdate' | translate }}</th>
					                <td><span class="padded-td">{{client.timeline.activatedOnDate | DateFormat}}<span
					                        data-ng-hide="client.timeline.activatedOnDate">{{ 'label.notactivated' | translate }}</span></span>
					                </td>
					            </tr>
					            <tr>
					                <th class="table-bold">{{ 'label.heading.memberof' | translate }}</th>
					                <td>
					                    <span class="padded-td" data-ng-hide="client.groups">{{ 'label.unassigned' | translate }}</span>
										<span class="padded-td" ng-repeat="group in client.groups">
										 <a class="list-group-item-text" href="#/viewgroup/{{group.id}}">{{group.name}}</a>&nbsp;<span
										        data-ng-hide="client.groups">{{ 'label.unassigned' | translate }}</span><span
										        ng-show="!$last">|</span>
										</span>
					                </td>
					            </tr>
					            <tr data-ng-show="client.mobileNo">
					                <th class="table-bold">{{ 'label.input.mobilenumber' | translate }}</th>
					                <td><span class="padded-td">{{client.mobileNo}}</span>
					                </td>
					            </tr>
					            <tr data-ng-show="client.gender.name">
					                <th class="table-bold">{{ 'label.input.gender' | translate }}</th>
					                <td><span class="padded-td">{{client.gender.name}}</span>
					                </td>
					            </tr>
                                <tr data-ng-show="client.clientType.name">
                                    <th class="table-bold">{{ 'label.input.clienttype' | translate }}</th>
                                    <td><span class="padded-td">{{client.clientType.name}}</span>
                                    </td>
                                </tr>
                                <tr data-ng-show="client.clientClassification.name">
                                    <th class="table-bold">{{ 'label.input.clientclassification' | translate }}</th>
                                    <td><span class="padded-td">{{client.clientClassification.name}}</span>
                                    </td>
                                </tr>

                                <tr data-ng-show="client.dateOfBirth">
					                <th class="table-bold">{{ dob | translate }}</th>
					                <td><span class="padded-td">{{client.dateOfBirth | DateFormat}}</span>
					                </td>
					            </tr>
					            <tr data-ng-show="client.status.value=='Closed'">
					                <th class="table-bold">{{ 'label.heading.closedate' | translate }}</th>
					                <td><span class="padded-td">{{client.timeline.closedOnDate | DateFormat}}</span></td>
					            </tr>
					            <tr>
					                <th class="whitebg" colspan="2">{{ 'label.heading.performancehistory' | translate }}</th>
					            </tr>
								<tr>
					                <th>{{ 'label.heading.numofloancycle' | translate }}</th>
					                <td><span class="padded-td">{{client.ClientSummary.loanCycle}}</span></td>
					            </tr>
					            <tr>
					                <th>{{ 'label.lastloanamount' | translate }}</th>
					                <td><span class="padded-td">{{client.ClientSummary.lastLoanAmount|number}}</span></td>
					            </tr>
					            <tr>
					                <th>{{ 'label.numofactiveloans' | translate }}</th>
					                <td><span class="padded-td">{{client.ClientSummary.activeLoans}}</span></td>
					            </tr>
					            <tr>
					                <th>{{ 'label.totalsavings' | translate }}</th>
					                <td><span class="padded-td">{{client.ClientSummary.totalSavings|number}}</span></td>
					            </tr>
					            <tr>
					                <th>{{ 'label.numofactivesavings' | translate }}</th>
					                <td><span class="padded-td">{{client.ClientSummary.activeSavings}}</span></td>
					            </tr>
					        </table>
				    	</div>
				    </div>
				</div>
			</div>
		</tab>
		<tab heading="{{'label.heading.identities' | translate}}" select="getClientIdentityDocuments()"
		     has-permission='READ_CLIENTIDENTIFIER'>
		    <div class="pull-right btn-group">
		        <a href="#/addclientidentifier/{{client.id}}" class="btn btn-primary"
		           has-permission='CREATE_CLIENTIDENTIFIER'><i class="icon-plus icon-white"></i>{{
		            'label.button.add' | translate }}</a>
		    </div>
		    <br>
		    <table class="table" ng-show="identitydocuments.length > 0">
		        <thead>
		        <tr class="graybg">
		            <th>{{'label.heading.id' | translate}}</th>
		            <th>{{'label.heading.description' | translate}}</th>
		            <th>{{'label.heading.type' | translate}}</th>
		            <th>{{'label.heading.identitydocuments' | translate}}</th>
					<th>{{'label.heading.status' | translate}}</th>
		            <th>{{'label.heading.actions' | translate}}</th>
		        </tr>
		        </thead>
		        <tbody>
		        <tr ng-repeat="document in identitydocuments">
		            <td>{{document.documentKey}}</td>
		            <td>{{document.description}}</td>
		            <td>{{document.documentType.name}}</td>
		            <td>
		                  <span ng-repeat="file in document.documents">
		                    {{file.fileName}}&nbsp;&nbsp;
		                    <a target="_blank" href="{{hostUrl}}{{file.docUrl}}" has-permission='READ_DOCUMENT'><i
		                            class="icon-cloud-download"></i></a>
		                  </span>
		            </td>
					<td>{{document.status | translate}}</td>
		            <td>
		                  <span>
		                      <a href="#/addclientidentifierdocument/{{client.id}}/{{document.id}}"
		                         has-permission='CREATE_DOCUMENT'><i
		                              class="icon-cloud-upload"></i></a>&nbsp;
		                      <a ng-click="deleteClientIdentifierDocument(client.id,document.id,$index)"
		                         has-permission='DELETE_CLIENTIDENTIFIER'><i
		                              class="icon-remove"></i></a>
		                  </span>
		            </td>
		        </tr>
		        </tbody>
		    </table>
		</tab>
		<tab heading="{{'label.heading.address'|translate}}" has-permission='READ_ADDRESSES' >
			<div class="pull-right">
				<a href="#/addclientaddress/{{client.id}}" class="btn btn-primary" has-permission='CREATE_ADDRESSES'>
					<i class="icon-plus icon-white"></i>
					{{'label.button.add'|translate}}
				</a>
				</a>
			</div>
			<br>

			<div class="row span" style="margin-left:1px;margin-top:20px" ng-repeat="address in addressData">
				<div class="col-sm-6 col-md-6" >
                    <div class="span gray-head" ng-show="addressData.length > 0">
                        <span class="boldlabel">
                            <strong>{{address.addressEntityData[0].addressType.name}}</strong>
                             <button type="button" ng-click="deleteAddress(address.addressId)" class="pull right btn btn-primary" has-permission='DELETE_ADDRESSES'>
                                 <i class="icon-trash icon-white"></i>{{'label.button.delete' | translate}}
                            </button>
							<a href="#/editaddress/{{client.id}}/{{address.addressId}}" class="pull right btn btn-primary" has-permission='UPDATE_ADDRESSES'>
								<i class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}
							</a>
                        </span>
                    </div>
					<table class="table table-stripped table-bordered" ng-show="addressData.length > 0">

						<tr>
							<th class="table-bold-loan">{{'label.heading.houseno' | translate}}</th>
							<td>
								<span class="padded-td">{{address.houseNo}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.streetname' | translate}}</th>
							<td>
								<span class="padded-td">{{address.addressLineOne}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.villagename' | translate}}</th>
							<td>
								<span class="padded-td">{{address.villageTown}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.talukname' | translate}}</th>
							<td>
								<span class="padded-td">{{address.taluka}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.countryname' | translate}}</th>
							<td>
								<span class="padded-td">{{address.countryData.countryName}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.statename' | translate}}</th>
							<td>
								<span class="padded-td">{{address.stateData.stateName}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.districtname' | translate}}</th>
							<td>
								<span class="padded-td">{{address.districtData.districtName}}</span>
							</td>
						</tr>
						<tr>
							<th class="table-bold-loan">{{'label.heading.pincode' | translate}}</th>
							<td>
								<span class="padded-td">{{address.postalCode}}</span>
							</td>
						</tr>
						</tr>
					</table>
				</div>
			</div>
			<script type="text/ng-template" id="deleteaddress.html">
				<div class="modal-header silver">
					<h3 class="bolder">{{'label.heading.delete' | translate}}</h3>
				</div>
				<div class="modal-body ">
					<api-validate></api-validate>
					<br>
					<button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
					<button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
				</div>
			</script>
		</tab>
		<tab heading="{{'label.heading.documents' | translate}}" select="getClientDocuments()" has-permission='READ_DOCUMENT'>
		    <div class="pull-right">
		        <a href="#/addclientdocument/{{client.id}}" class="btn btn-primary" has-permission='CREATE_DOCUMENT'><i
		                class="icon-plus icon-white"></i>
		            {{'label.button.upload' | translate}}</a>
		    </div>
		    <br>
		    <table class="table" ng-show="clientdocuments.length > 0">
		        <thead>
		        <tr class="graybg">
		            <th>{{'label.heading.name' | translate}}</th>
		            <th>{{'label.heading.description' | translate}}</th>
		            <th>{{'label.heading.filename' | translate}}</th>
		            <th>{{'label.heading.actions' | translate}}</th>
		        </tr>
		        </thead>
		        <tbody>
		        <tr ng-repeat="clientdocument in clientdocuments">
		            <td>{{clientdocument.name}}</td>
		            <td>{{clientdocument.description}}</td>
		            <td>{{clientdocument.fileName}}</td>
		            <td>
		                <a target="_blank" href="{{hostUrl}}{{clientdocument.docUrl}}"><i class="icon-cloud-download"></i></a>&nbsp;
		                <a ng-click="deleteDocument(clientdocument.id,$index)"><i class="icon-remove"></i></a>
		            </td>
		        </tr>
		        </tbody>
		    </table>
		</tab>
		<tab heading="{{clientdatatable.registeredTableName}}" ng-repeat="clientdatatable in clientdatatables"
		     select="dataTableChange(clientdatatable)" has-permission='READ_{{clientdatatable.registeredTableName}}'>
		    <div>
		        <div data-ng-hide="isClosedClient" class="btn-group pull-right">
		            <a ng-show="datatabledetails.isData" class="btn btn-danger pull-right"
		               ng-click="deleteAll(clientdatatable.registeredTableName, client.id)" has-permission='DELETE_{{clientdatatable.registeredTableName}}'><i
		                    class="icon-trash icon-white"></i>{{'label.button.deleteall' | translate}}</a>
		            <a data-ng-show="showDataTableAddButton"
		               ng-href="#/makedatatableentry/{{clientdatatable.registeredTableName}}/{{client.id}}?fromEntity=client"
		               class="btn btn-primary" has-permission='CREATE_{{clientdatatable.registeredTableName}}'><i
		                    class="icon-plus icon-white"></i>{{'label.button.add' | translate}}</a>
		            <a data-ng-show="showDataTableEditButton"
		               ng-href="#/viewsingledatatableentry/{{clientdatatable.registeredTableName}}/{{client.id}}?mode=edit&&fromEntity=client"
		               class="btn btn-primary" has-permission='UPDATE_{{clientdatatable.registeredTableName}}'><i
		                    class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}</a>
		        </div>
		        <br>
		        <br>

		        <div ng-show="datatabledetails.isData">
		            <table class="table" data-ng-show="datatabledetails.isMultirow">
		                <thead>
		                <th ng-repeat="column in datatabledetails.columnHeaders">{{column.columnName | prettifyDataTableColumn}}</th>
		                </thead>
		                <tbody>
		                <tr class="pointer-main" ng-repeat="data in datatabledetails.data">
		                    <td class="pointer" ng-repeat="row in data.row track by $index"
		                        ng-click="viewDataTable(clientdatatable.registeredTableName,data)">{{row}}
		                    </td>
		                </tr>
		                </tbody>
		            </table>
		            <table class="table table-bordered width450px" data-ng-hide="datatabledetails.isMultirow">
		                <tr ng-repeat="value in singleRow">
		                    <td class="graybg table-font-nav">{{value.key | prettifyDataTableColumn}}</td>
		                    <td><span class="padded-td">{{value.value}}</span></td>
		                </tr>
		            </table>
		        </div>
		    </div>
		</tab>
		<tab heading="{{ 'label.heading.notes' | translate }}" has-permission='READ_CLIENTNOTE' select="getAllClientsNotes();">
		    <br/>
		    <form>
		        <div class="form-group">
		            <div class="col-sm-12 col-md-12">
		                <textarea rows="1" class="form-control marginbottom0px" id="textarea"
		                          placeholder="{{'label.input.enternote' | translate}}" ng-model="formData.note"></textarea>

		                <div class="notewrapper col-sm-12 col-md-12">
		                        <span class="pull-right noteaddbuttonwrapper">
		                            <button class="btn btn-primary" type="submit" ng-click="saveNote()"
		                                    has-permission='CREATE_CLIENTNOTE'>{{'label.button.add' |
		                                translate}}
		                            </button>
		                        </span>
		                </div>
		            </div>
		        </div>
		    </form>
		    <div class="col-md-12">
		        <br/>

		        <div ng-repeat="clientNote in clientNotes | orderBy:predicate:reverse">
		            <blockquote>
		                <p>{{clientNote.note}}</p>
		                {{clientNote.id}}
		                <small>{{'label.createdby' | translate}} :&nbsp;{{clientNote.createdByUsername}}</small>
		                <small>{{'label.createdon' | translate}} :&nbsp;{{clientNote.createdOn | DateFormat}}</small>
		            </blockquote>
		        </div>
		    </div>
		</tab>
	</tabset>

	<div>
		<audit-logs></audit-logs>
	</div>



</div>
