<div>
    <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
        <div class="modal-header">
            <button type="button" class="close" ng-click="dismiss()" aria-hidden="true">&times;</button>
            <h3 ng-if="customwidget_name" translate-keep-content translate="widget.template.settings.header.customwidget" translate-values="{ widget: customwidget_name }">{{customwidget_name}} Settings</h3>
            <h3 ng-if="!customwidget_name" translate-keep-content translate="widget.template.settings.header">Template Settings</h3>
        </div>
        <div class="modal-body">
            <div class="form-group" ng-class="{error: _form.name.$error && _form.submitted}">
                <label class="control-label col-lg-3 col-md-3" translate>Name</label>
                <div class="col-lg-9 col-md-9">
                    <input name="name" type="text" ng-model="form.name" class="form-control" />
                </div>
            </div>
            <div class="form-group" ng-class="{error: _form.nolinebreak.$error && _form.submitted}">
                <!--<label class="control-label col-lg-3 col-md-3"></label>-->
                <div class="col-lg-8 col-md-8">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="vertical" ng-model="form.dontwrap" /> <span translate-keep-content translate="widget.template.dontwrap">Don't wrap in container</span>
                        </label>
                        &nbsp;&nbsp;
                        <label>
                            <input type="checkbox" name="vertical" ng-model="form.nobackground" /> <span translate-keep-content translate="widget.template.nobackground">No background</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- direct template editing -->
            <div ng-if="!widget.customwidget && !widget.preview">
                <h4>
                    <input style="display: none" type="file" id="template-file-select" local-file-select="file" on-file-selected="importFile" />
                    <div class="btn-group pull-right" style="margin-top: -10px" uib-dropdown>
                        <a id="template-actions" class="btn btn-default glyphicon glyphicon-option-vertical" uib-dropdown-toggle>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu" aria-labelledby="template-actions">
                            <li class="menuitem"><a ng-click="showImportDialog()"><i class="glyphicon glyphicon-import">&nbsp;</i><span translate-keep-content translate="widget.template.importfromfile">Import from file...</span></li></a>
                            <li class="menuitem"><a ng-click="exportToFile()"><i class="glyphicon glyphicon-export">&nbsp;</i><span translate-keep-content translate="widget.template.exporttofile">Export to file</span></a></li>
                            <li class="divider" />
                            <li class="menuitem"><a href="https://community.openhab.org/c/apps-services/habpanel" target="_blank"><i class="glyphicon glyphicon-heart">&nbsp;</i><span translate-keep-content translate="widget.template.communitysupport">Community support</span></a></li>
                            <li class="menuitem"><a href="https://community.openhab.org/t/habpanel-development-advanced-features-start-here/30755" target="_blank"><i class="glyphicon glyphicon-question-sign">&nbsp;</i><span translate-keep-content translate="widget.template.knowledgebase">Knowledge base</span></a></li>
                        </ul>
                    </div>
                    <span translate-keep-content translate="widget.template.template">Template</span>
                </h4>
                <div class="form-group" ng-class="{error: _form.name.$error && _form.submitted}">
                    <div class="col-lg-12 col-md-12">
                        <div ui-codemirror ui-refresh='refreshEditor' ui-codemirror-opts="editorOptions" ng-model="form.template">
                        </div>
                        <!--<pre><textarea ui-codemirror style="width: 100%" ng-model="form.template" rows="15" cols="55"></textarea></pre>-->
                    </div>
                </div>
            </div>

            <!-- custom widget settings -->
            <div ng-if="widget.customwidget || widget.preview">
                <hr />
                <div class="form-group" ng-repeat="setting in widgetsettings">
                    <label ng-if="setting.type !== 'heading'" class="control-label col-lg-3 col-md-3">{{setting.label || setting.id}}</label>
                    <div class="col-lg-9 col-md-9" ng-switch="setting.type">
                        <h4 ng-if="setting.type === 'heading'">{{setting.label}}</h4>
                        <input ng-switch-when="string" type="text" ng-model="form.config[setting.id]" class="form-control">
                        <input ng-switch-when="number" type="number" ng-model="form.config[setting.id]" class="form-control" step="any" style="width: 120px">
                        <div ng-switch-when="checkbox" style="padding-top: 7px"><input type="checkbox" ng-model="form.config[setting.id]"> {{setting.description}}</div>
                        <item-picker ng-switch-when="item" ng-model="form.config[setting.id]"></item-picker>
                        <select ng-switch-when="choice" ng-options="choice for choice in setting.choices.split(',')" ng-model="form.config[setting.id]" class="form-control"></select>
                        <icon-picker ng-switch-when="icon" iconset="form.config[setting.id + '_iconset']" icon="form.config[setting.id]"></icon-picker>
                        <div ng-switch-when="color" dab-model="form.config[setting.id]" web-colorpicker dab-width="20" dab-height="20" dab-radius="50" dab-vertical="4" dab-rotate="0" show-grayscale="true"></div>
                        <div ng-if="setting.type !== 'checkbox'"><small>{{setting.description}}</small></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a ng-click="remove()" ng-if="!widget.preview" class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-trash"></i>&nbsp;<span translate>Delete</span></a>
            <a class="btn btn-info pull-left" ng-if="customwidget_helpUrl" href="{{customwidget_helpUrl}}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i>&nbsp;<span translate>Help</span></a>
            <a ng-click="dismiss()" class="btn btn-default" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>&nbsp;<span translate>Cancel</span></a>
            <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i>&nbsp;<span translate>Save</span></button>
        </div>
    </form>
</div>
