{% 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/plugin/highlight/monokai.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. -#}
  <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 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 %}

{#- Only the primary nav (no secondary TOC — a slide deck has no per-page
    headings worth a sidebar). Forced to always behave as an off-canvas
    drawer 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 %}
{% 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">
    <div class="slides">
      <section data-markdown
               data-separator="^\n---\n$"
               data-separator-vertical="^\n--\n$"
               data-notes="^Note:">
        <script type="text/template">
          {{ page.markdown }}
        </script>
      </section>
    </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/markdown/markdown.min.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="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/highlight.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();
      });
    }

    // 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();
          });
        });
      }

      // 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: [ RevealMarkdown, RevealNotes, RevealZoom, RevealMath, RevealHighlight ]
      }).then(function () {
        // Small language chip on every highlighted code block (no filename
        // metadata is available: fenced code is parsed client-side by
        // markdown-it, which doesn't support pymdown's `title="..."` syntax).
        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 %}