<div class="col-md-12" ng-controller="ClientActionsController">
    <div>
        <ul class="breadcrumb">
            <li><a href="#/clients">{{'label.anchor.clients' | translate}}</a></li>
            <li><a href="#/viewclient/{{clientId}}">{{'label.anchor.viewclient' | translate}}</a></li>
            <li class="active">{{breadcrumbName | translate}}</li>
        </ul>
    </div>
    <api-validate></api-validate>
    <form name="clientactionform" novalidate="" class="form-horizontal well" ng-submit="submit()">
        <div class="form-group" ng-show="showDateField">
            <label class="control-label col-sm-2">{{labelName | translate}}<span class="required">*</span></label>

            <div class="col-sm-3">
                <input type="text" datepicker-pop="dd MMMM yyyy" id="{{modelName}}" name="modelName"
                       ng-model="formData[modelName]" min="'2000-01-01'" max="restrictDate"  class="form-control"/>
            </div>
        </div>
        <div class="form-group" ng-show="showActivationDateField">
            <label class="control-label col-sm-2">{{labelName | translate}}<span class="required">*</span></label>

            <div class="col-sm-3">
                <input type="text" datepicker-pop="dd MMMM yyyy" id="{{modelName}}" name="modelName"
                       ng-model="formData[modelName]" min="mindate" max="restrictDate"  class="form-control"/>
            </div>
        </div>
        <div class="form-group" ng-show="reasonField">
            <label class="control-label col-sm-2">{{labelNamereason | translate}}<span class="required">*</span></label>

            <div class="col-sm-3">
                <select id="{{reasonmodelName}}" ng-model="formData[reasonmodelName]"
                        ng-options="reason.id as reason.name for reason in reasons"
                        value="{{reason.id}}" class="form-control">
                </select>
            </div>
        </div>

        <div class="form-group" ng-show="staffField">
            <label class="control-label col-sm-2">{{labelName | translate}}<span class="required">*</span></label>

            <div class="col-sm-3">
                <select chosen="staffOptions" id="staffId" ng-model="formData.staffId" class="form-control"
                        ng-options="staff.id as staff.displayName for staff in staffOptions" value="{{staff.id}}">
                </select>
            </div>
        </div>

        <div class="form-group" ng-show="savingsField">
            <label class="control-label col-sm-2">{{labelName | translate}}<span class="required">*</span></label>

            <div class="col-sm-3">
                <select id="savingsAccountId" ng-model="formData.savingsAccountId"  class="form-control"
                        ng-options="savingsAccount.id as (savingsAccount.accountNo +'-'+savingsAccount.savingsProductName) for savingsAccount in savingAccountOptions" value="{{savingsAccount.id}}">
                </select>
            </div>
        </div>

        <div class="form-group" ng-show="showNoteField">
            <label class="control-label col-sm-2" for="note">{{ 'label.heading.notes' | translate}}</label>

            <div class="col-sm-3">
                <textarea rows="2" id="note" ng-model="formData.note" class="form-control"></textarea>
            </div>
        </div>

        <div class="col-md-offset-3" ng-show="!showDeleteClient">
            <button id="cancel" type="reset" ng-click="cancel()" class="btn btn-default">{{'label.button.cancel' | translate}}
            </button>
            <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{'label.button.save' | translate}}</button>
        </div>
    </form>
</div>
