<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: Serreria;
      src: url({{ STATIC_DIR }}/MFI-Serreria/MFI-Serreria-Extravagante.otf) format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: PTSerif;
      src: url({{ STATIC_DIR }}/PT_Serif/PTSerif-Regular.ttf) format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: PTSerif;
      src: url({{ STATIC_DIR }}/PT_Serif/PTSerif-Italic.ttf) format('truetype');
      font-weight: normal;
      font-style: italic;
    }

    @page {
      size: 210mm 297mm;
      margin: 0mm 10mm 15mm 10mm;
    }

    @page title {
      margin: 10mm 10mm 15mm 10mm;
      background: green;
    }

    @page:left {
      @bottom-left {
        text-align: left;
        content: counter(page);
      }
    }

    @page:right {
      @bottom-right {
        text-align: right;
        content: counter(page);
      }
    }

    @page:empty {
      @bottom-right {
        content: '';
      }

      @bottom-left {
        content: '';
      }
    }

    @page title {
      @bottom-right {
        content: '';
      }

      @bottom-left {
        content: '';
      }
    }


    :root {
      --font-size: 10pt;
      --line-height: 15pt;
    }

    html, body {
      font-family: PTSerif;
      font-size: var(--font-size);
      line-height: var(--line-height);
    }
    
    ul {
      margin: 0;
      padding: 0;
    }

    h1 {
      page: title;
      color: white;
      page-break-after: right;
      font-family: Serreria;
      font-weight: normal;
      font-size: 24pt;
      line-height: 30pt;
    }

    h1 em {
      text-decoration: underline;
      font-style: normal;
    }

    section.step {
      page-break-before: always;
      text-align: center;
      height: 282mm;
      /* position: relative; */
      margin: 0;
      padding: 0;
    }

    section.step_content {
      overflow: hidden;
      position: absolute;
      top: 20mm;
      left: 0;
      right: 0;
      bottom: 0mm;
    }

    .traces {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      position: absolute;
	    top: 50%;
      left: 0;
      right: 0;
      justify-content: center;
      line-height: 1.2em;
      margin: 0;
      padding: 0;
      vertical-align: text-bottom;
    }

    .options {
      list-style-type: none;
      margin: 0 4em 0 0;
    }

    .options li {
      line-height: var(--line-height);
      height: var(--line-height);
      margin: 0;
      padding: 0;
    }

    .sentence {
      z-index: 1;
      position: absolute;
      top: 3mm;
      padding: 0.5em 20mm 3em 20mm;
      width: 100%;
      box-sizing: border-box;
      /* background: -webkit-linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
      /* background: linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
      /* background: white; */
    }
  

    .tree {
      z-index: 1;
      position: absolute;
      padding: 0 20mm 0 20mm;
      bottom: -10mm;
      width: 100%;
      box-sizing: border-box;
      /* background: -webkit-linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
      /* background: linear-gradient(to bottom, rgba(255,255,255,0), white 2.5em); */
      /* background: white; */
    }


    [data-picked] {
      text-decoration: underline;
      position: relative;
      /* font-style: italic; */
    }

    [data-picked]::after {
      content: ' → ';
      text-decoration: none;
      position: absolute;
      left: calc(100% + 1.5em);
      top: 0;
      height: 1.2em;
      display: block;
    }
    
    .traces > :last-child [data-picked]::after {
      display: none;
    }
  </style>
  {% if DEBUG %}
  <link href="{{ STATIC_DIR }}/pagedjs-interface.css" rel="stylesheet" type="text/css">
  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
  {% endif %}
</head>
<body>
  <h1>Paseo por los árboles de Madrid con&nbsp;<em>{{ author }}</em> y&nbsp;{{ title }}</h1>

  {% for sentence, previous_steps, tree, traces in path %}
    <section class="step">
      <section class="sentence">
        {{ previous_steps }}
      </section>
      <section class="step_content">
        <ul class="traces">
          {% for word, dice, options in traces %}
          <li style="margin-top: calc(-{{ dice }} * var(--line-height))">
            <ul class="options">
              {% for option in options %}
              <li {% if loop.index0 == dice %}data-picked{% endif %}>
                {{ option }}
              </li>
              {% endfor %}
            </ul>
            <!-- Rolled: {{ dice }} -->
          </li>
          {% endfor %}
        </ul>
      </section>
      <section class="tree">
        {{ tree.properties.NOMBRE_COMUN }} en {{ tree.properties.MINTDIRECCIONAUX }}
      </section>
    </section>
  {% endfor %}
</body>
</html>