<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Print 2-Up</title>
    <link rel="stylesheet" href="assets/css/base.css" />
    <style>
      /* Letter page with two half-letter pages laid out horizontally */
      /* Do NOT constrain the whole document to a single sheet */
      html, body { margin: 0; padding: 0; background: white; }
      @media print { html, body { width: auto !important; height: auto !important; overflow: visible !important; } }

      /* Each .sheet is one letter-sized page */
      .sheet { display: flex; gap: 0; margin: 0; padding: 0; width: 11in; height: 8.5in; }
      .cell { width: 5.5in; height: 8.5in; overflow: hidden; }
      .cell > .page-content { width: 5.5in; height: 8.5in; box-shadow: none !important; }
      .sheet { page-break-after: always; break-after: page; }
      .sheet:last-child { page-break-after: auto; break-after: auto; }

      PLACEHOLDER_FOR_SCOPED_CSS
    </style>
  </head>
  <body>
    {{ range .Sheets }}
      <div class="sheet">
        <div class="cell"><div class="page-content" id="{{ .Left.PageID }}">{{ .Left.Content }}</div></div>
        {{ if .Right }}<div class="cell"><div class="page-content" id="{{ .Right.PageID }}">{{ .Right.Content }}</div></div>{{ end }}
      </div>
    {{ end }}
  </body>
</html>


