<div>
    <div class="property-grid" ng-class="{'property-grid-with-sidenote' : noteOnSide}">
        <div class="categories-wrapper" ng-show="categories.length>0">
            <div class="category" ng-repeat="category in categories | orderBy:'+position'"
                ng-hide="checkHiddenCategory(category)">
                <div class="category-title" ng-click="toggleCategory(category)">
                    <span class="toggleBtn expanded" ng-class="category.expanded ? 'expanded' : 'collapsed'"></span>
                    <label ng-bind="category.name | tsq"></label>
                </div>
                <ul class="category" ng-class="category.expanded ? 'expanded' : 'collapsed'">
                    <li ng-repeat="property in properties" ng-hide="checkHidden(property)">
                        <ul class="property" ng-if="property.category == category.name">
                            <li class="property-title" ng-attr-title="{{property.name | tsq}}">{{property.name | tsq}}<i
                                    ng-if="property.note && property.note!='Null' && property.note!=''"
                                    class="fa fa-question-circle-o" aria-hidden="true" title="{{property.note | tsq}}"
                                    data-toggle="tooltip" data-container="body" data-placement="right"></i>
                            </li>

                            <li ng-if="shouldShowInput(property)" class="property-value">
                                <div class="sqn-spinner">
                                    <input type="text" class="sqn-input" min="{{::property.min}}"
                                        max="{{::property.max}}" step="{{::property.step}}" ng-model="property.value"
                                        onFocus="sqnSpinnerFocus(this)" onBlur="sqnSpinnerBlur(this)" ng-disabled="!enabled || checkDisabled(property)" />
                                    <div class="sqn-spinner-btns">
                                        <div class="sqn-spinner-minus" onClick="sqnSpinnerMinus(this)"></div>
                                        <div class="sqn-spinner-plus" onClick="sqnSpinnerPlus(this)"></div>
                                    </div>
                                </div>
                            </li>

                            <li ng-if="shouldShowSelect(property)" class="property-value">
                                <div class="sqn-input sqn-select">
                                    <span>{{property.display | tsq}}</span>
                                    <select ng-model="property.value"
                                        ng-options="item.name as item.value for item in property.options"
                                        onFocus="sqnSelectFocus(this)" onBlur="sqnSelectBlur(this)"
                                        ng-disabled="!enabled || checkDisabled(property)"></select>
                                </div>
                            </li>

                            <li ng-if="shouldShowCheckbox(property)" class="property-value">
                                <div class="sq-checkbox"
                                    ng-click="(!(!enabled || checkDisabled(property)))?property.value=!property.value:void">
                                    <input type="checkbox" ng-model="property.value"
                                        ng-disabled="!enabled || checkDisabled(property)">
                                    <label></label>
                                </div>
                            </li>

                            <li ng-if="shouldShowTimeSpinner(property)" class="property-value">
                                <time-spinner min="0" max="86340" step="120" sq-model="property.value"
                                    sq-disabled="!enabled || checkDisabled(property)"></time-spinner>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="property-grid-note" ng-if="!noteOnSide">
                <div ng-bind-html="note | tsq | html"></div>
            </div>
        </div>
        <div class="property-grid-note property-grid-note-side" ng-if="noteOnSide"
            ng-class="{'property-grid-note-nocats' : categories.length<=0}">
            <div ng-bind-html="note | tsq | html"></div>
        </div>
    </div>
</div>