<templates>
  <t t-name="o-spreadsheet-SpreadsheetPrint">
    <div class="o-spreadsheet-print d-flex flex-column h-100 w-100">
      <t t-set="pages" t-value="this.printStore.printPages"/>
      <div class="o-print-header flex-shrink-0 d-flex align-items-center">
        <h3 class="m-0 p-3 ps-4 text-white">Print Preview</h3>
        <span class="text-white">
          <t t-out="pages.length"/>
          pages
        </span>
        <button class="o-button ms-auto me-2 flex-grow-0" t-on-click="this.props.onExitPrintMode">
          Cancel
        </button>
        <button class="o-button primary flex-grow-0 me-4" t-on-click="this.onPrint">Next</button>
      </div>
      <div class="o-print-container d-flex flex-grow-1 overflow-hidden">
        <iframe class="o-print-preview" t-ref="this.iframeRef" title="Print preview"/>
        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start">
          <div class="o-sidePanelBody pt-4">
            <Section t-if="!this.env.model.getters.isDashboard()">
              <div class="o-section-title">Print content</div>
              <Select
                selectedValue="this.printStore.printSelection"
                values="this.printStore.printSelectionOptions"
                class="'o-print-selection'"
                onChange.bind="this.onPrintSelectionChange"
              />
            </Section>

            <Section>
              <div class="o-section-title">Scale</div>
              <Select
                selectedValue="this.printStore.printScale"
                values="this.printStore.printScaleOptions"
                class="'o-print-scale'"
                onChange.bind="this.onPrintScaleChange"
              />
            </Section>

            <Section>
              <div class="o-section-title">Paper</div>
              <Select
                selectedValue="this.printStore.pageLayout"
                values="this.printStore.layoutOptions"
                class="'o-print-layout'"
                onChange.bind="this.onLayoutChange"
              />
            </Section>

            <Section>
              <div class="o-section-title">Orientation</div>
              <BadgeSelection
                choices="this.printStore.orientationChoices"
                onChange.bind="this.changeOrientation"
                selectedValue="this.printStore.orientation"
              />
            </Section>

            <Section t-if="!this.env.model.getters.isDashboard()">
              <div class="o-section-title">Formatting</div>
              <Checkbox
                name="'showGridLines'"
                value="!this.printStore.hideGridLines"
                onChange.bind="this.setGridLinesVisibility"
                className="'mt-2'"
                label.translate="Show gridlines"
              />
            </Section>
          </div>
        </div>
      </div>

      <t t-foreach="pages" t-as="page" t-key="page_index">
        <StandaloneGridCanvas
          t-if="this.printIframe.canvases()[page_index]"
          canvas="this.printIframe.canvases()[page_index]"
          sheetId="page.sheetId"
          zone="page.zone"
          renderingCtx="page.renderingCtx"
        />
      </t>
    </div>
  </t>
</templates>
