<div ng-show="changesVariables.length>0">
   <div ng-repeat="filter in filters track by $index" ng-init="place = $index">
        <div ng-switch on="filter.type">
            <table ng-switch-default class="filters table no-border no-hover advancedReportFormTable" >
                <tbody ng-form="filterType" class="control-group" ng-class="{error:filterType.$dirty && (filterType.$invalid || filterType.$error.required)}">
                <tr class="no-hover">
                    <td>
                         <?php $this->load->view('directives/changesfilter_dropdown') ?>
                    </td>
                    <td>
                        <div ng-switch on="filter.type" class="filter-condition">
                            <div ng-switch-default class="input {{field.type}}" style="width:150px;"></div>

                            <div ng-init="filter.condition = (filter.condition | setDefaultConditionOption:'ILIKE')" ng-switch-when="string">
                                <div class="btn-group filterTree">
                                    <a ng-class="{'disabled': readonly}" href="javascript:void(0)" data-toggle="dropdown" class="btn dropdown-toggle">
                                        <span ng-repeat="f in CHANGES_STRING_CONDITION | getLabelByValue:filter.condition | limitTo: 1">{{f.label}}</span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu dropdown_reports">
                                        <li ng-repeat="f in CHANGES_STRING_CONDITION" >
                                            <a href="javascript:void(0)" ng-click="filter.condition = f.value; updateFilterState();">{{f.label}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div ng-switch-when="slist">
                                <div class="btn-group filterTree">
                                    <a ng-init="filter.condition = (filter.condition | setDefaultConditionOption:'ILIKE')" ng-class="{'disabled': readonly}" href="javascript:void(0)" data-toggle="dropdown" class="btn dropdown-toggle">
                                        <span ng-repeat="f in CHANGES_LIST_CONDITION | getLabelByValue:filter.condition | limitTo: 1">{{f.label}}</span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu dropdown_reports">
                                        <li ng-repeat="f in CHANGES_LIST_CONDITION">
                                            <a href="javascript:void(0)" ng-click="filter.condition = f.value; updateFilterState();">{{f.label}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </td>

                    <td>
                        <div ng-switch on="filter.type">
                            <div ng-switch-when='' class="input {{field.type}}" ng-class="field.required && 'required'">Please specify field type:</div>
                            <input ng-switch-when="string" type="text" ng-readonly="readonly" required name="string"
                                   ng-model="filter.value" ng-bind-attr="{required:'{{field.required}}'}" value="{{filter.value}}" placeholder="Enter text" ng-blur="updateFilterState()">

                            <input ng-switch-when="slist" type="text" ng-readonly="readonly" required name="slist"
                                   ng-model="filter.value" ng-bind-attr="{required:'{{field.required}}'}" value="{{filter.value}}" placeholder="Enter comma separated text"  class="microcopy-search" ng-blur="updateFilterState()">

                            <input ng-switch-when="date"
                                   placeholder="Enter date"
                                   show-weeks=false
                                   ng-change="updateFilterState()"
                                   type="text"
                                   class="form-control"
                                   datepicker-popup="{{format}}"
                                   month-format="MM"
                                   ng-model="filter.value"
                                   is-open="openedDate[$index]"
                                   datepicker-options="dateOptions"
                                   date-disabled="disabled(date, mode)"
                                   close-text="Close"
                                   ng-blur="updateFilterState()"
                                   ng-readonly="readonly"
                                   required
                                   name="date"
                                   />
                        </div>
                    </td>

                    <td>
                        <span ng-click="removeFilter($index)" class="trackerDelete"><i class="icon-trash"></i></span>
                    </td>
                </tr>
                <tr class="changes-valid no-hover" ng-switch on="filter.type">
                    <td>
                    <div ng-switch-when="int">
                        <span ng-show="filterType.$dirty && filterType.int.$invalid" class="help-block error margin-top-small">Value must be a number.</span>
                    </div>
                    <div ng-switch-default ng-hide="filter.optional">
                        <span ng-show="filterType.$dirty && filterType.$error.required" class="help-block error margin-top-small">Field cannot be empty.</span>
                    </div>
                   </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="add-btn">
    <?php $this->load->view('directives/changesfilter_dropdown') ?>
</div>
