<div id="appFlexParent" @keydown="${this.onKeyDown_}">
<div id="toolbar-container">
<read-anything-toolbar
.isSpeechActive="${this.speechPlayingState.isSpeechActive}"
.isAudioCurrentlyPlaying="${this.speechPlayingState.isAudioCurrentlyPlaying}"
.isReadAloudPlayable="${this.computeIsReadAloudPlayable()}"
.selectedVoice="${this.selectedVoice_}"
.settingsPrefs="${this.settingsPrefs_}"
.enabledLangs="${this.enabledLangs}"
.voicePackInstallStatus="${this.voiceStatusLocalState_}"
.availableVoices="${this.availableVoices_}"
.previewVoicePlaying="${this.previewVoicePlaying_}"
.localeToDisplayName="${this.localeToDisplayName_}"
.lastDownloadedLang="${this.lastDownloadedLang_}"
@select-voice="${this.onSelectVoice_}"
@voice-language-toggle="${this.onVoiceLanguageToggle_}"
@preview-voice="${this.onPreviewVoice_}"
@voice-menu-close="${this.onVoiceMenuClose_}"
@play-pause-click="${this.onPlayPauseClick_}"
@font-size-change="${this.onFontSizeChange_}"
@font-change="${this.onFontChange_}"
@rate-change="${this.resetSpeechPostSettingChange_}"
@next-granularity-click="${this.playNextGranularity_}"
@previous-granularity-click="${this.playPreviousGranularity_}"
@links-toggle="${this.updateLinks_}"
@images-toggle="${this.updateImages_}"
@letter-spacing-change="${this.onLetterSpacingChange_}"
@theme-change="${this.onThemeChange_}"
@line-spacing-change="${this.onLineSpacingChange_}"
@highlight-toggle="${this.onHighlightToggle_}"
@reset-toolbar="${this.onResetToolbar_}"
@toolbar-overflow="${this.onToolbarOverflow_}"
id="toolbar">
</read-anything-toolbar>
</div>
<div id="containerParent" class="sp-card sp-scroller"
?hidden="${!this.hasContent_}">
<div id="container"
class="user-select-disabled-when-speech-active-${this.speechPlayingState.isSpeechActive}">
</div>
<cr-button id="docs-load-more-button" tabindex="0"
@click="${this.onDocsLoadMoreButtonClick_}"
?hidden="${!this.isDocsLoadMoreButtonVisible_}">
Load More
</cr-button>
</div>
<div id="empty-state-container" ?hidden="${this.hasContent_}">
<sp-empty-state image-path="${this.emptyStateImagePath_}"
dark-image-path="${this.emptyStateDarkImagePath_}"
heading="${this.emptyStateHeading_}"
body="${this.emptyStateSubheading_}">
</sp-empty-state>
</div>
</div>
<cr-toast id="toast" duration="${this.toastDuration_}">
<div id="toastDiv">
<span id="toastTitle">
${this.getLanguageDownloadedTitle_()}
</span>
<span id="toastMessage">$i18n{readingModeVoiceDownloadedMessage}</span>
</div>
</cr-toast>