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

<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="number_settings_section.html">
<link rel="import" href="print_preview_shared_css.html">
<link rel="import" href="select_behavior.html">
<link rel="import" href="settings_behavior.html">
<link rel="import" href="settings_section.html">

<dom-module id="print-preview-scaling-settings">
  <template>
    <style include="print-preview-shared md-select">
    </style>
    <print-preview-settings-section>
      <span slot="title" id="scaling-label">$i18n{scalingLabel}</span>
      <div slot="controls">
        <select class="md-select" aria-labelledby="scaling-label"
            disabled$="[[dropdownDisabled_]]" value="{{selectedValue::change}}">
          <option value="[[ScalingValue.DEFAULT]]">
            $i18n{optionDefaultScaling}
          </option>
          <option value="[[ScalingValue.FIT_TO_PAGE]]"
              hidden$="[[!settings.fitToPage.available]]">
            $i18n{optionFitToPage}
          </option>
          <option value="[[ScalingValue.CUSTOM]]">
            $i18n{optionCustomScaling}
          </option>
        </select>
      </div>
    </print-preview-settings-section>
    <iron-collapse opened="[[customSelected_]]"
        on-transitionend="onCollapseChanged_">
      <print-preview-number-settings-section
          max-value="200" min-value="10" default-value="100"
          disabled$="[[inputDisabled_(dropdownDisabled_, customSelected_)]]"
          current-value="{{currentValue_}}" input-valid="{{inputValid_}}"
          hint-message="$i18n{scalingInstruction}">
      </print-preview-number-settings-section>
    </iron-collapse>
  </template>
  <script src="scaling_settings.js"></script>
</dom-module>
