{% extends "base.html" %}

{% block site_meta %}
  {{ super() }}
  {% if page.meta and page.meta.print_title %}
    <meta name="print-title" content="{{ page.meta.print_title }}" />
  {% endif %}
{% endblock %}

{% block styles %}
  {{ super() }}
  <link rel="stylesheet" href="https://unpkg.com/katex@0/dist/katex.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/white.min.css">
  <link rel="stylesheet" href="{{ 'stylesheets/slides.css' | url }}">
{% endblock %}

{% block announce %}{% endblock %}

{% block header %}
  {#- bundle.js requires a [data-md-component=header] element to exist (mountHeader);
      keep a real (but visually suppressed) <header> around our own floating toolbar. -#}
  {#- Own toggle instead of Material's `__toc`: that one also drives the
      TOC nested in the primary nav on narrow screens. Placed here so it's
      a sibling of both the toolbar and .md-container, like `__drawer`. -#}
  {% if page.toc %}
    <input class="md-toggle" data-md-toggle="slides-toc" type="checkbox" id="__slides-toc" autocomplete="off">
  {% endif %}
  <header class="md-header slides-header" data-md-component="header">
    <div class="slides-toolbar">
      {% if nav %}
        <label class="slides-toolbar__item md-header__button md-icon" for="__drawer" title="Navegació">
          {% set icon = config.theme.icon.menu or "material/menu" %}
          {% include ".icons/" ~ icon ~ ".svg" %}
        </label>
      {% endif %}
      {% if page.toc %}
        <label class="slides-toolbar__item md-header__button md-icon" for="__slides-toc" title="{{ lang.t('toc') }}">
          {% include ".icons/material/table-of-contents.svg" %}
        </label>
      {% endif %}
      {% if config.theme.palette %}
        {% if not config.theme.palette is mapping %}
          {% include "partials/palette.html" %}
        {% endif %}
      {% endif %}
      <a href=".?print-pdf" class="slides-toolbar__item md-header__button md-icon" target="_blank" rel="noopener" title="Exporta a PDF">
        {% include ".icons/fontawesome/regular/file-pdf.svg" %}
      </a>
    </div>
  </header>
  {% if config.theme.palette %}
    {% if not config.theme.palette is mapping %}
      {% include "partials/javascripts/palette.html" %}
    {% endif %}
  {% endif %}
{% endblock %}

{% block hero %}{% endblock %}

{#- Both sidebars are forced to always behave as off-canvas drawers in
    slides.css, since the fullscreen layout has no room for an inline
    sidebar column at any width. -#}
{% block site_nav %}
  {% if nav %}
    <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation">
      <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner">
          {% include "partials/nav.html" %}
        </div>
      </div>
    </div>
  {% endif %}
  {#- The page TOC, one entry per slide heading. Not partials/toc.html:
      its data-md-component="toc" mounts Material's scroll-spy, which
      tracks headings by page scroll position — meaningless here, reveal.js
      doesn't scroll. Links are handled by the script below instead. -#}
  {% if page.toc %}
    {% set toc = page.toc %}
    {% set first = toc | first %}
    {% if first and first.level == 1 %}
      {% set toc = first.children %}
    {% endif %}
    <div class="md-sidebar slides-toc">
      <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner">
          <nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc') }}">
            <label class="md-nav__title" for="__slides-toc">
              {{ lang.t('toc') }}
            </label>
            <ul class="md-nav__list">
              {% for toc_item in toc %}
                {% include "partials/toc-item.html" %}
              {% endfor %}
            </ul>
          </nav>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block container %}
  <button type="button" class="print-pdf-hint" title="Imprimeix a PDF">
    {% include ".icons/fontawesome/solid/print.svg" %}
    Prem <kbd>Ctrl</kbd> + <kbd>P</kbd> per imprimir a PDF
  </button>
  <div class="reveal">
    {#- Material scopes nearly all of its typography CSS (icons, admonitions,
        tables, tabs...) under .md-typeset; without it on an ancestor here,
        that CSS silently doesn't apply to slide content. -#}
    <div class="slides md-typeset">
      {% for slide in page.slides %}
        {#- A CSS class, not a :first-child selector, marks the title slide:
            reveal's print-pdf layout moves every section into a new
            .pdf-page wrapper div, so it stops being .slides' direct child
            there — a structural selector would silently lose the hero
            styling in exports, a class survives the move. -#}
        {% set title_class = ' class="slide-title"' if loop.first else '' %}
        {% if slide | length > 1 %}
          <section{{ title_class }}>
            {% for html in slide %}
              <section>{{ html }}</section>
            {% endfor %}
          </section>
        {% else %}
          <section{{ title_class }}>{{ slide[0] }}</section>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endblock %}

{% block footer %}
  <div class="slides-footer">
    <span class="slides-footer__logo">{% include "partials/logo.html" %}</span>
    {{ config.site_name }}
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/notes/notes.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/zoom/zoom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/math/math.min.js"></script>
  <script src="{{ 'javascript/print-title.js' | url }}"></script>
  <script>
    var printPdfHint = document.querySelector('.print-pdf-hint');
    if (printPdfHint) {
      printPdfHint.addEventListener('click', function () {
        window.print();
      });
    }

    // Clicking anywhere outside the nav drawer while it's open should close
    // it, same as on every other page. Listens on document in the capture
    // phase instead of relying on the .md-overlay label's native
    // click-toggles-its-checkbox behavior directly: reveal.js's own
    // pointer/touch handling on .reveal sits in between visually, and
    // whichever element actually ends up receiving the click, a capture
    // listener at the document root sees it first regardless.
    // The whole toolbar (palette toggle, PDF export), not just the drawer
    // toggle button itself — those controls stay usable while nav is open
    // (see the z-index comment in slides.css), so clicking them must not
    // count as "outside" either.
    var toolbar = document.querySelector('.slides-toolbar');

    function closeToggle(toggle) {
      toggle.checked = false;
      toggle.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // Same for the TOC panel (__slides-toc).
    function closeOnClickOutside(toggle, panel) {
      if (!toggle) {
        return;
      }
      document.addEventListener('click', function (event) {
        if (event.target === toggle) {
          // The toggle label's native default action forwards a second,
          // separate click straight onto the checkbox itself (not onto
          // the label), after already flipping its `checked` per spec —
          // that's the click that opened it, never one to act on here.
          return;
        }
        if (!toggle.checked) {
          return;
        }
        if (panel && panel.contains(event.target)) {
          return;
        }
        if (toolbar && toolbar.contains(event.target)) {
          return;
        }
        closeToggle(toggle);
      }, true);
    }

    var drawer = document.getElementById('__drawer');
    var tocToggle = document.getElementById('__slides-toc');
    var toc = document.querySelector('.slides-toc');
    closeOnClickOutside(drawer, document.querySelector('.md-sidebar--primary'));
    closeOnClickOutside(tocToggle, toc);

    // Only one drawer open at a time: they'd overlap under the toolbar.
    [[drawer, tocToggle], [tocToggle, drawer]].forEach(function (pair) {
      if (pair[0] && pair[1]) {
        pair[0].addEventListener('change', function () {
          if (pair[0].checked && pair[1].checked) {
            closeToggle(pair[1]);
          }
        });
      }
    });

    // Ctrl/Cmd+P on the normal deck opens the print-pdf layout in a new tab
    // instead (reveal.js needs that mode to lay slides out one-per-page for
    // print; printing the live single-slide view directly looks wrong, and
    // a new tab keeps the presenter's current slide/position untouched).
    if (!/print-pdf/.test(location.search)) {
      window.addEventListener('keydown', function (event) {
        if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
          event.preventDefault();
          var separator = location.search ? '&' : '?';
          window.open(location.pathname + location.search + separator + 'print-pdf' + location.hash, '_blank');
        }
      });
    }
  </script>
  {% block reveal_script %}
    <script>
      // Landing straight on ?print-pdf (export button, Ctrl+P, a shared
      // link) opens the browser's print dialog on its own. reveal.js fires
      // "pdf-ready" once it has finished computing and applying the
      // one-slide-per-page print layout (which itself waits on slide
      // images) — printing any earlier would print the un-paginated view.
      // Registered before initialize() so it can't fire before we listen.
      if (/print-pdf/.test(location.search)) {
        Reveal.on('pdf-ready', function () {
          requestAnimationFrame(function () {
            window.print();
          });
        });
      }

      // Progressive line reveal (`{data-line-numbers="1-2|3|4"}` on a fenced
      // code block, same step syntax reveal.js's own highlight plugin uses)
      // on top of Pygments-rendered code, not reveal's bundled hljs plugin:
      // hljs re-tokenizes from .textContent and replaces .innerHTML on every
      // `pre code` it finds with no way to opt individual blocks out, which
      // destroys the (differently-styled) Pygments markup. This reuses the
      // per-line <span id="__span-N-M"> markup pymdownx.highlight already
      // emits (line_spans: __span in the theme's markdown_extensions), and
      // drives the steps off an invisible chain of reveal fragments so the
      // normal fragment/slide-number/progress-bar navigation counts them.
      // Must run before Reveal.initialize() so the fragments it appends are
      // included in reveal's initial indexing.
      document.querySelectorAll('.reveal [data-line-numbers]').forEach(function (block) {
        var code = block.querySelector('code');
        var section = block.closest('section');
        if (!code || !section) {
          return;
        }

        var lines = Array.prototype.filter.call(code.children, function (el) {
          return el.tagName === 'SPAN';
        });
        var steps = block.getAttribute('data-line-numbers').split('|').map(function (step) {
          return step.split(',').map(function (range) {
            var bounds = range.split('-').map(Number);
            return { start: bounds[0], end: bounds[1] || bounds[0] };
          });
        });

        function applyStep(ranges) {
          lines.forEach(function (line, i) {
            var active = ranges.some(function (r) { return i + 1 >= r.start && i + 1 <= r.end; });
            line.classList.toggle('line-highlight', active);
            line.classList.toggle('line-dim', !active);
          });
        }

        applyStep(steps[0]);

        steps.slice(1).forEach(function (ranges, i) {
          var marker = document.createElement('span');
          marker.className = 'fragment line-numbers-step';
          section.appendChild(marker);
          marker.addEventListener('visible', function () { applyStep(ranges); });
          marker.addEventListener('hidden', function () { applyStep(steps[i]); });
        });
      });

      // Full list of configuration options available here:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        width: 1920,
        height: 1080,

        controls: true,
        progress: true,
        history: true,
        center: true,
        hash: true,
        slideNumber: 'c/t',

        transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [ RevealNotes, RevealZoom, RevealMath ]
      }).then(function () {
        // TOC links point at heading ids inside slides, but reveal.js
        // doesn't scroll to an anchor: go to the slide that contains the
        // heading instead, and keep the entry of the current slide (or of
        // the last heading before it) highlighted.
        if (toc) {
          var slides = Reveal.getSlides();
          var entries = [];
          toc.querySelectorAll('a.md-nav__link[href^="#"]').forEach(function (link) {
            var target = document.getElementById(decodeURIComponent(link.hash.slice(1)));
            var slide = target && target.closest('section');
            if (!slide) {
              return;
            }
            entries.push({ link: link, index: slides.indexOf(slide) });
            link.addEventListener('click', function (event) {
              event.preventDefault();
              var indices = Reveal.getIndices(slide);
              Reveal.slide(indices.h, indices.v);
              closeToggle(tocToggle);
            });
          });

          var markActive = function () {
            var current = slides.indexOf(Reveal.getCurrentSlide());
            var active = null;
            entries.forEach(function (entry) {
              if (entry.index <= current) {
                active = entry;
              }
            });
            entries.forEach(function (entry) {
              entry.link.classList.toggle('md-nav__link--active', entry === active);
            });
          };
          markActive();
          Reveal.on('slidechanged', markActive);
        }

        // Small language chip on every highlighted code block (Pygments
        // already applies the language- class server-side).
        document.querySelectorAll('.reveal pre code[class*="language-"]').forEach(function (code) {
          var match = code.className.match(/language-(\S+)/);
          var pre = code.closest('pre');
          if (!match || !pre || pre.querySelector('.code-lang')) {
            return;
          }
          var badge = document.createElement('span');
          badge.className = 'code-lang';
          badge.textContent = match[1];
          pre.appendChild(badge);
        });
      });
    </script>
  {% endblock %}
{% endblock %}