<cr-lazy-render-lit
id="voiceSelectionMenu"
.template='${() => html`
<cr-action-menu
@close="${this.onClose_}"
@keydown="${this.onVoiceMenuKeyDown_}"
accessibility-label="$i18n{voiceSelectionLabel}"
role-description="$i18n{menu}"
>
${this.downloadingMessages_.map((item) => html`
<span class="dropdown-line download-message">${item}</span>
`)}
${this.voiceGroups_.map((voiceGroup, groupIndex) => html`
<span class="dropdown-line lang-group-title">
${voiceGroup.language}
</span>
${voiceGroup.voices.map((voice, voiceIndex) => html`
<button data-test-id="${voice.id}"
class="dropdown-item dropdown-voice-selection-button"
data-group-index="${groupIndex}"
data-voice-index="${voiceIndex}"
@click="${this.onVoiceSelectClick_}">
<span class="voice-name">
<cr-icon id="check-mark"
class="item-invisible-${!voice.selected} check-mark"
icon="read-anything-20:check-mark"
aria-label="$i18n{selected}">
</cr-icon>
${voice.title}
</span>
<cr-icon-button id="preview-icon"
@click="${this.onVoicePreviewClick_}"
data-group-index="${groupIndex}"
data-voice-index="${voiceIndex}"
title="${this.previewLabel_(voice.previewPlaying)}"
aria-label="${this.previewAriaLabel_(voice.previewPlaying,voice.title)}"
iron-icon="${this.previewIcon_(voice.previewPlaying)}">
</cr-icon-button>
</button>
`)}
`)}
<hr class="menu-divider">
<button
class="dropdown-item dropdown-voice-selection-button language-menu-button"
@click="${this.openLanguageMenu_}">
$i18n{readingModeLanguageMenu}
</button>
</cr-action-menu>
`}'>
</cr-lazy-render-lit>
${this.showLanguageMenuDialog_
? html`
<language-menu id="languageMenu"
.enabledLangs="${this.enabledLangs}"
.voicePackInstallStatus="${this.voicePackInstallStatus}"
.localeToDisplayName="${this.localeToDisplayName}"
.lastDownloadedLang="${this.lastDownloadedLang}"
.selectedLang="${this.selectedVoice?.lang}"
.availableVoices="${this.availableVoices}"
@close="${this.onLanguageMenuClose_}">
</language-menu>
`
: ''
}