import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style include="cr-shared-style settings-shared">
  /* Override the default padding of a cr-row to 0. The template inside has
     left and right padding. */
  .cr-row-with-template {
    padding: 0;
  }

  /* Ensure the toggle button stretches the width of its container despite
     removing its parent's padding. */
  #liveCaptionToggleButton {
    width: 100%;
  }

  .language-dropdown {
    margin-inline-start: auto;
  }

  .subsection-group {
    padding-bottom: 10px;
  }

  /* Ensure the toggle button stretches the width of its container despite
     removing its parent's padding. */
  #liveTranslateToggleButton {
    width: 100%;
  }
</style>
<div class="cr-row cr-row-with-template">
  <settings-toggle-button id="liveTranslateToggleButton"
      pref="{{prefs.accessibility.captions.live_translate_enabled}}"
      on-change="onLiveTranslateEnabledChange_"
      label="$i18n{captionsEnableLiveTranslateTitle}"
      sub-label="$i18n{captionsEnableLiveTranslateSubtitle}">
  </settings-toggle-button>
</div>
<cr-collapse
    opened="[[prefs.accessibility.captions.live_translate_enabled.value]]">
  <div class="cr-row continuation subsection-group">
    <div class="start cr-padded-text" aria-hidden="true">
        $i18n{captionsLiveTranslateTargetLanguage}
        <div class="secondary">
          $i18n{captionsLiveTranslateTargetLanguageSubtitle}
        </div>
    </div>
    <settings-dropdown-menu id="targetLanguageDropdown"
        class="language-dropdown"
        pref-key="accessibility.captions.live_translate_target_language"
        menu-options="[[translatableLanguages_]]"
        label="$i18n{captionsLiveTranslateTargetLanguage}">
    </settings-dropdown-menu>
  </div>
</cr-collapse>
<!--_html_template_end_-->`;
}
