{% extends "base.html" %}
{% block title %}{{ deck.title }} -- {{ site.brand }}{% endblock %}
{% block nav_actions %}
  {% if has_pdf %}
  <a
    href="{{ deck.slug }}.pdf"
    class="site-resource-link"
    download
  >
    <span class="pdf-file-icon" aria-hidden="true"><span>PDF</span></span>
    <span>ppt</span>
  </a>
  {% endif %}
  {% if has_notes_pdf %}
  <a
    href="notes.pdf"
    class="site-resource-link"
    download
  >
    <i data-lucide="file-text" aria-hidden="true"></i>
    <span class="icon-fallback" aria-hidden="true">N</span>
    <span>Notes PDF</span>
  </a>
  {% 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"
        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>
          <label class="deck-setting-row">
            <span><i data-lucide="palette" aria-hidden="true"></i>Slide Color</span>
            <input type="checkbox" data-setting="slide-color" checked />
          </label>
          <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 %}