<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
    <h3 class="modal-title" translate>Help</h3>
</div>
<div class="modal-body">
    <uib-tabset class="tabs-left" active="tabContainer.activeTab">
        <uib-tab heading="{{ 'Migration' | translate }}" index="'migration'">
            <uid-migration-help-tab></uid-migration-help-tab>
        </uib-tab>

        <uib-tab heading="{{ 'Editor organization' | translate }}" index="'editor'">

            <p translate>Use the palette on the left to drag and drop containers and widgets in the whiteboard.</p>

            <p translate>Once you select an element, edit its properties in the properties panel on the right.</p>

            <p translate>Create variables in the Variables panel at the bottom, and use them to edit the widget
                properties.</p>

            <p ng-if="pageEdition" translate>Add images, CSS or JavaScript resources to your pages in the Assets panel
                at the bottom.</p>

        </uib-tab>

        <uib-tab heading="{{ 'Rows' | translate }}" index="'rows'">
            <p>
                <translate>The whiteboard is organized in <b>rows</b> that you can move up and down, or delete.
                </translate>
            <ul>
                <li translate>Drag and drop widgets or containers in rows</li>
                <li translate>When you delete a row, the following rows move up</li>
                <li translate>Within a row, when you delete a widget or a container, the following elements move to the
                    left
                </li>
            </ul>
            </p>
        </uib-tab>

        <uib-tab heading="{{ 'Widgets' | translate }}" index="'widgets'">
            <p translate>Use <b>widgets</b> from the palette on the left to <b>display information to</b> and <b>gather
                information from</b> the end users.</p>

            <p translate>Configure widgets using the <b>properties panel</b> on the right.</p>

            <p translate>You can also create custom widgets, from existing widgets by "saving as" or from scratch in the home page.</p>

            <dl class="Guidance-definitionList">
                <dt translate>View</dt>
                <dd translate>To view the code of a standard widget, use the <b>View</b> menu option close to the widget name in the properties panel.
                    From there, to use the standard widget as a basis for a custom widget, click on <b>Save as</b>, find a name for the custom widget, and make it your own.
                </dd>

                <dt translate>Edit</dt>
                <dd translate>To edit a custom widget, use the <b>Edit</b> menu option close to the widget name in the properties panel.</dd>

                <dt translate>Switch <i class="fa fa-exchange"></i></dt>
                <dd>
                    <p transalte>
                        To replace a widget by another one and keep the current configuration, use the Switch option:
                    <ul>
                        <li translate>Either select the widget to switch and click on <i class="fa fa-exchange"></i>.</li>
                        <li translate>Or use the <b>Switch</b> menu option close to the widget name in the properties panel.</li>
                    </ul>
                    </p>

                    <p translate>
                        In the Switch wizard, select or type the widget to switch to, then click <b>Show properties</b>.<br/>
                        Whenever possible, properties in the source widgets are mapped with similar properties in the target widget. You can edit that or map more, then click on <b>Switch</b>.
                    </p>
                    <p translate>
                        When the switch is completed, chances are you will still have properties to fill out, in the properties panel.
                    </p>
                    <p class="alert alert-info" translate>
                        Containers cannot be switched.
                    </p>
                </dd>
            </dl>

        </uib-tab>

        <uib-tab heading="{{ 'Containers' | translate }}" index="'containers'">
            <p translate>
                You can group widgets into a container to define the arrangement of widgets in a form or a page. A
                container can contain other containers.
            </p>

            <p>
                <translate>Each type or container has specific behaviors</translate>
            <ul>

                <li translate>Repeat content for the plain container</li>
                <li translate>Multiple content for tabs container</li>
                <li translate>Access to $form capabilities for form container</li>
            </ul>
            </p>

            <p translate>
                You can save the content of a plain container as a reusable fragment.
            </p>

        </uib-tab>

        <uib-tab heading="{{ 'Variables' | translate }}" index="'variable'">
            <p translate>
                In the scope of a page, form, or layout, a variable can be used to handle business data,
                or can contain structural information that determines how page elements behave.
            </p>

            <p translate>
                Create a variable in the bottom panel. Using a variable in a widget property depends on the property value type,
                described in the next section.
            </p>

            <p translate>
                    In the fragment editor, you can set the scope of a variable to <i>specific to this fragment</i> or to <i>exposed to the page</i>.
            </p>
        </uib-tab>

        <uib-tab heading="{{ 'Properties' | translate }}" index="'properties'">
            <ng-include src="'js/editor/properties-panel/help/property-bond-help.html'"/>
        </uib-tab>

        <uib-tab heading="{{ 'Filters' | translate }}" index="'filters'">
            <p translate>You can format data with filters when data is used in widget property fields that allow interpolation <i class="fa fa-paragraph"></i> or that are bound to a variable <i class="fa fa-link"></i> .</p>
            <p translate>
                All <a href="https://code.angularjs.org/1.3.18/docs/api/ng/filter" target="_blank">angularJS filters</a> are available. Usage requires the use of <code>|</code> ("pipe"). E.g. <code>myVariable|lowercase</code>.
            </p>

            <dt translate>Date filter</dt>
            <dd>
                <p translate>
                    For date format specifically, the UI Designer comes with a <em>uiDate</em> filter to easily display dates retrieved from the BDM or any other REST API.
                </p>
                <p>
                    <translate>You can apply it to the following variable value types:</translate>
                    <ul>
                        <li><a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> <translate>formatted String variables</translate></li>
                        <li translate>Date object</li>
                        <li translate>Milliseconds since Epoch (number or string  variable)</li>
                    </ul>
                </p>
                <p translate>
                    Two use cases :
                    <ul>
                        <li><code>dateVariable|uiDate</code> applies a default <a href="https://code.angularjs.org/1.3.18/docs/api/ng/filter/date" target="_blank">format</a>. For an ISO 8601 string with a time, the default format is <em>'medium'</em>. Otherwise, it is <em>'mediumDate'</em>.</li>
                        <li><code>dateVariable|uiDate:format</code> if you need to be more specific in which format, it can be specified exactly the same way as with <a href="https://code.angularjs.org/1.3.18/docs/api/ng/filter/date" target="_blank">angularJS date filter</a>.<br/>
                            E.g. <code>dateVariable|uiDate:'short'</code> or <code> dateVariable|uiDate:'dd/MM/yyyy'</code></li>
                    </ul>
                </p>
                <p translate>
                    Date formats are localized by default. Localized formats can be edited in <em>localization.json</em> (refer to the <a href="javascript:void(0);" ng-click="tabContainer.activeTab = 'localization'">localization section</a>).
                </p>
            </dd>

            <dt translate>Lazy reference filter</dt>
            <dd>
                <p translate>
                    For business objects, the UI Designer comes with a <em>lazyRef</em> filter to easily retrieve target url to use in an external API data.
                </p>
                <p translate>
                    E.g. Given a variable <em>employee</em> of type External API that fetch the task context <code>../{{context.employee_ref.link}}</code>. To retrive all the addresses of <em>employee</em> that are lazy in the BDM, you can create another variable <em>employee_addresses</em> of type External API with an url parameter like <code>employee | lazyRef : 'addresses'</code>
                </p>
            </dd>
        </uib-tab>

        <uib-tab heading="{{ 'Localization' | translate }}" index="'localization'">

            <p translate>The UI Designer is displayed in the language of your Bonita Studio.</p>

            <p translate>
                To support multi-languages for end-users, it includes a mechanism to translate the UI artifacts (pages, forms, layouts) created.
            </p>

            <p translate>
                You can translate all the text displayed on a UI artifact: labels, placeholders,
                available values of a list. Even the Date format of the Date Picker widget can be localized.</p>

            <p translate>
                In the preview and at runtime, the displayed text will adapt automatically to the selected language.
            </p>

            <p translate>In production, if the user is logged into Bonita Portal, UI artifacts
              are displayed in the Portal language selected by the user or in the browser locale.</p>

            <p><translate>Each artifact contains a <em>localization.json</em> asset, with keys and translations for all strings
                and all supported languages (by default french and spanish). Each language has its section and is identified by the ISO 639
                language attribute (for example, fr-FR, es-ES). To add new languages, keys and/or translations, export the default <em>localization.json</em>,
                edit it, and upload it with the same file name. For more information on installing new languages, go to the documentation web site (keywords:</translate> "add new language").
            </p>

            <p translate>
                By convention, in <em>localization.json</em>, the language used for translation keys is English.
                This means that in the editor whiteboard, any widget default text is currently in English.
                However, to ease maintenance and update of the UI artifacts in English, you can change the keys into code names and
                add an <b>en-US</b> section in the <em>localization.json</em> asset file.
            </p>

            <p translate><em>Note about the</em> Date Picker <em>and</em> Date Time Picker <em>widgets:</em>
                the <em>Placeholder</em> property translations must match the <em>Technical format</em> property values (order and number of letters).
                However, the <em>Placeholder</em> key should be different from the <em>Technical format</em> key to avoid translations mismatches.
            </p>
            <p translate>
            <em><b>Example</b></em>: use the key <em>button.submit.name</em> on the <b>Label</b> property of a submit button.
            Use the key <em>date.format</em> on the <b>Date format</b> property and <em>date.placeholder</em> on the <b>Placeholder</b> property on a Date Picker widget.
            Then, change the <em>localization.json</em> asset to add the <em>button.submit.name</em>, <em>date.format</em> in English, <em>date.placeholder</em> translations.
            </p>
            <pre> {
  "en-US": {
    ...
    "button.submit.name": "Submit",
    "date.format": "MM/dd/yyyy",
    "date.placeholder": "Enter a date (mm/dd/yyyy)",
    ...
  },
  "fr-FR": {
    ...
    "button.submit.name": "Soumettre",
    "date.format": "dd/MM/yyyy",
    "date.placeholder": "Entrer une date (jj/mm/aaaa)",
  "es-ES": {
    ...
  },
    ...
    "button.submit.name": "Enviar",
    "date.format": "dd/MM/yyyy",
    "date.placeholder": "Introducir una fecha (dd/mm/aaaa)",
    ...
  }
}</pre>
        </uib-tab>

        <uib-tab id="help-responsiveness" heading="{{ 'Multiple screen size' | translate}}" index="'responsiveness'">
            <p translate>You can optimize the UI designer responsiveness behavior for various screen sizes by configuring a different value for the <em>width</em> property for each device type. This uses the Bootstrap CSS grid mechanism.</p>
            <p translate>Four device types are available:</p>
            <ul>
                <li><i class="fa fa-lg fa-mobile"></i> {{'mobile screens (screenSize < 768px)'| translate}}</li>
                <li><i class="fa fa-lg fa-tablet"></i> {{'tablet screens (768px ≤ screenSize < 992px)'| translate}}</li>
                <li><i class="fa fa-lg fa-laptop"></i> {{'laptop screens (992px ≤ screenSize < 1200px)'| translate}}</li>
                <li><i class="fa fa-lg fa-desktop"></i> {{'desktop screens (1200px ≤ screenSize)'| translate}}</li>
            </ul>
            <p translate>Select the device type icon in the top bar, then specify the width property for each widget in the page or form. Each configuration is independent.
                To specify the width property for a widget for all device types, set the value for each device type separately, or leave the default value.</p>
        </uib-tab>

    </uib-tabset>
</div>
<div class="modal-footer">
    <button class="btn btn-link" ng-click="cancel()" translate>Close</button>
</div>
