<cr-dialog id="languageMenu" show-on-attach ignore-popstate>
<div slot="title" class="language-menu-title-bar">
<div class="language-menu-title">$i18n{readingModeLanguageMenuTitle}</div>
<cr-icon-button id="close" class="action-icon language-menu-close-button"
iron-icon="cr:close"
@click="${this.closeLanguageMenu_}"
title="$i18n{readingModeLanguageMenuClose}"
aria-label="$i18n{readingModeLanguageMenuClose}">
</cr-icon-button>
</div>
<div slot="header">
<cr-input autofocus class="search-field" type="search"
placeholder="$i18n{readingModeLanguageMenuSearchLabel}"
@value-changed="${this.onLanguageSearchValueChanged_}"
.value="${this.languageSearchValue_}">
<cr-icon slot="inline-prefix" alt="" icon="cr:search"></cr-icon>
<cr-icon-button iron-icon="cr:clear"
?hidden="${!this.languageSearchValue_}"
slot="inline-suffix"
@click="${this.onClearSearchClick_}"
title="$i18n{readingModeLanguageMenuSearchClear}">
</cr-icon-button>
</cr-input>
</div>
<div slot="body" class="language-menu-body">
<span id="noResultsMessage" ?hidden="${this.searchHasLanguages()}"
aria-live="polite">
$i18n{languageMenuNoResults}
</span>
${this.availableLanguages_.map((item, index) => html`
<div class="language-line dropdown-line">
<span id="language-name-${index}" class="language-name">
${item.readableLanguage}
</span>
<cr-toggle ?checked="${item.checked}" @change="${this.onToggleChange_}"
data-index="${index}"
?disabled="${item.disabled}"
aria-labelledby="language-name-${index}">
</cr-toggle>
</div>
<span id="notificationText"
class="notification-error-${item.notification.isError}"
aria-live="polite">
${this.i18nWraper(item.notification.text)}
</span>
`)}
<cr-toast id="toast-in-dialog" duration="${this.toastDuration_}">
<div id="toastDiv">
<span id="toastTitle">${this.toastTitle_}</span>
<span id="toastMessage">$i18n{readingModeVoiceDownloadedMessage}</span>
</div>
</cr-toast>
</div>
</cr-dialog>