<div class="WidgetEditor">
    <div class="EditorHeader" role="navigation" confirm-on-exit confirm-data="widget">
        <div class="EditorHeader-menu">
            <a class="EditorHeader-back EditorHeader-navBtn" ng-click="back()" uib-tooltip="{{ 'Back' | translate }} "
               tooltip-placement="right" tooltip-popup-delay="300">
                <i class="fa fa-chevron-left"></i>
            </a>
            <a ui-sref="designer.home" class="EditorHeader-homeNav EditorHeader-navBtn"
               uib-tooltip="{{ 'Home page' | translate }} " tooltip-placement="right" tooltip-popup-delay="300">
                <i class="ui-icon ui-designer"></i>
            </a>
            <span class="EditorHeader-brand" translate>
                widget editor
            </span>
            <h3 class="EditorHeader-name EditorHeader-name--custom">
                <identicon ng-if="widget.custom" name="{{widget.id}}" size="30" foreground-color="[203, 213, 225, 255]"
                           background-color="[0,0,0,0]"></identicon>
                {{widget.name}}
            </h3>
            <div class="EditorHeader-actions">
                <button ng-if="!widget.custom" id="saveas-bonita" type="button" class="btn btn-bonita-primary"
                        ng-disabled="widget.type === 'container'"
                        ng-click="saveAs(widget)" translate>Save as...
                </button>
                <div ng-if="widget.custom" class="btn-group" uib-dropdown>
                    <button id="save" type="button" class="btn btn-bonita-primary" ng-click="save()"
                            ng-disabled="!isPageDirty(widget)" translate>Save
                    </button>
                    <button type="button" class="btn btn-bonita-primary uib-dropdown-toggle" uib-dropdown-toggle>
                        <span class="fa fa-caret-down"></span>
                        <span class="sr-only">Save</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a id="saveAs" class="clickable" ng-click="saveAs(widget)" translate>Save as ...</a></li>
                    </ul>
                </div>
                <button type="button"
                        id="export"
                        ng-disabled="!widget.custom"
                        class="btn btn-bonita-primary"
                        ng-click="saveAndExport()"
                        title="{{'Export'|translate}}">
                    <i class="ui-icon ui-export"></i>
                </button>
            </div>
            <save-indicator class="EditorHeader-saveIndicator"></save-indicator>
        </div>
        <div class="EditorHeader-help">
            <button class="btn btn-bonita-help" ng-click="openHelp()" title="{{'Open help' | translate}}"><i
                class="fa fa-question-circle"></i></button>
        </div>

    </div>
    <div class="layout">
        <div class="CustomEditor-navBar">
            <button ng-repeat="section in sections | orderBy:'order'"
                    id="btn-{{section.id}}"
                    class="Palette-section nav-section"
                    ng-class="section.classes"
                    ng-click="section.click($event,section.id)"
                    aria-label="{{section.name | translate}}"
                    uib-tooltip="{{section.tooltip || section.name | translate}}"
                    tooltip-placement="right"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"><i class="fa fa-lg {{section.icon}}"></i>
            </button>
        </div>

        <div class="container-fluid CustomEditor">
            <div id="general" class="widget-section CustomEditor-general" style="display:none">
                <div class="section-general-description">
                    <h4 class="CustomEditor-section">
                        <span class="CustomEditor-section-underline" translate>Description</span>
                        <i class="fa fa-lg fa-info-circle CustomEditor-helper" tooltip-placement="bottom"
                           uib-tooltip="{{'This description will be displayed as a tooltip in the palette' | translate }}"
                           tooltip-append-to-body="true"></i>
                    </h4>
                    <textarea class="form-control textarea--widget" ng-disabled="!widget.custom"
                              ng-attr-placeholder="{{ 'Widget description' | translate }}"
                              ng-model="widget.description"></textarea>
                </div>

                <div id="assets" ui-view="asset"></div>
                <div class="form-group section-general-required">
                    <h4 class="CustomEditor-section">
                        <span class="CustomEditor-section-underline" translate>Required angular modules</span>
                        <i class="fa fa-lg fa-info-circle CustomEditor-helper"
                           uib-tooltip="{{'Extra angular modules needed by this custom widget (comma separated)' | translate }}"
                           tooltip-append-to-body="true"></i>
                    </h4>
                    <input type="text" class="form-control" id="requiredModules"
                           ng-attr-placeholder="{{ 'Extra angular modules needed by this custom widget (comma separated)' | translate }}"
                           ng-disabled="!widget.custom" ng-model="widget.requiredModules" ng-list>
                </div>
                <div>
                    <h4 class="CustomEditor-section CustomEditor-properties-title">
                        <span class="CustomEditor-section-underline" translate>Bonita resources</span>
                        <i class="fa fa-lg fa-info-circle CustomEditor-helper"
                           tooltip-placement="bottom"
                           uib-tooltip="{{'Declare the Bonita REST API resources used in this widget.' | translate }}"
                           tooltip-append-to-body="true"></i>
                    </h4>
                    <div id="webResources" ui-view="data"></div>
                </div>
            </div>
            <div id="code" class="widget-section" style="display:flex">
                <div class="CustomEditor-code">
                    <div class="CustomEditor-code-left">
                        <h4 class="CustomEditor-section">
                            <span class="CustomEditor-section-underline" translate>Template</span>
                        </h4>

                        <ace-editor id="template" class="ace-editor--widget"
                                    ng-class="{'ace_editor-readonly': !widget.custom}" mode="html"
                                    ng-readonly="!widget.custom"
                                    ng-model="widget.template">
                        </ace-editor>
                    </div>
                    <splitter splitter-id="splitter"></splitter>
                    <div class="CustomEditor-code-right">
                        <h4 class="CustomEditor-section">
                            <span class="CustomEditor-section-underline" translate>Controller</span>
                        </h4>
                        <ace-editor id="controller" class="ace-editor--widget"
                                    ng-class="{'ace_editor-readonly': !widget.custom}"
                                    mode="javascript"
                                    ng-readonly="!widget.custom"
                                    ng-model="widget.controller">
                        </ace-editor>
                    </div>
                </div>
            </div>
        </div>

        <div class="CustomEditor-properties" ng-class="{'CustomEditor-properties--closed': isPropertyPanelClosed}">
            <button title="{{'Toggle properties panel' | translate}}"
                    class="CustomEditor-properties-btn-toggle"
                    ng-click="togglePropertyPanel()">
            </button>
            <div class="CustomEditor-properties-panel">
                <div class="CustomEditor-properties-section">
                    <h4 class="CustomEditor-section CustomEditor-properties-title">
                        <span class="CustomEditor-section-underline" translate>Properties</span>
                        <i class="fa fa-lg fa-info-circle CustomEditor-helper"
                           tooltip-placement="bottom"
                           uib-tooltip="{{'This description will be displayed as a tooltip in the palette' | translate }}"
                           tooltip-append-to-body="true"></i>
                    </h4>
                    <div class="CustomEditor-properties-btn">
                        <button id="create"
                                title="Create a new property"
                                class="btn btn-bonita-primary"
                                ng-disabled="!widget.custom" ng-click="createOrUpdate()">
                            <i class="fa fa-plus fa-lg"></i>
                            <span translate>Create</span>
                        </button>
                    </div>
                </div>
                <div class="CustomEditor-scrollview">
                    <table class="table">
                        <tbody>
                        <tr ng-repeat="property in widget.properties">
                            <td class="col-xs-10 PropertyDescription">
                                <div class="PropertyName"><strong>{{ property.name }}</strong></div>
                                <div><small translate>Label</small>: {{ property.label }}</div>
                                <div><small translate>Treat
                                    as </small><span> {{ bonds[property.bond].name | translate
                                    }}</span>
                                </div>
                                <div><span ng-if="isTypeSelectable(property.bond)"><small
                                    translate>Type</small>: {{property.type}}</span></div>
                                <div ng-if="property.type === 'choice'"><small translate>Choices</small>:
                                    {{ property.choiceValues.join(', ') }}
                                </div>
                                <div ng-if="property.bond !== 'variable'"><small translate>Default value</small>:
                                    {{ property.defaultValue }}
                                </div>
                            </td>
                            <td class="col-xs-2 Property-actions">
                                <button id="editProperty" class="btn btn-bonita-default" title="Update property"
                                        ng-disabled="!widget.custom" ng-click="createOrUpdate(property)"><i
                                    class="fa fa-lg fa-pencil"></i></button>
                                <button id="deleteProperty" class="btn btn-bonita-default" title="Delete property"
                                        ng-disabled="!widget.custom" ng-click="deleteParam(property)"><i
                                    class="fa fa-lg fa-trash"></i></button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
