<div class="col-md-12">
    <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">{{'label.anchor.addrule' | translate}}</li>
    </ul>
	<api-validate></api-validate>
	<form name="addaccountruleform" novalidate="" class="form-horizontal well" ng-controller="AccCreateRuleController"
	      rc-submit="submit()">
	    <fieldset>
	        <legend>{{ 'label.heading.accountingruletitle' | translate }}</legend>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="name">{{ 'label.input.accountingrulename' | translate }}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <input type="text" id="name" name="name" ng-model="formData.name" class="form-control" required late-Validate/>
	            </div>
	            <div class="col-sm-3">
	                <form-validate valattributeform="addaccountruleform" valattribute="name"/>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{ 'label.input.office' | translate }}<span class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <select chosen="offices" ng-model="formData.officeId" id="officeId" class="form-control"
	                        ng-options="office.id as office.name for office in offices" value="{{office.id}}">
	                </select>
	            </div>

                <div class="col-sm-3">
                    <label class="control-label"><input id="isInheritedToChildOffices" type="checkbox" ng-model="formData.isInheritedToChildOffices" /> {{'label.input.isInheritedToChildOffices' | translate}}</label>
                </div>

	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}</label>
	
	            <div class="col-sm-3">
	                <textarea id="description" rows="2" ng-model="formData.description" class="form-control"></textarea>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{ 'label.input.affectedglentries' | translate }}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-10">
	                <div class="row">
	                   <div class="col-sm-6">
	                       <p class="bolder center">{{ 'label.heading.debitaccountdetails' | translate }}</p>
	                       <label class="control-label">{{ 'label.input.debitruletype' | translate }} </label>
                           <input type="radio" ng-model="debitRuleType" value="Account" ng-change="resetDebits()">{{
                           'label.input.fixed' | translate}} &nbsp;&nbsp;&nbsp;
                           <input type="radio" ng-model="debitRuleType" value="tags" ng-change="resetDebits()">{{
                           'label.input.list' | translate}}
                           <div ng-show="debitRuleType=='Account'" class="marginbuttontop25px">
                               <select ng-model="formData.accountToDebit" chosen="glAccounts"
                                       ng-options="debitAccount.name for debitAccount in glAccounts" class="form-control"></select>
                           </div>
                           <div ng-show="debitRuleType=='tags'" class="row">
                               <div class="col-sm-5 col-md-5">
                                   <label class="control-label col-sm-12 center">{{ 'label.input.availabledebittags' | translate }}</label>
                                   <select ng-model="availableDebit" multiple class="form-control clear"
                                       ng-options="debitTag.name for debitTag in debitTagOptions"></select>
                               </div>
                               <div class="col-sm-1 col-md-1 paddedtop25px">
                                   <button type="button" class="btn btn-primary" data-ng-click="addDebitTag()"><i
                                           class="icon-double-angle-right"></i></button>
                                   <button type="button" class="btn btn-primary" data-ng-click="removeDebitTag()"><i
                                           class="icon-double-angle-left"></i></button>
                               </div>
                               <div class="col-sm-5 col-md-5">
                                   <label class="control-label col-sm-12 center">{{ 'label.input.selecteddebittags' | translate }}</label>
                                   <select ng-model="selectedDebit" multiple class="form-control clear"
                                       ng-options="dbTag.name for dbTag in formData.debitTags"></select>
                               </div>
                               <label>{{ 'label.input.allowMultipleDebitEntries' | translate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                                       type="checkbox" ng-model="formData.allowMultipleDebitEntries"></label>
                           </div>
	                   </div>
	                   <div class="col-sm-6">
	                       <p class="bolder center">{{ 'label.heading.creditaccountdetails' | translate }}</p>
	                       <label class="control-label">{{ 'label.input.creditruletype' | translate }}</label>
                           <input type="radio" ng-model="creditRuleType" value="Account" ng-change="resetCredits()">{{
                           'label.input.fixed' | translate}} &nbsp;&nbsp;&nbsp;
                           <input type="radio" ng-model="creditRuleType" value="tags" ng-change="resetCredits()">{{
                           'label.input.list' | translate}}
                           <div ng-show="creditRuleType=='Account'" class="marginbuttontop25px">
                               <select ng-model="formData.accountToCredit" chosen="glAccounts"
                                       ng-options="creditAccount.name for creditAccount in glAccounts"></select>
                           </div>
                           <div ng-show="creditRuleType=='tags'" class="row">
                               <div class="col-sm-5 col-md-5">
                                   <label class="control-label col-sm-12 center">{{ 'label.input.availablecredittags' | translate }}</label>
                                   <select ng-model="availableCredit" multiple class="form-control clear"
                                       ng-options="creditTag.name for creditTag in creditTagOptions"></select>
                               </div>
                               <div class="col-sm-1 col-md-1 paddedtop25px">
                                   <button type="button" class="btn btn-primary" data-ng-click="addCreditTag()"><i
                                           class="icon-double-angle-right"></i></button>
                                   <button type="button" class="btn btn-primary" data-ng-click="removeCreditTag()"><i
                                           class="icon-double-angle-left"></i></button>
                               </div>
                               <div class="col-sm-5 col-md-5">
                                   <label class="control-label col-sm-12 center">{{ 'label.input.selectedcredittags' | translate }}</label>
                                   <select ng-model="selectedCredit" multiple class="form-control clear"
                                       ng-options="crTag.name for crTag in formData.creditTags"></select>
                               </div>
                               <label>{{ 'label.input.allowMultipleCreditEntries' | translate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                                       type="checkbox" ng-model="formData.allowMultipleCreditEntries"></label>
                           </div>
	                   </div>
	                </div>
	            </div>
	        </div>
	        <div class="col-md-offset-5">
	            <a id="cancel" href="#/accounting_rules" class="btn btn-default">{{ 'label.button.cancel' | translate }}</a>
	            <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_ACCOUNTINGRULE'>{{ 'label.button.save' | translate }}</button>
	        </div>
	    </fieldset>
	</form>
</div>
