<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="/controls/controlled_button.html">
<link rel="import" href="/controls/extension_controlled_indicator.html">
<link rel="import" href="/controls/settings_checkbox.html">
<link rel="import" href="/lifetime_browser_proxy.html">
<link rel="import" href="/prefs/prefs.html">
<link rel="import" href="/settings_shared_css.html">
<link rel="import" href="/system_page/system_page_browser_proxy.html">

<dom-module id="settings-system-page">
  <template>
    <style include="settings-shared">
      /* TODO(dbeam): is it worth generalizing this style? Does something like
       * this already exist (buttons after a checkbox in the same row)? */
      #hardware-acceleration {
        align-items: center;
        display: flex;
      }

      #hardware-acceleration settings-checkbox {
        flex: 1;
      }

      .proxy-wrapper {
        align-items: center;
        display: flex;
        min-height: inherit;
      }

      extension-controlled-indicator {
        width: 100%;
      }
    </style>
    <div class="settings-box block first">
<if expr="not is_macosx">
      <settings-checkbox label="$i18n{backgroundAppsLabel}"
          pref="{{prefs.background_mode.enabled}}">
      </settings-checkbox>
</if>
      <div id="hardware-acceleration">
        <settings-checkbox label="$i18n{hardwareAccelerationLabel}"
            pref="{{prefs.hardware_acceleration_mode.enabled}}">
        </settings-checkbox>
        <template is="dom-if" if="[[shouldShowRestart_(
            prefs.hardware_acceleration_mode.enabled.value)]]">
          <paper-button on-tap="onRestartTap_">$i18n{restart}</paper-button>
        </template>
      </div>
    </div>
    <div class="settings-box block">
      <div class="proxy-wrapper">
        <controlled-button class="primary-button" pref="[[prefs.proxy]]"
            on-tap="onChangeProxySettingsTap_">
          $i18n{changeProxySettings}
        </controlled-button>
      </div>
      <template is="dom-if" if="[[prefs.proxy.extensionId]]">
        <div class="proxy-wrapper">
          <extension-controlled-indicator
              extension-id="[[prefs.proxy.extensionId]]"
              extension-name="[[prefs.proxy.controlledByName]]"
              extension-can-be-disabled="[[prefs.proxy.extensionCanBeDisabled]]"
              on-extension-disable="onExtensionDisable_">
          </extension-controlled-indicator>
        </div>
      </template>
    </div>
  </template>
  <script src="/system_page/system_page.js"></script>
</dom-module>
