How to reference a template?

[macMonkey]

This is my structure(based on ext-template repo):

src
├── files
│ ├── client
│ │ └── custom
│ │ ├── modules
│ │ │  └── lead-manipulation-package
│ │ │     └── res
│ │ │        └── templates
│ │ │           └── slider-template.tpl
│ │ └── src
│ │    ├── button-modal-handler.js
│ │    └── views
│ │       ├── DistributeSlider.js
│ │       ├── lead
│ │       │  └── myLead.js
│ │       └── modals
│ │          └── my-dialog.js
│ └── custom
│    └── Espo
│       └── Modules
│          └── LeadManipulationPackage
│             ├── EntryPoints
│             │  └── DistributeLeads.php
│             └── Resources
│                ├── i18n
│                │  └── en_US
│                │     └── Lead.json
│                ├── metadata
│                │  ├── aclDefs
│                │  │  └── Lead.json
│                │  ├── app
│                │  │  └── client.json
│                │  └── clientDefs
│                │     └── Lead.json
│                ├── module.json
│                └── routes.json
├── manifest.json
└── scripts
   ├── AfterInstall.php
   └── AfterUninstall.php​

slider-template.tpl:

<div class="distribute-slider">
   <h3>Select Users</h3>
   <div class="user-list">
      <!-- Content should be loaded here -->
   </div>
</div>

my-dialog.js:

define('custom:views/modals/my-dialog', ['views/modal', 'model'], (ModalView, Model) => {
   return class extends ModalView {
      className = 'dialog dialog-record'
      // language=Handlebars
      templateContent = `
         <div class="record">
            {{{lead-manipulation-package:templates/slider-template}}}. // !!! I WANT TO REFERENCE IT HERE !!!
         </div>
      `;
      // If true, clicking on the backdrop will close the dialog.
      // Can be 'static', true or false.
      backdrop = true
      async setup() {
         // Action buttons
         this.buttonList = [
            {
               name: 'doSomething', // handler for 'doSomething' action is below
               text: this.translate('Distribute', 'labels', 'MyScope'), // button label
               style: 'primary',
               onClick: () => this.foo(),
            },
            {
               name: 'cancel',
               label: 'Cancel',
            },
         ];
         const title = 'Select Users'; // assuming it's passed from our parent view
         this.headerText = title;
         // Load the collection asynchronously before initializing the list view
         const collection = await this.loadCollection();
         this.createView('record', 'views/record/list', {
            collection: collection,
            type: 'listSmall',
            selectable: true,
            massActionsDisabled: true,
            editDisable: true,
            el: this.$el.find('.user-list'), // Match template's `.user-list`
         }).then((view) => {
            view.render();
            });
         }
         async loadCollection() {
         const collection = await this.getCollectionFactory().create('User');
         await collection.fetch();
      return collection;
      }
      async foo(){
         // TODO: implement button function
      }
   }
});​

How do i reference "src/files/client/custom/modules/lead-manipulation-package/res/templates/slider-template.tpl" to "src/files/client/custom/src/views/modals/my-dialog.js" ?

PS: what would be some key files needed so that text and button labels are translatable in different languages?

[yuri]

Not possible to reference. It's supposed that a view is broken down into sub-views.

[yuri]

template: 'lead-manipulation-package:slider-template'

Referencing from a view instead of using templateContent.