{{ t.pages.multiSelect.overviewIntro }}

{{ t.pages.multiSelect.descriptionTitle }}

{{ t.pages.multiSelect.descriptionBody }}

{{ t.pages.multiSelect.featuresTitle }}

{{ t.pages.multiSelect.featureOne }}
{{ t.pages.multiSelect.featureTwo }}
{{ t.pages.multiSelect.featureThree }}
{{ t.pages.multiSelect.featureFour }}

{{ t.pages.multiSelect.limitsTitle }}

{{ t.pages.multiSelect.limitOne }}
{{ t.pages.multiSelect.limitTwo }}
{{ t.pages.multiSelect.limitThree }}

{{ t.pages.multiSelect.channels }}

{{ t.pages.multiSelect.projectedTargets }}

{{ t.pages.multiSelect.optionPortal }}

{{ t.pages.multiSelect.optionApi }}

{{ t.pages.multiSelect.optionBatch }}

{{ t.pages.multiSelect.channels }}: {{ selectedChannelsLabel }}

{{ t.pages.multiSelect.projectedLabel }}: {{ projectedChannelsLabel }}

{{ t.pages.multiSelect.apiTitle }}

{{ t.pages.multiSelect.apiIntroOne }}

{{ t.pages.multiSelect.apiIntroTwo }}

[dataSource]: {{ t.pages.multiSelect.apiDataSource }}
labelKey: {{ t.pages.multiSelect.apiLabelKey }}
valueKey: {{ t.pages.multiSelect.apiValueKey }}
[(ngModel)]: {{ t.pages.multiSelect.apiNgModel }}
[placeholder]: {{ t.pages.multiSelect.apiPlaceholder }}
[showClearButton]: {{ t.pages.multiSelect.apiShowClearButton }}

<li-multi-select
  [dataSource]="channelOptions"
  labelKey="label"
  valueKey="id"
  [(ngModel)]="selectedChannels">
</li-multi-select>

{{ t.pages.multiSelect.notesTitle }}

{{ t.pages.multiSelect.noteOne }}
{{ t.pages.multiSelect.noteTwo }}
{{ t.pages.multiSelect.noteThree }}

// Bom: opções criadas uma única vez
late final List<Map<String, dynamic>> channelOptions;

// O ngModel muda, mas o dataSource continua estável
List<dynamic> selectedChannels = <dynamic>['email', 'push'];