{% extends "base.html" %}
{% block title %}{{ deck.title }} -- {{ site.brand }}{% endblock %}
{% block nav_actions %}
  {% if has_pdf or has_notes_pdf %}
  <div class="site-resource-menu" data-resource-menu>
    <button
      type="button"
      class="site-resource-trigger"
      data-resource-toggle
      aria-expanded="false"
      aria-haspopup="menu"
      aria-label="Download resources"
      title="Download resources"
    >
      <span class="pdf-file-icon" aria-hidden="true"><span>PDF</span></span>
    </button>
    <div class="site-resource-menu-panel" data-resource-panel role="menu" hidden>
      {% if has_pdf %}
      <a href="{{ slides_pdf_name|urlencode }}" class="site-resource-menu-item" role="menuitem" download>
        <i data-lucide="presentation" aria-hidden="true"></i>
        <span class="icon-fallback" aria-hidden="true">S</span>
        <span>Slides</span>
      </a>
      {% endif %}
      {% if has_notes_pdf %}
      <a href="{{ notes_pdf_name|urlencode }}" class="site-resource-menu-item" role="menuitem" download>
        <i data-lucide="file-text" aria-hidden="true"></i>
        <span class="icon-fallback" aria-hidden="true">N</span>
        <span>Notes</span>
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}
{% endblock %}
{% block main_class %}deck-main{% endblock %}
{% block content %}
<section
  class="deck-grid"
  data-deck-slug="{{ deck.slug }}"
  data-slide-count="{{ slide_count }}"
  data-default-slide-number="{% if deck.web.show_slide_number %}true{% else %}false{% endif %}"
  data-default-clock="{% if deck.web.show_clock %}true{% else %}false{% endif %}"
>
  <div class="deck-viewer">
    <div class="deck-viewer-frame">
      <iframe
        src="slides.html{% if slides_version %}?v={{ slides_version }}{% endif %}"
        title="{{ deck.title }} presentation"
        allowfullscreen
        allow="autoplay; fullscreen"
        loading="lazy"
        class="deck-iframe"
      ></iframe>
    </div>
    <div class="deck-controls" role="toolbar" aria-label="Slide controls">
      <div class="deck-control-group" aria-label="Playback">
        <button data-control="prev" class="deck-ctl-btn" aria-label="Previous slide" title="Previous" type="button">
          <i data-lucide="chevron-left" aria-hidden="true"></i>
          <span class="icon-fallback" aria-hidden="true">‹</span>
        </button>
        <button data-control="restart" class="deck-ctl-btn" aria-label="Restart slide" title="Restart" type="button">
          <i data-lucide="rotate-ccw" aria-hidden="true"></i>
          <span class="icon-fallback" aria-hidden="true">↺</span>
        </button>
        <button data-control="toggle-play" class="deck-ctl-btn deck-ctl-play" aria-label="Play" title="Play" data-state="paused" type="button">
          <i data-lucide="play" class="deck-ctl-icon-play" aria-hidden="true"></i>
          <i data-lucide="pause" class="deck-ctl-icon-pause" aria-hidden="true"></i>
          <span class="icon-fallback deck-ctl-icon-play" aria-hidden="true">▶</span>
          <span class="icon-fallback deck-ctl-icon-pause" aria-hidden="true">Ⅱ</span>
        </button>
        <button data-control="next" class="deck-ctl-btn" aria-label="Next slide" title="Next" type="button">
          <i data-lucide="chevron-right" aria-hidden="true"></i>
          <span class="icon-fallback" aria-hidden="true">›</span>
        </button>
        <button data-control="fullscreen" class="deck-ctl-btn" aria-label="Fullscreen" title="Fullscreen" type="button">
          <i data-lucide="maximize" aria-hidden="true"></i>
          <span class="icon-fallback" aria-hidden="true">⛶</span>
        </button>
        <span class="deck-counter" data-counter aria-live="polite">1 / {{ slide_count }}</span>
      </div>
      <div class="deck-settings" data-settings>
        <button
          type="button"
          class="deck-settings-trigger"
          data-settings-toggle
          aria-expanded="false"
          aria-haspopup="true"
        >
          <i data-lucide="settings" aria-hidden="true"></i>
          <span class="icon-fallback" aria-hidden="true">⚙</span>
          <span>Player Settings</span>
        </button>
        <div class="deck-settings-panel" data-settings-panel hidden>
          <div class="deck-setting-row deck-setting-row-action">
            <span><i data-lucide="palette" aria-hidden="true"></i>Slide Theme</span>
            <button
              type="button"
              class="deck-theme-toggle"
              data-setting="slide-theme"
              aria-label="Toggle slide theme"
            >
              <i data-lucide="sun" class="deck-theme-icon deck-theme-icon-sun" aria-hidden="true"></i>
              <i data-lucide="moon" class="deck-theme-icon deck-theme-icon-moon" aria-hidden="true"></i>
              <span class="icon-fallback" aria-hidden="true">T</span>
              <span data-slide-theme-label>Dark</span>
            </button>
          </div>
          <label class="deck-setting-row">
            <span><i data-lucide="list-ordered" aria-hidden="true"></i>Enumeration</span>
            <input
              type="checkbox"
              data-setting="slide-number"
              {% if deck.web.show_slide_number %}checked{% endif %}
            />
          </label>
          <label class="deck-setting-row">
            <span><i data-lucide="clock" aria-hidden="true"></i>Clock</span>
            <input type="checkbox" data-setting="clock" {% if deck.web.show_clock %}checked{% endif %} />
          </label>
        </div>
      </div>
    </div>
  </div>

  <aside class="deck-sidebar" aria-label="Slide list">
    <ol class="deck-slide-list" role="list">
      {% for slide in slides %}
      <li>
        <button
          type="button"
          class="deck-slide-card"
          data-slide-target="{{ slide.index }}"
          {% if loop.first %}aria-current="true"{% endif %}
        >
          <div class="deck-slide-thumb">
            {% if slide.thumbnail %}
            <img
              src="{{ slide.thumbnail }}"
              alt=""
              loading="lazy"
              decoding="async"
            />
            {% else %}
            <div class="deck-slide-thumb-empty" aria-hidden="true"></div>
            {% endif %}
            <div class="deck-slide-overlay">
              <span class="deck-slide-title">
                {{ slide.name or slide.scene }}
              </span>
              {% set duration_seconds = slide.duration_s|round(0, "ceil")|int %}
              <span class="deck-slide-duration">
                {{ "%d:%02d"|format(duration_seconds // 60, duration_seconds % 60) }}
              </span>
            </div>
          </div>
        </button>
      </li>
      {% endfor %}
    </ol>
  </aside>

  {% if notes_html %}
  <article class="deck-notes prose prose-invert max-w-none">
    {{ notes_html|safe }}
  </article>
  {% endif %}
</section>
{% endblock %}