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

<link rel="import" href="chrome://resources/html/event_tracker.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/webui_listener_tracker.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="../cloud_print_interface.html">
<link rel="import" href="../metrics.html">
<link rel="import" href="../native_layer.html">
<link rel="import" href="../data/destination.html">
<link rel="import" href="../data/destination_store.html">
<link rel="import" href="../data/invitation_store.html">
<link rel="import" href="../data/document_info.html">
<link rel="import" href="../data/measurement_system.html">
<link rel="import" href="../data/user_info.html">
<link rel="import" href="settings_behavior.html">
<link rel="import" href="state.html">
<link rel="import" href="model.html">
<link rel="import" href="header.html">
<link rel="import" href="preview_area.html">
<link rel="import" href="destination_settings.html">
<link rel="import" href="pages_settings.html">
<link rel="import" href="copies_settings.html">
<link rel="import" href="layout_settings.html">
<link rel="import" href="color_settings.html">
<link rel="import" href="media_size_settings.html">
<link rel="import" href="margins_settings.html">
<link rel="import" href="dpi_settings.html">
<link rel="import" href="pages_per_sheet_settings.html">
<link rel="import" href="scaling_settings.html">
<link rel="import" href="other_options_settings.html">
<link rel="import" href="advanced_options_settings.html">
<link rel="import" href="more_settings.html">
<if expr="not chromeos">
  <link rel="import" href="link_container.html">
</if>
<dom-module id="print-preview-app">
  <template>
    <style>
      :host {
        display: flex;
        height: 100%;
        user-select: none;
      }

      #sidebar {
        -webkit-border-end: 1px solid #c8c8c8;
        background-color: white;
        display: flex;
        flex-direction: column;
        max-width: 310px;
        min-width: 310px;
      }

      #settingsSections {
        background: #fbfbfb;
        border-top: 1px solid #f3f3f3;
        flex: 1;
        overflow: auto;
      }

      #preview-area-container {
        -webkit-border-start: 1px solid #dcdcdc;
        align-items: center;
        background-color: #e6e6e6;
        flex: 1;
      }
    </style>
    <print-preview-state id="state" state="{{state}}"></print-preview-state>
    <print-preview-model id="model" settings="{{settings}}"
        destination="{{destination_}}" document-info="{{documentInfo_}}"
        recent-destinations="{{recentDestinations_}}"
        on-save-sticky-settings="onSaveStickySettings_">
    </print-preview-model>
    <div id="sidebar" on-setting-valid-changed="onSettingValidChanged_">
      <print-preview-header destination="[[destination_]]" state="[[state]]"
          error-message="[[errorMessage_]]" settings="[[settings]]"
          on-print-requested="onPrintRequested_"
          on-cancel-requested="onCancelRequested_">
      </print-preview-header>
      <div id="settingsSections">
        <print-preview-destination-settings id="destinationSettings"
            destination="[[destination_]]"
            destination-store="[[destinationStore_]]"
            invitation-store="[[invitationStore_]]"
            disabled="[[controlsDisabled_]]" state="[[state]]"
            recent-destinations="[[recentDestinations_]]"
            user-info="{{userInfo_}}" available>
        </print-preview-destination-settings>
        <print-preview-pages-settings settings="{{settings}}"
            document-info="[[documentInfo_]]"
            disabled="[[controlsDisabled_]]"
            hidden$="[[!settings.pages.available]]">
        </print-preview-pages-settings>
        <print-preview-copies-settings settings="{{settings}}"
            disabled="[[controlsDisabled_]]"
            hidden$="[[!settings.copies.available]]">
        </print-preview-copies-settings>
        <print-preview-layout-settings settings="{{settings}}"
            disabled="[[controlsDisabled_]]"
            hidden$="[[!settings.layout.available]]">
        </print-preview-layout-settings>
        <print-preview-color-settings settings="{{settings}}"
            disabled="[[controlsDisabled_]]"
            hidden$="[[!settings.color.available]]">
        </print-preview-color-settings>
        <print-preview-more-settings
            settings-expanded-by-user="{{settingsExpandedByUser_}}"
            disabled="[[controlsDisabled_]]"
            hidden$="[[!shouldShowMoreSettings_]]">
        </print-preview-more-settings>
        <iron-collapse id="moreSettings"
            opened="[[shouldExpandSettings_(
                settingsExpandedByUser_, shouldShowMoreSettings_)]]">
          <print-preview-media-size-settings settings="{{settings}}"
              capability="[[destination_.capabilities.printer.media_size]]"
              disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.mediaSize.available]]">
          </print-preview-media-size-settings>
          <print-preview-margins-settings settings="{{settings}}"
              disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.margins.available]]">
          </print-preview-margins-settings>
          <print-preview-dpi-settings settings="{{settings}}"
              capability="[[destination_.capabilities.printer.dpi]]"
              disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.dpi.available]]">
          </print-preview-dpi-settings>
          <template is="dom-if" if="[[showPagesPerSheet_]]">
            <print-preview-pages-per-sheet-settings settings="{{settings}}"
                disabled="[[controlsDisabled_]]"
                hidden$="[[!settings.pagesPerSheet.available]]">
            </print-preview-pages-per-sheet-settings>
          </template>
          <print-preview-scaling-settings settings="{{settings}}"
              document-info="[[documentInfo_]]" disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.scaling.available]]">
          </print-preview-scaling-settings>
          <print-preview-other-options-settings settings="{{settings}}"
              disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.otherOptions.available]]">
          </print-preview-other-options-settings>
          <print-preview-advanced-options-settings
              settings="{{settings}}" destination="[[destination_]]"
              disabled="[[controlsDisabled_]]"
              hidden$="[[!settings.vendorItems.available]]">
          </print-preview-advanced-options-settings>
        </iron-collapse>
<if expr="not chromeos">
        <print-preview-link-container destination="[[destination_]]"
            app-kiosk-mode="[[isInAppKioskMode_]]"
            disabled="[[controlsDisabled_]]"
<if expr="is_macosx">
            on-open-pdf-in-preview="onOpenPdfInPreview_"
</if>
            on-print-with-system-dialog="onPrintWithSystemDialog_">
        </print-preview-link-container>
</if>
      </div>
    </div>
    <div id="preview-area-container">
      <print-preview-preview-area id="previewArea" settings="{{settings}}"
          destination="[[destination_]]" document-info="{{documentInfo_}}"
          state="[[state]]" measurement-system="[[measurementSystem_]]"
          preview-state="{{previewState_}}">
      </print-preview-preview-area>
    </div>
  </template>
  <script src="app.js"></script>
</dom-module>
