<div class="col-md-12" ng-controller="ViewAccRuleController">
    <ul class="breadcrumb">
        <li><a href="#/accounting">{{'label.anchor.accounting' | translate}}</a></li>
        <li><a href="#/accounting_rules">{{'label.anchor.accountingrules' | translate}}</a></li>
        <li class="active">{{rule.name}}</li>
    </ul>
    <script type="text/ng-template" id="deleteaccrule.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>
    <div class="col-md-12 well">
        <h3 class="bolder col-md-12 ng-binding">{{rule.name}}
	    	<div class="pull-right">
	            <div class="btn-group">
	                <a href="#/editaccrule/{{rule.id}}" class="btn btn-primary" has-permission='UPDATE_ACCOUNTINGRULE'><i
	                        class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}</a>
	                <a class="btn btn-danger" ng-click="deleteRule()" has-permission='DELETE_ACCOUNTINGRULE'><i
	                        class="icon-trash icon-white"></i>{{'label.button.delete' | translate}}</a>
	            </div>
	        </div>
	    </h3>
        <div class="col-md-5">
	        <table class="table table-bordered">
	            <tr>
	                <th class="table-bold-acc">{{ 'label.heading.office' | translate }}</th>
	                <td><span class="padded-td">{{rule.officeName}}</span></td>
	            </tr>
	            <tr>
	                <th class="table-bold-acc">{{ 'label.heading.description' | translate }}</th>
	                <td><span class="padded-td">{{rule.description}}</span></td>
	            </tr>
	            <tr>
	                <th class="table-bold-acc">{{ 'label.input.allowMultipleDebitEntries' | translate }}</th>
	                <td><span class="padded-td">{{rule.allowMultipleDebitEntries}}</span></td>
	            </tr>
	            <tr>
	                <th class="table-bold-acc">{{ 'label.input.allowMultipleCreditEntries' | translate }}</th>
	                <td><span class="padded-td">{{rule.allowMultipleCreditEntries}}</span></td>
	            </tr>
				<tr>
					<th class="table-bold-acc">{{ 'label.input.isInheritedToChildOffices' | translate }}</th>
					<td><span class="padded-td">{{rule.isInheritedToChildOffices}}</span></td>
				</tr>
	        </table>
		</div>
		<div class="col-md-7">
	        <table class="table table-bordered">
		        <thead>
		        <tr class="graybg">
		            <th ng-if="rule.debitTags">{{'label.heading.debittags' | translate}}</th>
		            <th ng-if="rule.debitAccounts">{{'label.heading.debitaccount' | translate}}</th>
		            <th ng-if="rule.creditTags">{{'label.heading.credittags' | translate}}</th>
		            <th ng-if="rule.creditAccounts">{{'label.heading.creditaccount' | translate}}</th>
		        </tr>
		        </thead>
		        <tbody>
			        <tr>
	                    <td ng-if="rule.debitTags">
		                    <p ng-repeat="debitTag in rule.debitTags">{{debitTag.tag.name}}</p>
	                    </td>
	                    <td ng-if="rule.debitAccounts">
		                    <p ng-repeat="dbAccount in rule.debitAccounts">{{dbAccount.name}}({{dbAccount.glCode}})</p>
	                    </td>
	                    <td ng-if="rule.creditTags">
		                    <p ng-repeat="creditTag in rule.creditTags">{{creditTag.tag.name}}</p>
	                    </td>
	                    <td ng-if="rule.creditAccounts">
		                    <p ng-repeat="crAccount in rule.creditAccounts">{{crAccount.name}}({{crAccount.glCode}})</p>
	                    </td>
			        </tr>
		        </tbody>
		    </table>
		</div>
    </div>
</div>