<ul class="advancedoptions">
    <li ng-repeat="item in ngModel | orderBy: item as nn track by $index" class="advancedentry">
        <div>
            <label class="shortname">{{getShortName(item)}}</label>

            <select ng-if="getInputType(item) == 'enum'" ng-options="n for n in getEnumerations(item)" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option="getEnumerations(item)"></select>
            <select ng-if="getInputType(item) == 'flags'" ng-options="n for n in getEnumerations(item)" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option-flags="getEnumerations(item)" multiple="multiple"></select>
            <input ng-if="getInputType(item) == 'bool'" type="checkbox" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option-bool ></input>
            <input ng-if="getInputType(item) == 'password'" type="password" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option ></input>
            <input ng-if="getInputType(item) == 'text'" type="text" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option ></input>
            <input ng-if="getInputType(item) == 'int'" type="number" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" parse-advanced-option-integer ></input>

            <div ng-if="getInputType(item) == 'size'" class="input type multiple">
                <input type="number" parse-advanced-option-size-number="uppercase" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" />
                <select parse-advanced-option-size-multiplier="uppercase" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" ng-options="item.value as item.name for item in fileSizeMultipliers">
                </select>
            </div>

            <div ng-if="getInputType(item) == 'speed'" class="input type multiple">
                <input type="number" parse-advanced-option-size-number="uppercase" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" />
                <select parse-advanced-option-size-multiplier="uppercase" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" ng-options="item.value as item.name for item in speedMultipliers">
                </select>
            </div>

            <div ng-if="getInputType(item) == 'timespan'" class="input type multiple">
                <input parse-advanced-option-size-number type="number" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" />
                <select parse-advanced-option-size-multiplier ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" ng-options="item.value as item.name for item in timerangeMultipliers">
                    <option value="" translate>custom</option>
                </select>
            </div>

            <div ng-if="getInputType(item) == 'shorttimespan'" class="input type multiple">
                <input parse-advanced-option-size-number type="number" ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" />
                <select parse-advanced-option-size-multiplier ng-model="$parent.ngModel[$parent.ngModel.indexOf(item)]" ng-options="item.value as item.name for item in shorttimerangeMultipliers">
                    <option value="" translate>custom</option>
                </select>
            </div>
        </div>

        <a href ng-click="deleteItem(item)" title="{{'Remove option' | translate}}">x</a>

        <div ng-if="getDeprecationMessage(item)" class="longdescription">DEPRECATED: {{getDeprecationMessage(item)}}</div>
        <div class="longdescription">{{getLongDescription(item)}}<br>Default value: "{{getDefaultValue(item)}}"</div>
    </li>

    <li>
        <label translate>Add advanced option</label>
        <select ng-options="getDisplayName(opt.Name) group by opt.Category for opt in ngOptionList | orderBy: 'Name' " ng-model="NewItem">
            <option value="" translate>- pick an option -</option>
        </select>
    </li>
</ul>
