<div ng-controller="LiveTilesReplaceController" class="livetiles-admin-replace">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Replace Values' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div wizdom365-spinner loading="replacing"></div>
            <button type="button" class="btn btn-primary" ng-click="replace()" ng-disabled="!selectedField || replacing">{{(replacing ? 'Replacing' : 'Replace') | translate}}</button>
        </div>
    </div>
    <div class="lt-module-page__content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <label>{{'Field' | translate}}</label>
                    <select ng-options="field as field.value.label + ' (' + field.title + ')' group by field.value.category for field in fields track by field.id"
                            ng-model="selectedField"
                            ng-change="fieldChanged"
                            class="form-control"></select>
                </div>
                <div class="col-sm-4" ng-switch="selectedField.value.type">
                    <label>{{'Existing value' | translate}}</label>
                    <input ng-switch-when="text" type="text" class="form-control" ng-model="$parent.findValue" />
                    <textarea ng-switch-when="textarea" ui-tinymce toolbar-configuration="LiveTiles" ng-model="$parent.findValue"></textarea>
                    <div ng-switch-when="html" ui-ace="{mode: 'html'}" ng-model="$parent.findValue"></div>
                    <input ng-switch-when="number" type="number" class="form-control" step="{{selectedField.value.step}}" min="{{selectedField.value.min}}" max="{{selectedField.value.max}}" ng-model="$parent.findValue" />
                    <div ng-switch-when="date" wizdom365-datetime-picker show-date-picker="true" date="$parent.findValue"></div>
                    <div ng-switch-when="checkbox" class="checkbox"><label><input type="checkbox" ng-model="$parent.findValue" /></label></div>
                    <div ng-switch-when="radio" ng-repeat="option in selectedField.value.options" class="radio"><label><input type="radio" ng-model="$parent.$parent.findValue" ng-value="option.value" />{{option.name}}</label></div>
                    <select ng-switch-when="select" ng-if="!selectedField.value.allowMultiple" class="form-control" ng-options="option.value as option.name for option in selectedField.value.options" ng-model="$parent.$parent.findValue"></select>
                    <select ng-switch-when="select" ng-if="selectedField.value.allowMultiple" multiple class="form-control" ng-options="option.value as option.name for option in selectedField.value.options" ng-model="$parent.$parent.findValue"></select>
                    <div ng-switch-when="image">{{'Not possible to replace values on image fields' | translate}}</div>
                    <wizdom365-taxonomypicker ng-switch-when="taxonomy" ng-if="termSet" selected-terms="$parent.$parent.findValue" term-set-id="{{termSet.termSetId}}" placeholder=" "></wizdom365-taxonomypicker>
                    <div ng-switch-when="taxonomy" ng-if="!termSet">{{'No term set selected' | translate}}</div>
                    <wizdom365-principalpicker ng-switch-when="principals" principals="$parent.findValue" mode="{{selectedField.value.principalMode}}" domain="{{selectedField.value.principalDomain}}" allowmultiple="{{selectedField.value.allowMultiple}}" add-fn="addPrincipal(principal)" remove-fn="removePrincipal(principal)" placeholder=""></wizdom365-principalpicker>
                </div>
                <div class="col-sm-4" ng-switch="selectedField.value.type">
                    <label>{{'New value' | translate}}</label>
                    <input ng-switch-when="text" type="text" class="form-control" ng-model="$parent.replaceValue" />
                    <textarea ng-switch-when="textarea" ui-tinymce toolbar-configuration="LiveTiles" ng-model="$parent.replaceValue"></textarea>
                    <div ng-switch-when="html" ui-ace="{mode: 'html'}" ng-model="$parent.replaceValue"></div>
                    <input ng-switch-when="number" type="number" class="form-control" step="{{selectedField.value.step}}" min="{{selectedField.value.min}}" max="{{selectedField.value.max}}" ng-model="$parent.replaceValue" />
                    <div ng-switch-when="date" wizdom365-datetime-picker show-date-picker="true" date="$parent.replaceValue"></div>
                    <div ng-switch-when="checkbox" class="checkbox"><label><input type="checkbox" ng-model="$parent.replaceValue" /></label></div>
                    <div ng-switch-when="radio" ng-repeat="option in selectedField.value.options" class="radio"><label><input type="radio" ng-model="$parent.$parent.replaceValue" ng-value="option.value" />{{option.name}}</label></div>
                    <select ng-switch-when="select" ng-if="!selectedField.value.allowMultiple" class="form-control" ng-options="option.value as option.name for option in selectedField.value.options" ng-model="$parent.$parent.replaceValue"></select>
                    <select ng-switch-when="select" ng-if="selectedField.value.allowMultiple" multiple class="form-control" ng-options="option.value as option.name for option in selectedField.value.options" ng-model="$parent.$parent.replaceValue"></select>
                    <div ng-switch-when="image">{{'Not possible to replace values on image fields' | translate}}</div>
                    <wizdom365-taxonomypicker ng-switch-when="taxonomy" ng-if="termSet" selected-terms="$parent.$parent.replaceValue" term-set-id="{{termSet.termSetId}}" placeholder=" "></wizdom365-taxonomypicker>
                    <div ng-switch-when="taxonomy" ng-if="!termSet">{{'No term set selected' | translate}}</div>
                    <wizdom365-principalpicker ng-switch-when="principals" principals="$parent.replaceValue" mode="{{selectedField.value.principalMode}}" domain="{{selectedField.value.principalDomain}}" allowmultiple="{{selectedField.value.allowMultiple}}" add-fn="addPrincipal(principal)" remove-fn="removePrincipal(principal)" placeholder=""></wizdom365-principalpicker>
                </div>
            </div>
        </div>
    </div>
</div>