<div class="modal-header">
    <button ng-click="cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <span class="modal-title">{{'Edit tile' | translate}}</span>
</div>
<div class="modal-body">
    <form name="tileForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">
                {{'Name' | translate}}<small class="text-danger">*</small>
            </label>
            <div class="col-sm-9">
                <input type="text" ng-model="tile.title" class="form-control" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                {{'Type' | translate}}<small class="text-danger">*</small>
            </label>
            <div class="col-sm-9">
                <select ng-options="type.title as type.value.label for type in types" ng-model="tile.value.type" ng-change="typeChanged()" class="form-control" required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">{{'Audiences' | translate}}</label>
            <div class="col-sm-9">
                <wizdom365-principalpicker principals="tile.audiences" mode="groups" allowmultiple="true" add-fn="addPrincipal(principal)" remove-fn="removePrincipal(principal)" allowwizdomgroups="true" placeholder=""></wizdom365-principalpicker>
            </div>
        </div>
        <hr />
        <div class="livetiles-showallfields" ng-click="showAllFields = true" ng-style="{ 'visibility': ((showAllFields || !tile.value.type) ? 'hidden' : 'visible') }">
            <button type="button" class="btn-xs btn-link">{{'Show all fields' | translate}}</button>
        </div>
        <div class="form-group" ng-repeat="field in fields | orderBy:sortCategory" ng-hide="(field.title === 'platform' || field.title === 'classes' || field.title === 'background' || field.title === 'color') && !showAllFields">
            <div ng-if="showHeader(field.value.category)" class="h5 text-center">{{field.value.category | translate}}</div>
            <label class="col-sm-3 control-label">{{field.value.label | translate}}</label>
            <div class="col-sm-9" ng-switch="field.value.type">
                <input    ng-switch-when="text" type="text" class="form-control" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)" />
                <textarea ng-switch-when="textarea" ui-tinymce toolbar-configuration="LiveTiles" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)"></textarea>
                <div      ng-switch-when="html" ui-ace="{mode: 'html'}" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)"></div>
                <input    ng-switch-when="number" type="number" class="form-control" step="{{field.value.step}}" min="{{field.value.min}}" max="{{field.value.max}}" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)" />
                <div      ng-switch-when="date" wizdom365-datetime-picker show-date-picker="true" date="tile.value[field.title]" ng-init="setDefaultValue(field)"></div>
                <div      ng-switch-when="checkbox" class="checkbox"><label><input type="checkbox" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)" /></label></div>
                <div      ng-switch-when="radio" ng-repeat="option in field.value.options" class="radio"><label><input type="radio" ng-model="tile.value[field.title]" ng-value="option.value" ng-init="setDefaultValue(field)" />{{option.name}}</label></div>
                <select   ng-switch-when="select" ng-if="!field.value.allowMultiple" class="form-control" ng-options="option.value as option.name for option in field.value.options" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)"></select>
                <select   ng-switch-when="select" ng-if="field.value.allowMultiple" multiple class="form-control" ng-options="option.value as option.name for option in field.value.options" ng-model="tile.value[field.title]" ng-init="setDefaultValue(field)"></select>
                <div ng-switch-when="image">
                    <wizdom365-image-picker-input wizdommodule="LiveTiles" result="tile.value[field.title]" ng-init="setDefaultValue(field)"></wizdom365-image-picker-input>
                    <img ng-src="{{tile.value[field.title]}}" class="image-picker-preview" ng-show="tile.value[field.title]" />
                </div>
                <wizdom365-taxonomypicker  ng-switch-when="taxonomy" ng-if="termSet" selected-terms="tile.value[field.title]" ng-init="setDefaultValue(field)" term-set-id="{{termSet.termSetId}}" placeholder=" "></wizdom365-taxonomypicker>
                <div      ng-switch-when="taxonomy" ng-if="!termSet" ng-init="setDefaultValue(field)">{{'No term set selected' | translate}}</div>
                <wizdom365-principalpicker ng-switch-when="principals" principals="tile.value[field.title]" ng-init="setDefaultValue(field)" mode="{{field.value.principalMode}}" domain="{{field.value.principalDomain}}" allowmultiple="{{field.value.allowMultiple}}" add-fn="addPrincipal(principal)" remove-fn="removePrincipal(principal)" placeholder=""></wizdom365-principalpicker>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-danger pull-left" ng-if="!isNewForm" ng-click="delete();">{{'Delete' | translate}}</button>
    <button class="btn pull-left" ng-class="tile.value.disabled ? 'btn-info' : 'btn-warning'" ng-click="toggleDisabled();">{{(tile.value.disabled ? 'Enable' : 'Disable') | translate}}</button>
    <button class="btn btn-default" ng-disabled="loading" ng-click="cancel();">{{(hasPendingChanges() ? 'Cancel' : 'Close') | translate}}</button>
    <button class="btn btn-success" ng-if="hasPendingChanges()" ng-click="save();" ng-disabled="tileForm.$invalid">{{'Save' | translate}}</button>
</div>