<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="google_assistant_browser_proxy.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-google-assistant-page">
  <template>
    <style include="settings-shared"></style>
    <settings-toggle-button id="googleAssistantEnable"
        class="first primary-toggle"
        pref="{{prefs.settings.voice_interaction.enabled}}"
        label="[[getAssistantOnOffLabel_(
            prefs.settings.voice_interaction.enabled.value)]]"
        on-change="onGoogleAssistantEnableChange_">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.settings.voice_interaction.enabled.value]]">
      <settings-toggle-button id="googleAssistantContextEnable"
          class="continuation indented"
          pref="{{prefs.settings.voice_interaction.context.enabled}}"
          label="$i18n{googleAssistantEnableContext}"
          sub-label="$i18n{googleAssistantEnableContextDescription}"
          on-change="onGoogleAssistantContextEnableChange_">
      </settings-toggle-button>
      <template is="dom-if" if="[[assistantFeatureEnabled_]]">
        <settings-toggle-button id="googleAssistantHotwordEnable"
            class="continuation indented"
            pref="{{prefs.settings.voice_interaction.hotword.enabled}}"
            label="$i18n{googleAssistantEnableHotword}"
            sub-label="$i18n{googleAssistantEnableHotwordDescription}">
        </settings-toggle-button>
      </template>
      <div id="googleAssistantSettings" class="settings-box"
          on-click="onGoogleAssistantSettingsTapped_" actionable>
        <div class="start">
          $i18n{googleAssistantSettings}
        </div>
        <paper-icon-button-light class="icon-external">
          <button></button>
        </paper-icon-button-light>
      </div>
    </template>
  </template>
  <script src="google_assistant_page.js"></script>
</dom-module>
