<div class="modal-header">
    <button type="button" class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
    <h3 class="modal-title" translate>Help</h3>
</div>
<div class="modal-body">
    <uib-tabset class="tabs-left">
        <uib-tab heading="{{ 'General' | translate }}">
            <p translate>
                Assets enable you to add web resources to pages and forms. Available asset types are
                <strong>JavaScript</strong>, <strong>CSS</strong>, <strong>Image</strong> and <strong>Localization</strong>.
                Assets can be <strong>Local</strong> (file stored into the page artifact)
                or External (URL). The Localization asset is always local.
            </p>

            <p translate>
                A local asset name must not contain special characters or spaces. An external asset name must be a standard URL.
            </p>

            <p translate ng-if="!isPage">
                To use the same asset in several pages, you can add it to a custom widget and use this custom widget in your application pages or forms. When you add a custom widget with assets to a page, those assets are automatically linked to the page.
            </p>

        </uib-tab>

        <uib-tab heading="{{ 'Asset use' | translate }}" ng-if="isPage">
            <p translate>
                Add JavaScript assets for custom scripts. They will be loaded and made available at page level. You can use them in variables of type JavaScript expression. In the value field of the variable, simply call the function and pass the required parameters.
            </p>

            <p translate >
                Add CSS assets at page level and use them to edit the CSS classes property of any widget. (UI Designer integrates default Bootstrap style)
            </p>

            <p translate>
                To manage multiple version of dependencies, make sure only one version of an asset is active inside a page.
            </p>

            <p translate>
                To load an image for any custom widget, add image assets at page level. Access it with <code>asset/img/[image name]</code>.
            </p>

            <p translate>
                To use an image asset in the image widget, set the <code>Source type</code> property to <i>Asset</i>, and then enter the image name in the <code>Asset name</code> input field.
            </p>

            <p>
                <translate>To use a localization asset, replace the default localization.json file with a file of the same format
                    containing all the keys in the page and the translations into the target languages. The localization
                    asset is at page level. The format of the file must be:</translate>
            <pre><code>{
    "fr-FR": {
        "Title": "Titre",
        "Default label": "Libellé par défaut",
        ...
    },
    "es-ES": {
        "Title": "Título",
        "Default label": "Etiqueta por defecto",
        ...
    }
    ...
}</code></pre>
            <translate>See the default localization asset for an example.</translate>
            </p>
        </uib-tab>

        <uib-tab heading="{{ 'Asset use' | translate }}" ng-if="!isPage">
            <p translate>
                In a JavaScript asset, you can specify a dependency on an Angular module. First add the JavaScript asset, and then add the module name in the dedicated section. You can find the the available modules on <a href="http://ngmodules.org/">http://ngmodules.org/</a>.
            </p>

            <p translate>
                To load a local image asset in a custom widget, you need to reference it in the template inside a <code>&lt;img&gt;</code> tag with a relative path as follows: <br><code ng-non-bindable>&lt;img src="widgets/[custom widget id]/assets/img/[image name]"&gt;</code>
            </p>
        </uib-tab>

        <uib-tab heading="{{ 'Asset list' | translate }}" ng-if="isPage">
            <p translate>
                The list contains page assets, the assets of the widgets used in this page and assets used by base framework.
            </p>
            <p translate>
                You can delete page assets only, view local assets, and edit external assets of a page.
            </p>

            <p translate>
                You cannot have more than one localization asset. When you upload a new asset file, it overwrites the
                existing one.
            </p>

            <p translate>
                By default, only page assets are displayed. To display others scopes assets, we should check Widget or Base Framework checkbox.
            </p>

            <p translate>
               You cannot move, delete or disable <b>Base framework</b> assets. They are here only to show you which library is used to build your artifact
            </p>


        </uib-tab>

        <uib-tab heading="{{ 'Asset list' | translate }}" ng-if="!isPage">
            <p translate >
                In this list, you can use the arrows to reorder assets, view local assets, edit external assets, and delete any.
            </p>

            <p translate>
                At runtime, assets of a custom widget are loaded in the order defined.
            </p>
        </uib-tab>

        <uib-tab heading="{{ 'Asset reordering' | translate }}" ng-if="isPage">
            <p translate>
                In the Asset list, you can manually change the order of CSS and Javascript page assets. Reorder this files can be useful to override some css classes or javascript functions.
            </p>
            <p translate>
                Image or Localization assets are not imported in index.html. So we don't need to reorder them.
            </p>

            <p translate>
                At runtime, CSS and JavaScript assets are loaded in the page header. This loading is done as it's represented in this list, CSS first then Javascript.
                All assets are loaded in order they are listed, widget assets before page assets (in alphabetical order of the widgets name).
            </p>

            <p translate>
                Note that reordering assets is disabled when the list is a search results list. Indeed, reordering is only relevant if the complete list of page assets is displayed.
            </p>

            <p translate>
                <b>Note</b>: Custom-widget assets are only editable in widget editor. You can't modify them at page level to avoid side effects on other pages.
                So if you want to reorder custom-widget assets, please go to widget editor.
            </p>

        </uib-tab>


        <uib-tab heading="{{ 'Custom services' | translate }}">
            <p>
                <translate>To extend a page or form with custom AngularJS services (such as filters, constants, or factories), use the <code>bonitasoft.ui.extensions</code> module.</translate> <br><button ng-click="extensionsExamplesCollapsed = !extensionsExamplesCollapsed" type="button" class="btn btn-link" translate>Example: relative time filter</button>
            </p>

            <section>
                <div class="well" uib-collapse="!extensionsExamplesCollapsed">
                    <div>
                        <h4 translate>Relative time filter</h4>

                        <p translate>
                            This filter uses the <a href="http://momentjs.com/">moment.js</a> library to transform the display of a relative time. For example, it transforms   '01/01/2011' to '4 years ago'.
                        </p>

                        <p>
                            <ul>
                                <li translate>Import the moment.js library as an external asset.</li>
                                <li>
                        <p translate>Create a JavaScript file named <code>date-ago-filter.js</code> that updates the <code>bonitasoft.ui.extensions</code> module with the filter:</p>
                        <pre><code ng-non-bindable>angular.module('bonitasoft.ui.extensions')
  .filter('dateAgo', ['$window', function ($window) {
    return function dateAgo(input) {
      var compar = new Date(input);
      return $window.moment(compar).fromNow();
    };
}]);</code></pre></li>
                        <li translate>Import this JavaScript file as a local page asset.</li>
                        <li translate>Create a JSON variable named <code>updateDate</code> to hold a timestamp as a number</li>
                        <li translate>To display the date in a widget property evaluated as an expression, use the <code>dateAgo</code> filter on the <code>updateDate</code> variable as follows: <code>updateDate | dateAgo</code></li>
                        </ul>
                        </p>
                    </div>
                </div>
            </section>
        </uib-tab>


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